Cocoonブログカスタマイズ。ぽんひろさんのサイトのコピペだけですけど、記録として。
視覚的に優れたボックスナビ
ボックスナビとは、この記事の右側にも表示されているだろう↓のことです。
視覚的にわかりやすいだけでなく、スッキリしたデザインで情報量を詰め込めるのが良い点です。
こちらは前の記事で紹介したUseful Blocksを制作した方でもあるぽんひろさんのCSSをまるまるコピーして設置しました。
コピーしたものをほぼそのまんま使った感じなので、本家ブログがもっとも参考になると思います。
導入の流れ
大まかな導入の流れは、以下の通りです。
- ぽんひろさんのサイトからCSSコードをコピー
- 追加CSSに貼り付け
- カスタムHTMLを表示したい場所に貼り付け
- CSSorカスタムHTMLを編集
①CSSコードをコピー
ぽんひろさんのサイトからCSSコードをコピーします。
106行もある長ーいコードです。
②追加CSSに貼り付け
WordPressダッシュボードから、「外観→カスタマイズ→追加CSS」に貼り付けます。
③カスタムHTMLをコピペ
再度ぽんひろさんのサイトに訪れ、今度はHTMLのコードをコピーし、
再びダッシュボードから「外観→ウィジェット」に進みます。
左側のメニューから、「カスタムHTML」を掴み、表示させたい箇所に置きます。今回は右側に表示させたいので「サイドバースクロール追従」に設置することにしました。
そしたら、カスタムHTMLのタブを開いて、ぽんひろさんのサイトでコピーしたHTMLコードを貼り付けます。
一応これで導入は完了となりますが、ここから各々好きなようにカスタマイズしていくことになります。
いろいろカスタマイズ
追加CSSからはボックスのサイズや文字の調整、カスタムHTMLではリンク先や画像の調整ができます。
追加CSS編集
再び「外観→カスタマイズ→追加CSS」からコードを見てみましょう。
ここでは、ボックスのデザインを調整できます。わかりやすくコメントアウトの説明があるので特に難しいところはありません。
今回は色だけ変更しました。
color: #01173E;/* アイコン色 */他に注目するべきところを挙げるとしたら、列幅ですね。デフォルトでは4列となっていますが、これは8個並べるのに適した列数で、6個とかなら、3列とかにしたほうがスッキリします。サイドバーの場合、スマホの場合、と細かく調整できるで、それぞれに好みの幅に調整すると良いでしょう。
カスタムHTML編集
本番はここから。「外観」→「ウィジェット」からカスタムHTMLを開きましょう。
ここでは、「表示文字名」「リンク先」「画像」を設定します。
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li>タイトル、URLはなんとなく分かると思います。
「画像もしくはFont Awesome」ではアイコンを設定します。ここではFont Awesomeの例で説明します。
Font Awesomeは、文字のような軽さで動作するアイコンで、Cocoonテーマは標準でVer4.7まで対応しています。
まずは公式サイトでアイコンを探します。
使いたいアイコンが見つかったら、<i></i>タグを含めて全てコピーして、指定箇所に貼ります。
<li><a href="リンク先URL">画像、もしくはFontAwesome<span class="p-nav-title">タイトル</span></a></li><li><a href="https://kanso-etc.com"><i class="fa fa-home" aria-hidden="true"></i><span class="p-nav-title">HOME</span></a></li><li></li>で1セットです。必要なら<li></li>で囲った1セットを追加していって、不要なら消していけばおｋです。
CocoonでのFontAwesome5について
「Cocoon設定」→「全体」→「サイトアイコンフォント」から5を選んで保存します。
ただ、今回の例では、これだけではうまく表示されませんでした。調べたところ、追加CSSの調整しないといけないっぽいです。
導入後の感想
カテゴリを表示するにも単に文字で表示するより、アイコンのほうが視覚的に分かりやすくていいですね。こういうのは自分には無理だと思っていたので、ほぼコピペだけで実現できて感動しました。
今回他にも、グローバルメニューを上にあげたり、ヘッダーロゴを縮小したり、サイドバー1番上に検索ボックスを置いたりと細かい変更を加えました。いずれも他サイトの真似ですが、センスがない人は誰かの真似をするのが一番ですね…。ぽんひろさんには本当に感謝です。
