CSS テキストの前後に画像を表示する方法

技術情報
CSS テキストの前後に画像を表示する方法

 

ホームページで見出し(タイトル)などの前方に画像が表示されていることが良くあります。

こんな感じです。

タイトルの前方に画像

 

今回はこれを実現するCSSをご紹介します。

先ほどのタイトルのHTMLは次のように記述されています。

<h3 class=”mae_gazou”>タイトルの前に画像</h3>

このHTMLに対して以下の様なCSSを記述します。

h3.mae_gazou {
  font-weight: bold;
  font-size: 180%;
}

h3.mae_gazou::before {
  content: url(画像の存在するURL);
  position: relative;
  top: 0.25em;
  margin-right: 0.5em;
}

h3.mae_gazou {・・・}はタイトルの文字の設定ですから割愛します。

次のh3.mae_gazou::before {・・・}が今回の肝です。

::beforeは擬似要素と呼ばれるもので指定した要素(h3.mae_gazouですね)の前方に対する操作を示します。

content: url(画像の存在するURL);は指定した要素(h3.mae_gazou)の前方にURLの画像を表示させよという指示です。

今回使用した画像はテックエイドの無料画像集からダウンロードできます。

position: relative; と top: 0.25em;は画像の上下の位置関係を指示します。topが+ならば下方向、-ならば上方向に移動します。ここでは0.25emだけ初期位置から下げるという意味です。

margin-right: 0.5em;は画像とテキストの間の距離です。ここでは0.5emだけ離すという意味です。

このCSS記述をCSSファイル(WordPressでしたらstyle.css)に書き込めばOKです。

HTMLで<h3 class=”mae_gazou”>・・・</h3>と記述すると前方に画像が付きます。

後方の場合は::beforeが::afterになって、画像とテキストの間の距離の指示をmargin-leftにするだけです。

極めて簡単です。

 

お試しください。

 

ただ、面倒・・・、適切な画像の制作とCSSファイルへの書き込み・・・

簡単に修正が可能なWordPressでもテーマのバージョンを上げるとstyle.cssが上書きされますし、かと言って子テーマを作るのも面倒。

TAテーマ001はこの面倒な作業を全てテーマが引き受けます。

CSSを記述する必要もありません。

もちろんテーマのバージョンアップを気にする必要もありません。

詳しくはこちらをご覧ください。

«
»
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪