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

Cocoonのカスタマイズ【すっきりデザイン編集の備忘録】 ブログの始め方(設定)

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

らぴす
らぴす

HTMLとCSSの知識がなくても大丈夫な、必要最低限のカスタマイズをしています。
アップデートなどで使えなくなったり、崩れてしまわないことを重視して極力少ないCSSコードだけで実現できるようにしています。

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

らぴす
らぴす

簡単にやりたい方は有料テーマがおすすめです。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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; /*アイコンの太さ*/
}

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

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

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

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

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

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

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

[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の標準のサイドバーのカテゴリが文字だけでちょっと寂しかったので、アイコンを付けました。

親カテゴリーと子カテゴリーのアイコンは別のものを使用しました。
こちらも下記の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をえらびます。

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

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

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

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

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

お問い合わせフォームなどの固定ページをブログの下の方に配置する

お問い合わせフォームやプロフィールページ、プライバシーポリシーをブログの下の方に配置します。

フッターに設置するには
外観>メニュー
に進んで、メニュー名のところ(ここでは「フッターメニュー」と入力>メニューを作成ボタンをクリック

次に、左の固定ページのすべて表示タブをクリックして、
プロフィール、お問い合わせ、プライバシーポリシーにチェックを入れて、メニューに追加ボタンをクリック。

すると、右側に選んだ固定ページが表示されるので、
フッターメニューにチェックを入れて、メニューを保存ボタンをクリック

これで以下のように、ページの右下に表示されました。

フッターをセンターに持ってきたいときは
Cocoon設定>フッター
と進んで、

フッター表示タイプを中央を選択>左下の変更をまとめて保存ボタンをクリック

これで、フッターの真ん中に表示できました。

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

らぴす
らぴす

ショートコードをブログ上で紹介する方法です。

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

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

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

らぴす
らぴす

ここまででトップページの簡単なデザイン変更は完了です。
意外とめんどくさいですよね。
もっと簡単にやりたい方は有料テーマがおすすめです。

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

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

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

この記事では

・アイキャッチの画像をセンター寄せする方法
・アイキャッチの画像を広げる方法
・ウィジェットの中身をセンター寄せする方法
・H1,H2タグの左端の色を変える方法
・内部リンクに飛んだときにタイトルの表示が隠れないようにする方法
・新着記事、人気記事に投稿日と更新日やアイコンを表示する方法
・おすすめ記事一覧を表示する方法
・おすすめ記事一覧のサムネイルにリボンをつける方法
・記事一覧をサイドバーに表示する方法
・カテゴリーにアイコンを付ける方法
・サムネイルのサイズの揃え方
・固定ページをブログの下の方に配置する方法
・ショートコードを紹介する方法

について紹介しました。

らぴす
らぴす

ブログで稼ぐためにはある程度のデザインは必須ですが、
デザインに時間をかけすぎても稼げるようにはなりません。
できるだけ短時間で終わらせて次のステップに進みましょう。

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

らぴす
らぴす

デザインに時間をかけたくない人は有料テーマがおすすめです。
時間を短縮でき、ブログの完成度を上げることに注力できます。

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

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