>>カテゴリー別おすすめ記事一覧

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

コクーンカスタマイズ画像を使ったカテゴリー表示
スポンサーリンク

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

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

 

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

 

コクーントップ画面

 

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

 

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

 

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

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

 

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

カスタマイズ全体の手順

 

  • 入れたいイラストを表示するカテゴリー数分用意する(自分で描いてもいいし、無料素材から拾ってきてもOK) ※透過素材をおすすめします
  • ワードプレス管理画面から、外観→ウィジェットクリック
  • カスタムHTMLウィジェットをクリック→インデックスリストトップをクリック→ウィジェットを追加をクリック
  • インデックスリストトップをクリック→カスタムHTMLをクリック→この後紹介するHTMLコードをコピーして貼り付け
  • HTMLコードの中の、背景の色・カテゴリーリンク先のURL・画像のURLの部分だけ変更
  • 保存して完了

全体の手順は以上です。

 

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

 

HTMLウィジェットにいれるコード

 

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

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

  1. &nbsp;<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コード(こっちを貼り付けたらだめよ)

  1. &nbsp;
  2. <table style=”border-style: none; width: 100%;”>
  3. <tr style=”border-style: none; background-color:#ffeded;” align=”center”>
  4. <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>
  5. <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>
  6. </tr>
  7. <tr style=”border-style: none;” align=”center”>
  8. <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>
  9. <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>
  10. </tr>
  11. </table>

 

貼り付けたコードの中で変更する部分

背景の色を変える

 

このHTMLは、表に画像を入れて作ってあるのですが、コクーンは、タグで表を作成すると、勝手に一行目が見出しで色が変わるようになっています。

こんな感じに。

見出しセル
データセル

 

ですから、一番最初の赤いところ「#ffeded」はブログトップの背景の色のコードを入れます。

こうすることで、トップの背景の色となじんでくれます。

 

背景の色は、管理画面からCocoon設定→全体→サイト背景色 で調べることが出来ます。変更していない方は「#ffffff」の白色になっていると思います。

 

カテゴリーURLと画像のURLを変更する

 

次にカテゴリーリンクと画像のコードを変更します。

 

変えるのは以下の5点

  • 画像リンクから飛ばす先のカテゴリーページのURL
  • 使用する画像のURL
  • 使用する画像の代替テキスト
  • 使用する画像の幅
  • 使用する画像の高さ

※今回は4つカテゴリーリンクを入れるので4か所変更するようになってます。

 

画像のURLと、代替テキスト・幅・高さは 管理画面→メディア→ライブラリ→貼り付ける画像をクリック→URL で調べることが出来ます。

 

ひとつひとつを調べてうちなおしてもいいですし

 

  • 記事作成画面を開く
  • ビジュアルエディターにリンクに使用する画像を貼り付ける
  • 貼り付けた画像をクリック
  • リンクアイコンをクリックしてカテゴリーのリンクURLを挿入する
  • テキストエディターに変更
  • 表示されているHTMLコードを赤色のコードと置き換える

というやり方でもできます。

 

表示させたい順番で挿入して下さいね。

この順番で表示されます。

 

表示順番

 

カテゴリー表示を入れて訪問して下さる方を誘導しよう

 

今回は、イラスト入りのカテゴリー表示をトップ画面に入れるカスタマイズを紹介しました。

ただし、使用する画像や色々な環境によっては正しく作動しない場合もありますのでご了承ください。

また、インデックストップに入れると、カテゴリー一覧のページでも表示されます。

それが嫌な方はご遠慮ください。

追記

ウィジェットにどこで表示させるか設定することが出来ました!!

コードを入力したカスタムHTMLウィジェット下部の表示設定から、トップページのみ表示を選択すれば、他のページでは表示されません!!

 

使用する画像のサイズははお好みでもっと縦幅が長い物などに変更することもできます。

(ちなみに私は810×170のキャンバスにちょうどおさまるくらいの大きさで作りました 大きすぎだと思う笑)

イラストを自分で描くのが難しければ無料素材を使用してもいいですし、イラストがいらなければテキストのみのボタンでもいいと思います。

 

カテゴリーをわかりやすく表示して、訪問して下さる方が迷子にならないように誘導しましょう!!

 

自分でデジタルイラストを描いてみたいという初心者の方はこちらもチェック

【初心者】簡単なデジタルイラストの描き方!スマホと指で描く方法
ツイッターのアイコンやブログの挿絵をデジタルイラストで描きたい方必見!画像入りの手順で初心者でもスマホと指で今すぐ描ける描き方を紹介します。

※画像はPNGの透過で保存することをおすすめします!!

 

今回カスタマイズするにあたり、りんごさん(@ringox365)のお力をおかりしました。

りんごさんはSANGOをとってもかわいくカスタマイズしていらっしゃるカスタマイザー!!

大変お世話になりました!!

 

一度かわいいカスタマイズをのぞきに行ってみてくださいな

りんごさんのブログはこちら

→暮らし365+

 

タイトルとURLをコピーしました