ウェブ カスタマイズ

【STINGER PLUS+】トップページのアイキャッチ画像上にカテゴリを表示させる方法

2017/01/09

kia8yahu

 
タイトルにもあるように、今回はトップページのアイキャッチ画像上にカテゴリを表示させるカスタマイズ方法を書いていきます。

完成図

oijaoi8ho

 
アイキャッチの左上にカテゴリ!
ずっとこれがやりたかったんですが、ようやく完成しました!!

 
今回は僕が使用している「STINGER PLUS+」での方法になります。
また、あらかじめ一覧がカードタイプの表示方法に変更してありますますので注意。

テーマをいじりますので、必ずバックアップをしてからのカスタマイズをお願いします。

また子テーマでカスタマイズしましょう!

スポンサーリンク

 

カスタマイズ方法

文字の設置

アイキャッチのどの部分になにを挿入するのか、といった作業を行ないます。

そのためには「itiran-thumbnail-on.php」の中の

nhiuhiqu2

このすぐ下の部分に以下のソースを貼り付けます。

 

スポンサーリンク

 

CSSを調整して文字等をカスタマイズ

CSSに以下のソースを記述します。

これは僕のブログのカスタマイズそのままなので、
背景は「background」
文字色は「color」
文字の大きさは「font-size」

を編集してください。
もし表示されなかったりずれていたら「top」の値を変更する必要があるかもしれません。
デフォは0なんですが、このブログではうまく表示されなかったので1にしたところ表示されました。

それでもずれていたら「left, right, bottom」等を追加して値を設定する必要があるかもしれません。

例 right: 10;

 

トップページ上の元々あった「カテゴリ」を消す

molioiwqu

アイキャッチの他にカテゴリが書かれていると不格好なので消しちゃいます!
これも最初と同じ「itiran-thumbnail-on.php」を編集します。

この中にある、

という記述をまるごと消すことによって、トップページのカテゴリ欄が消えます。

タグも消しちゃいたい、という場合はそのすぐ下にある

を消してしまいます。
しかしタグくらいはあったほうがよさそうなので、僕はそのままにしました。

 

さいごに

今回参考にさせていただいたブログは「Inoma Create」様です。

http://inomacreate.com/wordpress-eyecatch2/

大変助かりましたありがとうございます!!

 

スポンサーリンク


-ウェブ, カスタマイズ