htmlで画像とテキストを中央に並ばせる方法

この記事は2分で読めます

2-3

さて、意気揚々とブログを始めてみた訳ですが開始早々新たな問題にぶち当たりました。。

ブログ内での画像とテキストの配置です。

webはあまり詳しくないのですが、ホームページビルダーでHPを作ったことがあって、CSSのコード打ちなどができるようになり、少し知識はあったつもりでした。ただあんまり触っていなかったのと、ブログの仕様が異なっていたこともあって完全に忘れていました・・・

 

 

まず編集前の画像がこちら↓

2-1

タイトルのSTEP1 ワードを~の部分を画像に合わせて文字を大きく太くし、さらに中央に並ばせ、ピンクにしたいと思います。

①大きくする ②太くする ③色を変える ④画像とテキストを中央に並ばせる

ざっと4つもやることがあります。

 

①大きくする  ⇒ <font size=”3″>テキスト</font>

size=”○” ○には、文字のサイズを数字で書き込みます。

 

<例>size=”3″ にした場合

⇒ <font size=”3“>テキスト</font>と打ち込んだはずが、なぜかこういう風に置き換わります。

<span style=”font-size:medium;”>size=”3″ にした場合</span>

 

どうやらブログの設定のようです。span style=””~は指定された一部分を変えるコードです。

サイズ1
サイズ2
サイズ3
サイズ4
サイズ5
サイズ6

サイズ1⇒ xx-small    サイズ2⇒ small    サイズ3⇒ medium    サイズ4⇒ large

サイズ5⇒ x-large    サイズ6⇒ xx-large

ブログを書く上で必要なのでメモ。

 

 

②太くする  ⇒ <strong>テキスト</strong>
テキストを強調の意味がある”strong”ではさむ

 

③色を変える ⇒ <font color=”#FF708B”>テキスト</font>

color=”#○”の○の部分に6ケタのカラーコードか、redやYellowなどのカラーネームを書き込む

 

④画像とテキストを中央に並ばせる ⇒<img src=”画像の場所/ファイル名” alt=”画像の説明” align=”middle”>

画像のimg要素のテキストにalign=”○”を付け加えて画像に並ぶテキストの位置を指定します。

 

align=”top” 上に揃える
align=”middle” 中央に揃える
align=”bottom” 下に揃える

 

①~④をまとめて書き込みます

<img src=”画像を保存している場所/step_1.png” alt=”step1″ width=”100″ height=”40″ align=”middle” /><strong><font size=”3″ color=”#FF708B”>ワードを開いてその他の形式を保存する</font></strong>

 

step1 ワードを開いてその他の形式を保存する

 

思うような感じに出来ました!

gちなみにブログの仕様では⇒ <strong><span style=”color: #ff708b; font-size:medium;”> ワードを開いてその他の形式を保存する</span></strong>になっていました。どちらでも大丈夫なのですね。とりあえず完成です。

 

 

  • このエントリーをはてなブックマークに追加
  • LINEで送る

関連記事

  1. favicon
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

このブログについて

はじめまして♪ みるくです。 イラストレーター、フォトショップなどのデザイン・PC関係を中心に、必要なことを忘れないように思いつくまま書き綴っていきます。 映画、本など日常のこともたま~に語ります。
  • このエントリーをはてなブックマークに追加
  • LINEで送る