スティンガー8

アイキャッチ画像上にカテゴリー表示!STINGER8でカスタマイズする

 

どうも、「きにぶろぐ.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で編集したデザインが全てに適用され、残りの3つのファイルは同じ編集を行うだけなので、カテゴリーを表示させたいファイルを編集されて下さい。

 

また、「親テーマ」ではなく「子テーマ」のファイルを使って、カスタマイズをするようにしましょう。

 

テーマファイルの編集

ワードプレスの管理画面メニューから、「外観」⇒『テーマの編集』をクリックしてファイルの編集画面に移動します。

 

先程の「kanren.php」「itiran.php」「newpost.php」から表示させたい箇所のファイルを開いて、以下のコードを探して下さい。

 

 

見つかったらその部分のコード内に、以下の2列目と4~7列目のコードを追記します。

 

 

コードが追加できたら「ファイルを更新」をクリックします。

これでカテゴリー自体は表示されるようになったので、ここから文字や背景色などのデザインをカスタマイズしていきます。

 

デザインのカスタマイズ

続いて「style.css」ファイルを開いて、以下のコードをコピー&ペーストします。

 

 

わかりやすいようにコード横に説明文を記載しておきましたので、あとは文字サイズや背景色などをお好みのものに変更してお使い下さい。

上手くデザインが反映されない時は、ブラウザキャッシュの削除を行ってから再度更新をすれば、大抵の場合は正常に表示されるはずです。

 

デフォルトカテゴリーを非表示

 

STINGER8のトップページの記事一覧には、デフォルトでカテゴリーが表示されています。

アイキャッチの画像上にカテゴリーを表示させる場合は、2つも同じものは必要ないので非表示にしておきましょう。

 

「itiran.php」ファイルを開いて、記述されている以下のコードを「<!– –>」で囲ってコメントアウトにします。

 

 

コメントアウトは、また表示を復活させたい時には非常に便利な方法なので、活用されてみて下さい。

 

「STINGER8」カスタマイズまとめ

STINGER8のテーマファイルを編集すれば、簡単にアイキャッチ画像上にカテゴリーを表示させることができます。

画像はどのブログやサイトでも使用されているので、そこに少しの変化を加えるだけでもライバルとの差別化を図ることができます。

 

できるだけユーザーにわかりやすくブログ内を回遊してもらう為にも、カテゴリーを視覚的に判別しやすくすることは大切なので、ぜひ今回のカスタマイズを活用されてみて下さい。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール