はてなブログ人気テーマ「zeno-teal」のタイトル下にミニ記事の一覧を置く方法を解説するぞ!

f:id:conartist:20170622183114j:plain

やっほー!よっく(@yokku49)です

今日はブログのカスタマイズだ!!!

僕のブログも最初の頃に比べると見違えるほどかっこよくなったんじゃないかな?(自画自賛

これも全て「zeno-teal」作者の「orefolder (id:c-miya)」さんのお陰だ!

ホントありがとう!

今回も感謝の気持ちを込めて作者さんのブログ記事

タイトル下のオススメ記事その2(画像サイズバラバラ対応版) - ZENO-TEAL

を引用させて頂きながらタイトル下にミニ記事の一覧を置くぞ!(下のコードも引用です)

 

 

カスタマイズしていくぞっっ!!!!

 

 

①まずはダッシュボードの「デザイン」をクリック!

 

f:id:conartist:20170623090035p:plain

 

 

②「工具マーク」をクリック!

 

f:id:conartist:20170623090106p:plain

 

 

③「ヘッダ」をクリック!

 

f:id:conartist:20170623090128p:plain

 

 

④「タイトル下」の「HTMLを設定できます」の下の白い部分をクリック!

 

f:id:conartist:20170623090155p:plain

 

 

⑤④のスペースに下のコードの「記事URL」を「自分の表示したい記事のURL」に、「画像URL」を「自分の表示したい画像のURL」に、「記事タイトル」を「自分のつけたい記事タイトル」に変更してから貼り付けよう!

 

<div class="recommends">
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
    <a href="記事URL" class="recommend-entry"><img src="画像URL" class="recommend-img" /><span class="recommend-title">記事タイトル</span></a>
</div>

 

 

⑥最後に「変更を保存する」をクリックするのを忘れない様に!

 

f:id:conartist:20170623090221p:plain

 

 

 ⑦完成!!!

 

f:id:conartist:20170623093909j:plain

 

 

まとめ

 

ブログが確実にかっこ良くなっている!!!

 

なんか嬉しい!!!

 

みんなもこの調子でブログのカスタイズ頑張っていこうなぁぁぁぁ!!!!

 

みんなのブログライフに少しでもお役に立てたら嬉しいです♪

 

じゃ、また明日!