どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
最近ブログやサイトの記事一覧や関連記事などのアイキャッチ画像上に、カテゴリーが色分けされて表示されているのをよく見かけるようになりました。
アイキャッチだけでは画像にはユーザーの目線が行きやすいですが、カテゴリーまではなかなか見てもらえない場合もあります。
そこでワードプレスのSTINGER8を使って、アイキャッチの画像上にカテゴリーを表示させるカスタマイズを行っていきたいと思います。
視線を誘導しやすい画像にカテゴリーも表示させることで、ユーザーにどのカテゴリーに属している記事なのかを視覚的に把握してもらいやすくなり、ユーザビリティの向上にも繋がると思うのでオススメです。
カスタマイズ後の完成デザイン
アイキャッチ画像の左上にカテゴリーが表示されているのがわかるので、この場合だとワードプレスのカテゴリー記事だと一目で判断できますね。
上記画像はSTINGER8の関連記事エリアになりますが、デフォルトのデザインからCSSでタイル形式にあらかじめカスタマイズしています。
| 参考：STINGER8の関連記事をCSSでかっこよくタイル形式に表示する方法 |
トップページの記事一覧やサイドバーの新着記事一覧の画像にも表示させることは可能なので、その方法も含めてご紹介していきます。
画像上にカテゴリーを表示させる方法
まず初めにSTINGER8のテーマファイルを編集するので、不都合が起きた場合にすぐ対応できるようファイルのバックアップを用意しておくか、タブを複数開いて編集前に戻せるよう準備しておきましょう。
カスタマイズに使用するファイルは、「kanren.php」「itiran.php」「newpost.php」「style.css」になります。
- 「kanren.php」は関連記事エリア
- 「itiran.php」はトップページ記事一覧
- 「newpost.php」は新着記事一覧
- 「style.css」はデザインの調整
style.cssで編集したデザインが全てに適用され、残りの３つのファイルは同じ編集を行うだけなので、カテゴリーを表示させたいファイルを編集されて下さい。
また、「親テーマ」ではなく「子テーマ」のファイルを使って、カスタマイズをするようにしましょう。
テーマファイルの編集
ワードプレスの管理画面メニューから、「外観」⇒『テーマの編集』をクリックしてファイルの編集画面に移動します。
先程の「kanren.php」「itiran.php」「newpost.php」から表示させたい箇所のファイルを開いて、以下のコードを探して下さい。
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?> <?php the_post_thumbnail( 'thumbnail' ); ?> <?php else: // サムネイルを持っていないときの処理 ?>
見つかったらその部分のコード内に、以下の２列目と４～７列目のコードを追記します。
<?php if ( has_post_thumbnail() ): // サムネイルを持っているときの処理 ?>
<div class="eyecatch">
<?php the_post_thumbnail( 'thumbnail' ); ?>
<p class="eyecatchlabel">
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
</P>
</div>
<?php else: // サムネイルを持っていないときの処理 ?>
コードが追加できたら「ファイルを更新」をクリックします。
これでカテゴリー自体は表示されるようになったので、ここから文字や背景色などのデザインをカスタマイズしていきます。
デザインのカスタマイズ
続いて「style.css」ファイルを開いて、以下のコードをコピー＆ペーストします。
/*-- アイキャッチ画像上にカテゴリー追加 --*/
.eyecatch {
position: relative;/*絶対位置*/
}
p.eyecatchlabel {
position: absolute;/*絶対位置*/
font-size: 10px;/*文字サイズ*/
font-weight: bold;/*文字を太字に*/
color: #4169e1;/*文字色*/
background-color: #7cfc00;/*背景色*/
padding: 0px 5px;/*縦と横の幅*/
left: 0;/*左からの位置*/
top: 0;/*上からの位置*/
opacity: 1;/*透明度*/
z-index: 5000;/*重なりの順序*/
}
わかりやすいようにコード横に説明文を記載しておきましたので、あとは文字サイズや背景色などをお好みのものに変更してお使い下さい。
上手くデザインが反映されない時は、ブラウザキャッシュの削除を行ってから再度更新をすれば、大抵の場合は正常に表示されるはずです。
デフォルトカテゴリーを非表示
STINGER8のトップページの記事一覧には、デフォルトでカテゴリーが表示されています。
アイキャッチの画像上にカテゴリーを表示させる場合は、２つも同じものは必要ないので非表示にしておきましょう。
「itiran.php」ファイルを開いて、記述されている以下のコードを「<!– –>」で囲ってコメントアウトにします。
<!-- <i class="fa fa-folder-open-o" aria-hidden="true"></i>-<?php the_category( ', ' ) ?><br/> -->
コメントアウトは、また表示を復活させたい時には非常に便利な方法なので、活用されてみて下さい。
「STINGER8」カスタマイズまとめ
STINGER8のテーマファイルを編集すれば、簡単にアイキャッチ画像上にカテゴリーを表示させることができます。
画像はどのブログやサイトでも使用されているので、そこに少しの変化を加えるだけでもライバルとの差別化を図ることができます。
できるだけユーザーにわかりやすくブログ内を回遊してもらう為にも、カテゴリーを視覚的に判別しやすくすることは大切なので、ぜひ今回のカスタマイズを活用されてみて下さい。
