Cocoonのカスタマイズ【すっきりデザイン編集の備忘録】

Cocoonのカスタマイズ（Wordpressテーマ）は開発者のわいひらさんも含めいろんな方がやり方を公開してくださっているので、大概のことは調べればできるのですが、細かいところの修正をしたいときにいろいろ検索したり試行錯誤に苦労したので、記録に残しておくことにしました。
シンプルでスッキリした見た目が好みなので、同じようなカスタマイズをしたい方のお役に立てばと思います。

CSSはよくわからないし、デザインに時間をかけたくない方は、有料テーマを使う方法もあります。

無料テーマのカスタマイズに疲れる前に
▶WordPressテーマ 「ACTION（AFFINGER6）」
やりたいことが実現できます。

Cocoonのカスタマイズ【デザイン編集の備忘録】

ちょっとしたことなのですが、デザイン上こうしたいなと思ったときに、調べるのに苦労した内容を記載しておきます。

なお、カスタマイズにはCSSの追記が必要です。

CSSの追加先は
外観＞カスタマイズ＞追加CSSにコピペすれば大丈夫です。

追加CSSをクリックすると、CSSのコードを貼り付ける画面が出てきます。

トップページのレイアウト変更の方法

トップページのレイアウトはCocoonの「固定ページ」で作ることができます。
トップページのカスタマイズの方法はCocoonトップページのカスタマイズの記事にまとめています。

グローバルメニュー（ヘッダーメニュー）の設定方法

ヘッダーのところにある、ヘッダーメニューの設定方法です。

管理画面の外観＞メニューから「新しいメニューを作成しましょう」を開きます。

メニュー名に「ヘッダーメニュー」と入力して、
左の投稿から、表示したい記事を選びます。
ここで選ぶ記事は読者に読んでもらいたい「まとめ記事」にします。

カテゴリーを選んで記事の一覧に飛ばすよりも親切なので、まとめ記事を読んでもらうようにしましょう。

まとめ記事なら、読者はそこから自分の必要な情報に進んでいくことができます。

まとめ記事の書き方は別の記事で解説します。

「投稿」から記事を選んで、メニューに投稿ボタンをクリックすると右側に入ります。
いくつか選んで、順番を整えます。
順番はドラッグアンドドロップで変更できます。

・ヘッダーメニュー
・ヘッダーモバイルメニュー
・ヘッダモバイルボタン
・モバイルスライドインメニュー

にチェックを入れて
右下のメニューを保存ボタンをクリックするとブログのヘッダーに表示されるようになります。

ヘッダーメニューの背景色や文字色の設定は、

Cocoon設定のヘッダーの下の方の、
グローバルナビメニュー色で設定できます。

色を変更したら、変更をまとめて保存ボタンをクリックして、
思ったように変更されたか確認します。

おすすめ記事一覧を表示する方法

おすすめ記事は読者の方に読んでほしい記事を自分でピックアップして一覧表示する方法です。

これも「メニュー」で作ります。
管理画面の外観＞メニューから「新しいメニューを作成しましょう」を開きます。

メニュー名を入力して、左の投稿から、表示したい記事を選びます。

記事を選んだら、「メニューに追加」ボタンをクリック。一覧が表示されます。

右側の「メニューを保存」ボタンをクリックすると、登録ができます。

作成したメニューを呼び出すには下記のようなショートコードを固定ページや投稿に貼り付けて使います。

[navi_list name="おすすめ記事" type="large_thumb" bold="0" arrow="0"]

おすすめ記事一覧を表示してサムネイル にリボンをつける

上の画像のようにサムネイルの写真に「必見」などのリボンをつけて、少し目立たせるカスタマイズ方法です。

サムネイルのリボンはCSSの追記ではなく、おすすめ記事一覧を作る画面で設定します。

外観＞メニューから右上の「表示オプション」をクリックして、

CSSクラスにチェックを入れます。（説明文も入れた場合は、説明もチェック。

次に記事の右側の▼を押すと、詳細が開きます。
ここでCSS クラスの欄に数字を入れます。

CSSクラスの数字でリボンの表示を指定します。

1=おすすめ
2=新着
3=注目
4=必見
5=お得

になります。
これで、下記のようにリボンがつきました！

トップページなどにおすすめ記事を表示するためのショートコードは下記です。

[navi_list name="おすすめ記事" type="large_thumb" bold="0" arrow="0"]

おすすめ記事一覧をサイドバーに表示する

上の画像のようにおすすめ記事一覧をサイドバーに表示するカスタマイズをする場合は、ショートコードを使います。

説明文が入るとごちゃごちゃして見づらいので、
外観＞メニューから「おすすめ記事サイド」という別のメニューを作成しました。

外観＞ウィジェットでカスタムHTMLを選んで、サイドバーを選び、ウィジェットを追加ボタンをクリックして、

右側のサイドバー（僕はスクロール追従を選んでいます）から先ほど追加したカスタムHTMLをクリック

開いた画面に、下のショートコードを貼り付ければ完了です。

[navi_list name="おすすめ記事サイド" type="default" bold="0" arrow="0"]

サムネイル が大きいと不格好だったので、

type=”default”

にしました。
説明文を表示しないようにするには、「表示オプション」で説明を非表示に変更します。

人気記事一覧をサイドバーに表示

よく読まれている人気記事一覧をサイドバーに表示するのは簡単で、
外観＞ウィジェットの[C]人気記事から、
タイトル、表示記事数や写真のサイズ、ランキング表示を選べば完了です！

アイキャッチ画像をセンター寄せ（中央）にする方法

アイキャッチ画像というのは、記事のタイトル下に表示する画像のことで、
ギヤアイコン > アイキャッチ画像で設定する画像です。

通常Cocoonでアイキャッチ画像は左寄せになっているのですが、アイキャッチ画像を中央に寄せるには
Cocoon > 画像 で
アイキャッチの中央寄せにチェックを入れればOKです。

アイキャッチ画像をカラム幅いっぱいまで広げて表示する方法

アイキャッチ画像を広げて、カラムの幅に合わせるには、
Cocoon > 画像 で
アイキャッチをカラム幅に引き伸ばす
にチェックを入れればOKです。

ウィジェットの中身をセンター寄せしたい

ウィジェットの中身（画像や文字など）をセンター寄せするには、
CSSに以下の新しいclassを入力してから、

/* 広告などの文字や画像を中央寄せにする */
.ad-center{
text-align:center;
}

ウィジェットのテキスト中に以下のように入力すればOKです。

<div class=”ad-center”>
※ここにセンター寄せしたいものを挿入※
</div>

H1、H2 タグの左に縦線を入れてちょっと色をつける方法

Cocoonの標準のH1 , H2タグのままだとちょっと寂しいので、左に色付きの縦線を入れました。

下記のCSSを追加すると見た目が変わります。

.article h1{
padding: 10px;
padding-left: 15px;
border-left: 6px solid #FFA000;
}
.article h2{
border-left: 6px solid #00BCD4;
}

padding: 10px;
padding-left: 15px;

は、文字の周りに少しスペースを持たせるために付けています。

border-left: 6px solid #00BCD4;

は左側に6px分だけ色をつけるという意味です。
H1タグは#FFA000のところが左端のオレンジの色を指定しています。
H2タグは#00BCD4のところが左端の水色の色を指定しています。

色コードは色見本から好きな色のコードを取得できます。

CSSを貼り付けたことで、下記のように表示されるようになりました！

H1タグ（記事タイトル）はオレンジ

H2タグは青

内部リンクに飛んだ時にタイトルの表示が隠れてしまうのを回避する

目次から内部リンクに飛んだ時に、下のようにH2タグの上の部分が見切れてしまうので、回避しました。

変更前↑
H2タグの上の方が切れてしまっています。。。なんだかつっかえている感じですね。

Cocoonの内部リンクは目次などから、ページ内の内部リンクに飛んだときに、文字の上の方が隠れてしまうところが嫌だったので、それを回避する方法です。

span[id^="toc"] {
padding-top: 2.2em;
}

これで飛んだ先の文字の上に少しスペースができて、見栄えがよくなりました。

変更後↓
文字の上の方もスペースが取れました。

新着記事に投稿日と更新日を表示する

Cocoonは、新着記事には通常、投稿日や更新日が表示されませんが、
上の画像のようにいつ投稿、更新したのかが見えるようにするため、表示するようにしました。

CSSに下記を追記しました。

/*新着記事に日付を表示*/
.new-entry-card-date {
display: block;
text-align: right
}

これで、投稿日と更新日の両方が表示されるようになりました。

投稿日だけを表示したい場合は

.new-entry-card-date

の部分を

.new-entry-card-post-date

に書き換えればOKです。

更新日だけを表示したい場合は

.new-entry-card-update-date

にすれば更新日のみを表示することができます。

新着記事の投稿日と更新日の前にアイコンをつける

日付だけだと寂しいので、日付の前にアイコンを付けました。

CSSは下記を追記しました。

.new-entry-card-post-date::before{ /*投稿日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f017"; /*fa-clockアイコン*/
padding-right: 4px; /*右余白*/
font-weight: 400; /*アイコンの太さ*/
}
.new-entry-card-update-date::before{ /*更新日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f1da"; /*fa-historyアイコン*/
padding-right: 4px; /*右余白*/
font-weight: 900; /*アイコンの太さ*/
}

これで、投稿日、更新日の両方の前にそれぞれアイコンが表示できました。

人気記事に投稿日と更新日を表示する

新着記事に投稿日と更新日を表示したのと同じように人気記事にも投稿日と更新日を表示することができます。

下記のCSSを追加します。

/*人気記事に日付を表示*/
.popular-entry-card-date {
display: block;
text-align: right
}

人気記事の投稿日のみを表示したい場合は、

.popular-entry-card-post-date

人気記事の更新日のみを表示したい場合は、

.popular-entry-card-update-date

に書き換えてください。

人気記事の投稿日と更新日にアイコンを追加する

こちらも先ほどの新規記事のアイコンと同様に、下記のCSSを追記します。

.popular-entry-card-post-date::before{ /*人気記事の投稿日のアイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f017"; /*fa-clockアイコン*/
padding-right: 4px; /*右余白*/
font-weight: 400; /*アイコンの太さ*/
}

.popular-entry-card-update-date::before{ /*人気記事の更新日アイコンの変更*/
font-family: "Font Awesome 5 Free";
content: "\f1da"; /*fa-historyアイコン*/
padding-right: 4px; /*右余白*/
font-weight: 900; /*アイコンの太さ*/
}

サイドバーのカテゴリにアイコンをつける

Cocoonの標準のサイドバーのカテゴリが文字だけでちょっと寂しかったので、アイコンを付けました。

親カテゴリーと子カテゴリーのアイコンは別のものを使用しました。
こちらも下記のCSS追記で完了です。

/*親カテゴリのカスタマイズ*/
.widget_categories ul li a{
border-bottom: 1px dashed #CCCCCC; /* 下線の種類 */
}
.widget_categories ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f138"; /* FontAwesomeのユニコード */ 
color: #00BCD4; / *アイコンの色 */
padding-right: 6px; 
font-weight: 900; /*アイコンの太さ*/
}
.widget_categories > ul > li > a:first-child{
border-top: none;
}
/*子カテゴリのカスタマイズ*/
.widget_categories ul li ul li a::before{
font-family: "Font Awesome 5 Free";
content: "\f0da"; /* FontAwesomeのユニコード */ 
color: #00BCD4; / *アイコンの色 */ 
padding-right: 6px; 
font-weight: 900; /*アイコンの太さ*/
}

アイコンはFont Awesome 5 Freeのアイコンを使用しています。
気に入ったアイコンのUnicodeを書き換えることで、いろんなアイコンに変更できます。

Font Awesome 5を使用するためのCocoonの設定

Font Awesome 5を使用するためにはCocoonの設定が必要です。

Cocoon設定＞全体を選んで
サイトアイコンフォントのところでFont Awesome 5をえらびます。

サムネイルのサイズを揃える

Cocoonはサムネイルのサイズ（縦横比）がバラバラだと並べたときに揃わずガタガタになってしまいます。
サムネイル のサイズはプラグインで解決できますので、ガタガタが気になる場合は一度やっておくと良いです。

WordPressのプラグイン＞新規追加から
Regenerate Thumbnails

をインストールして、実行するとサイズがきれいに整います。
必ずバックアップをとってから実行するようにしてくださいね！

Cocoonのブログ上でショートコード を紹介したい場合

ショートコード の表示は整形済みテキストに下記のように
大かっこを二重にして書くと、上のように表示できます。

Cocoonのスッキリデザインカスタマイズは以上です。

Cocoonのトップページのカスタマイズ方法は
▶Cocoonのトップページのカスタマイズ方法
の記事で解説しています。

Cocoonのカスタマイズ【すっきりデザイン編集の備忘録】まとめ

Cocoonのカスタマイズは、色々できます。
ただし、機能が多い分、なかなか思ったようにできなかったので備忘録としてまとめました。

この記事では

について紹介しました。

有料テーマにすることで、面倒なデザインにかかる時間は大幅に削減でき、デザイン性も上げやすくなります。

ブログで月１万円の収入を作る方法は
▶超特化ブログの始め方【月1万円の収入を作るための5つのステップ2022版】
で解説していますので、ぜひ参考にしてください。