お家で「好き」を仕事にしたい!ぱるのブログ

ぱるろぐ

ブログカスタマイズ

ワードプレスのサイドバーの見出しに画像を追加するカスタマイズ

投稿日:2018年8月5日 更新日:



ブログカスタマイズ大好きなぱる(@palulog)です。

当ブログではサイドバーの見出しに画像をちょこんと入れてるのですが、何回かカスタマイズ方法のリクエストをいただいていたのでやり方をご紹介します。

自分用に作成したカスタマイズなので、コードがきれいじゃないかもしれません。ご了承ください。

サイドバーの見出しに画像を追加するカスタマイズ

今回は当ブログのWordPressテーマ「STORK(ストーク)」で説明しますが、要領はどのテーマでも同じだと思います。他のテーマの方はクラス名だけ確認して使ってみてください。

見出しの前に画像を入れる

/*サイドバー見出し前に画像*/

div#ここに見出しのid .widgettitle, div#ここに見出しのid(スマホver) .widgettitle {
position: relative;
overflow: visible;
padding-left: 70px;
margin-top: 0px;
}

div#ここに見出しのid .widgettitle:before, div#ここに見出しのid(スマホver) .widgettitle:before {
display: inline-block;
position: absolute;
content: '';
background-image: url(画像のURL);
background-repeat: no-repeat;
background-size: contain;
width: 180px;
height: 150px;
left: 0;
bottom: -48px;
}

青文字の数字は画像に合わせて調整してください。

見出しのidに関しては、検証モードで見ることができます(ショートカットキーはshift+command+C)。Google Chromeでやってみてください!

パソコンはそのまま確認できますが
見出しのidを確認する

スマホは下記の画像の通りに操作してから確認してください。
見出しのid(スマホver)

ちなみにここでの私の場合は、パソコン版のidは「text-9」、スマホ版のidは「text-10」となります。

見出しの後ろに画像を入れる

/*サイドバー見出し後ろに画像*/

div#ここに見出しのid h4.widgettitle, div#ここに見出しのid(スマホver) h4.widgettitle {
position: relative;
overflow: visible;
margin-top: 70px;
}

div#ここに見出しのid h4.widgettitle:after, div#ここに見出しのid(スマホver) h4.widgettitle:after {
display: inline-block;
position: absolute;
content: '';
background-image: url(画像のURL);
background-repeat: no-repeat;
background-size: contain;
width: 180px;
height: 150px;
right: 0;
bottom: -36px;
}

idの確認方法などは先ほどと同様です。

おすすめ関連記事

-ブログカスタマイズ

Copyright© ぱるろぐ , 2024 All Rights Reserved.