ブログ歴15年のLeoによる「Cocoon」”上級カスタマイズ”25項目をまとめて紹介!!

2022年4月14日更新

こんにちは。ブログ歴15年、Wordpress歴8年のLeoです。

LEOLOGを最強無料テーマ「Cocoon」に変更後いろいろいじっていて、

Cocoon自体が備える各設定については別記事で紹介した通りですが、こちらの記事ではスタイルシートやfunction.phpなどに記述を加える「上級カスタマイズ」についてまとめました！

1. ナビゲーションメニュー

トップにおいているナビゲーションメニューにアイコン入れました。

🌟Updated

↑こんな感じで一旦落ち着いていましたが、のちに「おすすめカード」をやめました。

この囲っている部分がアイコンですが、これを挿入するだけでメニューの印象が結構変わると個人的には思っています。

こちらが最新版

ナビメニュー下に何もなくなったのでメニューにメリハリをつけるべく背景を黒くしました。

やり方

サイドバーの「外観」→「メニュー」からメニュー設定のページを開きます（❶）。「メニュー項目を追加」から「カスタムリンク」（か、カテゴリーでもいいです）を開いて、メニューに入れたいリンク（❷）とリンクの文字列（❸）をぶち込みます。

❸に入れる文字列が重要です。

ここに、Font Awesomeから引っ張ってくる<i class=”fas fa-igloo”></i>みたいなやつをコピペで入れます。

例えばこのアイコンを使いたい場合、赤い四角で囲っている場所をクリックして（自動でコピーされます）コードを引っ張ります。

アイコンと文字を組み合わせる場合は以上のように、コードの後ろに文字列を並べるだけです。

さらにアイコンの色を変えたいという場合など、さらにカスタマイズ可能ですが、LEOLOGではここまで。このカスタマイズ段階ではCSSの記述は不要です。

2. 投稿ベージ、タイトル下のSNSアイコン表示

この赤く囲った部分です。

↑これがデフォルトのSNSボタンデザイン。

「Cocoon設定」から白抜き、黒塗りなど3種類のデザインで変更できます。

が、ボクはこちらの記事を参考にカスタマイズしました。

ボタンの存在感を減らし、全体のデザインとの調和を目指しました。

SNSアイコンはつけたいけど、大きすぎるのは嫌だなという方などにおすすめのカスタマイズです。

最新版では、横のバーを消して、投稿日・更新日の表示場所を上に移動しました。

3. アイキャッチ画像を横幅いっぱいに

こちらの記事で細かく書きましたが、投稿記事のトップに表示されるアイキャッチ画像を横幅いっぱいにして見ました。

上記の感じで少し印象が変わります。

4. 一覧ページでのアイキャッチも整理

🌟Updated

本文のアイキャッチサイズをいじったので、全体イメージを整えました。

→2列カード表示に変更しました（詳細は次の項）

トップページ（ホーム）は今こんな感じです。

最新版

↑今こうなっています。

デフォルトから変えたことは、

• サムネイルを丈夫いっぱいにした
• カテゴリ表記の調整
• カードに影をつけて、
• ホバーで上にふわっとする様に
• 間の幅調整
• タイトルと日付の位置調整

この辺りです。ほぼほぼStyle sheet対応ですが、最後のタイトルなどの順番を変更したのはPHPファイルをいじっています。

5. 目次をSANGO風にカスタマイズ

Cocoonにはデフォルトで目次を出力する機能が備わっていますが、その見た目はシンプルすぎるため、TOC+というプラグインを使っていました。

でも、プラグインを減らしたい思いもあって、↑こんな感じのデザインに作り変えてみました。

詳しくは以下の記事にまとめているので良かったらご参照ください。

6. Hタグのデザイン変更

本文内のカスタマイズに戻ります。

CSSをいじりでは鉄板となる「見出し」です。

このブログでは以下の様なデザインに仕上げています。

H1は記事のタイトル部分のやつですが、このブログでは真ん中に寄せて文字を大きくしただけの割とシンプルな設定にしています。

一番大きな見出しですね。（目次に反映されてしまうのでスクショにしています）

H3タグのサンプル

中見出し的なやつ。最初の文字が大きく、色付きになる設定。

H4タグのサンプル

本文の中では一番小さな見出し。

H5タグのサンプル

この辺は通常の文章内で使うイメージではないです。

H6タグのサンプル

こちらも同じく

見出しタグのカスタマイズについてはたくさんの良情報がネット上にありますので、そちらから気にいるデザインを見つけて、コピペで使われるといいと思います。

ボクの見つけたおすすめのサイトをまとめておきます。

他にもググればわんさか出てきますよ！

7. 記事内でハイライト的に使う装飾パーツ

記事をより見やすく、読みやすくするためのパーツとして、Hタグを流用し作って見ました。

詳しくは別記事にまとめていますが、

例えば注意事項を書くときに、

的な感じで記事の中に使ったり、

とか、

みたいな感じで使います。

もちろんフォントサイズを変えたり、ボールド（Strong）でも表現できることですが、長くブログを書いていると同じ様な表現をしたくなることが重なってくるので、自分がよく使う装飾をタグ化すると記事執筆効率と、ブログ全体バランスが整います。

8. タブ付きボックスのリデザイン

Cocoonは実にたくさんのボックスが実装されています。

有料テーマ並みに親切でもう素晴らしいばかりですが、ボクは少しデザインをいじったものがあります。

「ピックアップ」や「ポイント」、「ティップス」などなど、

記事を読みやすくするためのボックスがたくさん揃っていて、Simplicityを使っていた時求めていたことが解決されているます。

が、デフォルトデザインじゃちょっとつまんないな、って思ってしまって。。。CSSをブチ込んで改造してしまいました（笑）

Cocoonのデフォルトではこういう風に表示されます。

他のテーマでも見かけるスタイルで、全然悪くないんですよ？十分！

ただ、ボクは全体のデザイン性とかもあって、タブの位置をずらして、ボックスの輪郭を1pxにしました。

.blank-box {
border: 1px solid #949495;
padding: 1.3em 1em;
margin: 1em 5%;
border-radius: 5px;
border-top-left-radius: 5px!important;
}

.blank-box.bb-tab .bb-label {
background-color: #949494;
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
font-size:14px;
top: -1.8em;
line-height: 1.8;
color: #fff;
left: 14px;
top: -15px;border: solid 2px #fff;
border-top-right-radius: 12px;
border-top-left-radius: 12px;
border-bottom-right-radius:12px;
border-bottom-left-radius: 12px;
padding: 0px 1em 0px .8em;
}

↑ボクがstyle.cssにぶち込んだCSSです。これで元のデザインからどの色でもどの見出しでもデザインが変わるはずです。

どれでも！

9. Cocoonにないボックスを設計

Cocoonにもたくさんボックスはあるんですが、やっぱり有料テーマにはかなわない…

AFFINGERとかSANGOみたいな有料テーマで使える様なボックスが欲しくて、とりあえず自分がよく欲しくなるボックスをデザインしてstyle.cssにブチこんで使える様にしました。

作った箱いろいろ

↑記事の冒頭に書くことで訪問者に親切になるこれ、

↑派生バージョン。どっちを使うかは記事の種類、方向性、ターゲットで記事ごとに使い分けています。

↑こちらはレビュー記事に使えるボックスです。結構利便性いいですよ！

↑このデザインは我ながら好きです（笑）。記事にニュルッと入ってきている雰囲気という。ボックスを超越した感じで！

実は双方、Cocoonにもともと実装されているのですが、

Cocoonのだとこんな感じでカード化されてしまうんですよね。

ビジュアル的に嫌いとかじゃないんですが、上下に幅ができるので場所とって仕方ないっていう。

ボクは関連記事の重要性、伝えたいレベルに合わせてさっきのやつとさらに、

↑記事で最後に、「まとめ」って項目を作ることがほとんどですが、そこで使う想定のやつです。

Cocoonには「合わせて読みたい」的なリンク用のボックスは装備されていますが、この辺は装備されていないので自分の好みのボックスを作って、「AddQuicktag」プラグインですぐに使える様にして記事を書いています。

ボクはデザインにあたり以下のページを参考にさせていただきました。

いやはや、どんな情報でもネット上にあるので便利です（笑）。

10. ボタン色々

Cocoon純正のボタンとは別にいくつかボタンを作りました。

11. このブログを書いてる人ボックス

記事の下に出せる「このブログを書いてる人」のボックスデザイン。

SimplicityからCocoonにしてよかった点の一つに、デフォルトでこの機能が実装されていることがあります。

以前はSimple Author Boxというプラグインを使わなければならなかったからです。

Cocoonではデフォルトで、

↑こんな感じの著者ボックスが出せます（公式ページのわいひらさん）。

これが気に食わんわけじゃないんですが！

↑こんな感じにリデザインしました。

↑さらにこんな感じにデザイン更新しました（2020年7月）。

記事幅いっぱいまで広げるデザインに変え、背景をダークなものにしました。

↑もういっちょバージョンアップしました（2020年7月後半）。

背景をマテリアル感あるグラデにし、その上に書いてる人ボックスを重ねる風にしました。これもほぼSANGOのパクりです。

カスタマイズ時に参考にしたページは下に紹介しておきます。

著者ボックスの設置法

設置は簡単、ウィジットでサクッとできます。

「[C] プロフィール」というウィジットをボックスを表示させたいところに入れるだけ。

わいひらさんは設定されていませんが、「この記事を書いた人」などの文言を入れたり、アイコンを丸くするなどのカスタムはCocoonの基本機能内でできることです。

ボクは特に、ボックスの見出しいじりに精を出しました。

参考にしたページ

12. 記事下のカテゴリーとタグ一覧の色を調整

ちょっとしたカスタマイズではありますが、デザインをいろいろいじる方には結構大事になると思うので紹介しています 。

13. ブログカードのカスタマイズ

使わない人にはあまり関係ない部分ですが、全体をいじってデザイン性を重視している方はブログカードのデザインも調整しておくべきだと思うので紹介記事を書いています！

デフォルトでダメというわけではありませんが、コピペで基礎は移植可能なので興味ある方は是非！

14. コメント欄の整形

コメント欄も一時期プラグイン入れてやってたんですがプラグインを減らしたい目的も含めてWordpressのコメント機能を整形するだけに変更しました。

記事エリア最下部、デフォルトではコメント蘭は閉じている様に設定しました。

「コメントを書き込む」をクリック（タップ）すると↑こんな感じでコメントエリアが展開します。

ここまでのカスタマイズは、

こちらの記事を参考にさせていただきました。

色や吹き出しの角の具合などCSSで微調整して自分好みに調整しました。

それプラス、

スクショだとコントラストが低くてわかりにくいかも知れませんが、「名前入力欄」と「メール入力欄」を並列させるカスタマイズを加えて完了。

15. ページネーション

一覧ページの最下部に表示されるこういうやつ↓

こちらの記事を参考に、「次のページ」というおっきいボタンを消して、色をいじって、数字フォントをいじり、今の状態に変えています。

ちょっとしたことですが、ページ全体のイメージを整えるのは大事なこと。

全体のデザイン的に丸にする人も多いみたいです。

参考にさせていただいたページ

16. サイドバーの見出し

ここからはサイドバー関連。

サイドバーの見出しはデフォルトではH3タグになりますが、それだと見た目的にちょっと違うなーって思ったので、専用のCSSを書いてカスタマイズしました。

🌟Updated

SANGO調へのカスタマイズの一環で見出しデザインをさらに変更しました。

こんな感じで背景付き＆見出し前にアイコンを入れたデザインにしました。

17. サイドバー用プロフィールウィジット

先ほど紹介した「この記事を書いた人」とは別にサイドバーに表示させるプロフィール欄を作りました。

一旦こんな感じで落ち着きましたが、

こんな感じに更新しました。11で書いた通り、フラット方向で調整した結果ですね。

🌟Updated

さらにSANGO化のためプロフ写真の背景を設置するなど小変更を加えました。

18. サイドバーの人気記事一覧

デフォルトでは一番左の様にランキング番号が四角い箱に入っていますが、

まず丸くして、左上方向にずらし、

1〜3位の背景色をフラットな色に寄せませした。

全てCSS記述で対応できています。

後は細かい点ではタイトルのサイズと色もいじっています。

19. サイドバーのカテゴリ一覧

こんな感じでここはSANGOとはちょっと違います。が、SANGO作者のSARUWAKAさんのページのやつに似てるとあとで気づきました。

主にこちらのページを参考にしいじりました。

20. サイドバーのアーカイブ

二つ分まとまったスクショですが、まずは、月別で過去記事を表示させられるためのアーカイブがプルダウンメニューで出せる機能をサイドバーにつけられるのですが、デフォルトだとデザインが浮いてしまうのでCSSで整形しました。

ここもSANGO感。

21. サイドバーのアクセス記録

上のスクショの下部にあるAccess Logです。

PVや訪問者数をサクッと把握できる「Count per day」のプラグインですが、デフォルトだとシンプルな「・」が見出しでダサいのでFontawesomeを利用して装飾しました。

↑標準だとこんな感じです。ダメでもないんですが、全体のバランスを考えて整えた感じです。

.widget_countperday_widget ul {
list-style: none;
color:#555;
}
.widget_countperday_widget li:before {
font-family: "Font Awesome 5 free";
content: '\f005'; /* アイコンのunicode */
font-weight:900;
color:#50d2d8;
margin-left:-30px;
padding-left:0px;
padding-right:10px;
}

割と適当にやったので表示ズレなど起こしたらすみません。

22. サイドバーのコメント一覧

サイドバーに表示させる「最新のコメント」欄も少し整えています。

これは正直、スーパーやっつけな整形です。サムネイル以外の要素を全部CSSで動かしているので表示ズレが怖い怖い（汗）

現状コメントの多いブログじゃないので一旦よしとします。

23. 一覧ページのタブをリデザイン

Cocoon標準機能のカスタムです。

こんな感じで一覧ページトップに表示されるタブをリデザインしました。

コンセプトはフラットとシンプル。

↑これがCocoonデフォルトの場合です。

ボクの場合ナビメニューにカテゴリーを入れているのでかぶるんですけど、特に読んでもらいたいカテゴリーをここに入れることでクロール向上を目指しています。

🌟Updated

↑SANGOに寄せる最新カスタマイズでこんな感じになりました。

グラデになってるやつが現在のタブになる様にしました。

24. 人気記事一覧ページを設置

ちょっとこだわって作ってみたのがこれです。

多くのブログでサイドバーに「人気記事」、「よく読まれています」みたいな一覧があると思いますが、もっと細かくそれらを見られる一覧ページを作りました。

その理由や、ボクが設置をオススメする理由を以下のページでまとめて紹介していますので興味があればぜひ！

25. Rinkerプラグインのデザイン調整

アフィリエイトの商品リンクを貼るプラグイン、「Rinker」はとっても便利ですが、デフォルトのデザインを他のボックスなどと揃えています。

Rinkerは有名プラグインなのでカスタマイズ情報は山ほど出て来ます。

ちなみに上のスクショは、上がRinkerで、下がCocoonデフォルトのリンク表示です。

プラグインを減らしたい人はCocoonデフォルトでもいいんじゃないかな？と思うくらい近しい見た目ですが、ボクはRinkerの「価格まで表記させられる点」が気に入っているのでRinkerを使っています。

世界一わかりやすい HTML5&CSS3コーディングとサイト制作の教科書

created by Rinker

• Amazon
• 楽天市場