ブログカスタマイズ大好きなぱる(@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は「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の確認方法などは先ほどと同様です。