最近よく見かける、画像の上に半透明の帯を配置しテキストを表示する方法。
おしゃれですよね！
また、文字部分は画像ではなくテキストなんです。
テキストでの表示は、後々に文字部分だけを編集したい場合にも簡単に対応できますし、SEO的にも良いと思います。
ほんの少しCSSをいじれば実現可能ですので、とてもオススメです。
今回はこの画像の上にテキストを表示する方法を紹介したいと思います。
サンプルコード CSSとHTML
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .sample { width: 200px; position: relative; } .sample p{ position: absolute; left: 0; bottom: 0.5em; color: #fff; margin: 0; padding: 5px 0 5px 3%; width: 97%; background: #000; filter: Alpha(opacity=70); opacity: 0.7; } .sample a { text-decoration: none; } .sample a:hover p{ text-decoration: underline; } |
HTML
1 2 3 4 5 6 | <div class="sample"> <a href="#"> <img src="#" width="100%" /> <p>画像の上に表示する文字</p> </a> </div><!-- .sample --> |
上記サンプルのは、他のCSSの干渉がなければ、
- 画像サイズに関係なく幅が200pxで表示される
- 画像の縦横比は維持している
- 半透明の帯の色は黒
- 不透明度70%
- 半透明の帯の下辺と画像の下辺は揃っていない
- 画像がリンクとなっている
- マウスオーバーでテキストに下線が現れる
適宜好みに合わせて変更をしてください。
WordPressでの応用
私はWordPressを利用しているのですが、今回紹介している方法を応用すれば本当に色々なことができます。WordPressの記事タイトル一覧にアイキャッチ画像を表示の記事紹介したアイキャッチ画像表示と合わせて使えば、とても見やすくてオシャレなページができあがると思います。私はループ内に下記のようなコードを書いて使用しています。
1 2 3 4 5 6 | <div class="sample"> <a href="<?php the_permalink(); ?>"> <img src="<?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, ”, true); echo $image_url[0]; ?>" width="100%" class="colorbox-0" /> <p><?php the_title() ?></p> </a> </div><!-- .sample --> |
WordPressの記事タイトル一覧にアイキャッチ画像を表示の記事内容と合わせて読んでいただければ幸いです。
感想
とても簡単にできる割には、効果の大きいカスタマイズだと思います。透過している背景色などを変えれば、どんなページにも合うデザインになると思います。
ぜひ一度、お試しあれ！
関連記事
固定ページや投稿記事ごとに個別のCSSとJavaScriptを追加WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。
WordPressの記事タイトル一覧にアイキャッチ画像を表示WordPressをカスタマイズして、記事タイトル一覧のページを作成している方も多いと思います。各タイトルと一緒にアイキャッチ画像を表示すれば、さらに見やすいページができあがります。
