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

Cocoonのカスタマイズ【すっきりデザイン編集の備忘録】 ブログで収入→資産化
この記事は約9分で読めます。

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

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

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

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

なお、カスタマイズにはCSSの追記が必要です。
CSSの追加先は
外観>カスタマイズ>追加CSSにコピペすれば大丈夫です。

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

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

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

Cocoonの標準のH1 , H2タグの左に色付きの縦線を入れました。
超有名ブロガーのmanablogさんの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タグ

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

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"]

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

Cocoonのおすすめ記事一覧のサムネイル にリボンをつけて、少し目立つようにするカスタマイズができます。

これはCSSの追記ではなく、おすすめ記事一覧を作るときに設定します。
外観>メニューから右上の「表示オプションをクリック」して、
CSSにチェックを入れます。(説明文も入れた場合は、説明もチェック。)

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

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

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

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

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

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

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

type=”default”

に変更。
説明文を表示しないように、先ほどの表示オプションで説明を非表示に変更。

外観>ウィジェットのカスタムHTMLをサイドバーに追加して、
下のショートコードを貼り付ければ完了です。

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

下のようにサイドバーに表示されるようになりました!

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

人気記事一覧をサイドバーに表示するのは簡単で、
外観>ウィジェットの[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を書き換えることで、いろんなアイコンに変更できます。

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

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

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

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

Cocoonのトップページのカスタマイズ方法はこちらです。

ブログで収入→資産化
スポンサーリンク
最後まで読んでいただきありがとうございます!

ご訪問いただきありがとうございます。とっても嬉しいです。
皆さんのお役に立てる記事を日々作成しています。

▼ついでにポチッと応援していただけるともっと喜びます▼

今日は何位かな?

  • にほんブログ村 株ブログ 積立投資へ

この記事を気に入っていただいたら、ぜひシェアをお願いします。

最後まで読んでいただきありがとうございます!

ご訪問いただきありがとうございます。とっても嬉しいです。
皆さんのお役に立てる記事を日々作成しています。

▼ついでにポチッと応援していただけるともっと喜びます▼

今日は何位かな?

  • にほんブログ村 株ブログ 積立投資へ

この記事を気に入っていただいたら、ぜひシェアをお願いします。

スポンサーリンク
Lapis Labo
タイトルとURLをコピーしました