コクーン｜インデックス上部に画像を使用したカテゴリーリンクを入れるカスタマイズ

コクーン愛用者の私がずっとやりかったカスタマイズがありまして。

それが、JINなどのテーマで見かけるトップ画面の記事一覧上部にあるカテゴリーリンク。

どうにかして入れられないかと考え、試行錯誤の上、カスタマイズの鉄人りんごさん（@ringox365)の協力をいただき、無事設置することに成功しました。

しかもこのカスタマイズ、CSSいじりません。

HTMLタグをウィジェットで入れるだけで出来ちゃいます。

なので、初心者の方もサイトが崩れる恐れなし！！

しかもカスタムHTMLウィジェットを使用するので、インデックスのトップだけではなく、インデックスボトム、フッターなどにも使用できますよ。

HTMLの知識ゼロでもできるように説明します！！

カスタマイズ全体の手順

全体の手順は以上です。

今回はカテゴリー４つの想定でコードが書いてありますが、偶数個であればもっと少なくても多くてもいけるはずです。

赤色のところを変更して使います！！

（スマホでツイッターから飛ぶと赤字で表示されないかもです）

 <table style=”border-style: none; width: 100%;”><tr style=”border-style: none; background-color:#ffeded;” align=”center”><td style=”border-style: none; width:50%;”><a href=”カテゴリーページのURL“><img class=”aligncenter size-medium wp-image-2124″ src=”画像URL” alt=”画像の代替テキスト” width=”画像の幅” height=”画像の高さ” /></a></td><td style=”border-style: none;”><a href=”カテゴリーページのURL“><img class=”aligncenter size-medium wp-image-2127″ src=”画像のURL” alt=”画像の代替テキスト” width=”画像の幅” height=”画像の高さ” /></a></td></tr><tr style=”border-style: none;” align=”center”><td style=”border-style: none;”><a href=”カテゴリーページのURL“><img class=”aligncenter size-medium wp-image-2126″ src=”画像のURL” alt=”画像の代替テキスト” width=”画像の幅” height=”画像の高さ” /></a></td><td style=”border-style: none;”><a href=”カテゴリーページのURL“><img class=”aligncenter size-medium wp-image-2125″ src=”画像のURL” alt=”画像の代替テキスト” width=”画像の幅” height=”画像の高さ” /></a></td></tr></table>

参考に私が入れてある実際のHTMLコード（こっちを貼り付けたらだめよ）

 
<table style=”border-style: none; width: 100%;”>
<tr style=”border-style: none; background-color:#ffeded;” align=”center”>
<td style=”border-style: none; width:50%;”><a href=”https://yurubata.com/category/kosodatejyouhou/”><img src=”https://yurubata.com/wp-content/uploads/2018/11/img_2389-300×63.png” alt=”子育て” width=”300″ height=”63″ /> </a></td>
<td style=”border-style: none;”><a href=”https://yurubata.com/category/odekake/”><img src=”https://yurubata.com/wp-content/uploads/2018/11/img_2390-300×63.png” alt=”子連れお出かけ” width=”300″ height=”63″ /> </a></td>
</tr>
<tr style=”border-style: none;” align=”center”>
<td style=”border-style: none;”><a href=”https://yurubata.com/category/seppakusouzan/”><img src=”https://yurubata.com/wp-content/uploads/2018/11/img_2387-300×63.png” alt=”切迫早産” width=”300″ height=”63″ /></a></td>
<td style=”border-style: none;”><a href=”https://yurubata.com/category/ikujimannga/”><img src=”https://yurubata.com/wp-content/uploads/2018/11/img_2388-300×63.png” alt=”イラスト・育児漫画” width=”300″ height=”63″ /></a></td>
</tr>
</table>