画像の上に半透明の帯とテキストを表示

アイキャッチ画像の上に半透明の帯と記事タイトルをテキスト表示最近よく見かける、画像の上に半透明の帯を配置しテキストを表示する方法。
おしゃれですよね!

また、文字部分は画像ではなくテキストなんです。
テキストでの表示は、後々に文字部分だけを編集したい場合にも簡単に対応できますし、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の記事タイトル一覧にアイキャッチ画像を表示の記事内容と合わせて読んでいただければ幸いです。

感想

とても簡単にできる割には、効果の大きいカスタマイズだと思います。
透過している背景色などを変えれば、どんなページにも合うデザインになると思います。
ぜひ一度、お試しあれ!


関連記事

WordPressの画像を連続で投稿に挿入する 連続で画像を投稿に挿入
WordPressにて何枚もの画像を連続で挿入したい時があります。メディアを追加ウィンドウを自動で閉じないカスタマイズを紹介します。
WordPressで関連記事一覧を表示する方法 WordPressで関連記事を一覧表示する
WordPressなどで記事の隅っこによく見かける関連記事の一覧。プラグインを使用せずに実装する方法を紹介します。
WordPressでの子ページの作り方 固定ページを階層化し親ページに子ページ一覧を表示
WordPressの固定ページを階層化し、親ページに子ページの一覧を表示する方法を紹介します。プラグイン不使用です。
WordPressの固定ページや投稿記事に個別にcssを追加する 固定ページや投稿記事ごとに個別のCSSとJavaScriptを追加
WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。
WordPressの記事タイトル一覧にアイキャッチ画像を表示する WordPressの記事タイトル一覧にアイキャッチ画像を表示
WordPressをカスタマイズして、記事タイトル一覧のページを作成している方も多いと思います。各タイトルと一緒にアイキャッチ画像を表示すれば、さらに見やすいページができあがります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>