Cocoonでちょこっとカスタマイズ【まとめ】

2019年12月17日2021年5月15日

URLをコピーしました！

けろら～

こんにちは！サイト管理人のけろら～です♪＼(^▽^)／
本日の記事は、Wordpressテーマ「Cocoon」で、管理人がこれまで導入したカスタマイズをまとめています。

実際に導入したカスタマイズを順々に記事の内容に追加していく予定です。
（カスタマイズ記事を公開して下さっている皆さまありがとうございます！！）

極力スキンにお任せ派なので、ご紹介できるのはそれほど多くはないと思いますが参考になれば幸いです。

プロフィール

サイドバーに表示させるウィジェットのCSSカスタマイズです。

おしゃれな雰囲気にカスタマイズ

シンプルなプロフィール欄をちょこっとオシャレに変えてみました。
アイコンが自作でダサいので雰囲気ぶちこわしな点もいなめませんが（汗）、見やすくなったと思います。

参考記事

https://s41t0h.jp/cocoon-author-box-customize/

プロフィールのカスタマイズは他にも候補があったのですが、
一番シンプルそうなカスタマイズにチャレンジしてみました。
以下は、そのうち試すかもしれません。

その他参考記事

うぇぶあしび

【Cocoon】プロフィールボックスをSANGO風にカスタマイズ WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はサイドバーと記事下のプロフィールボックスを人気のWordPressテーマ「SANGO」風にカスタマイズしてみました。…

ぽんひろ.com

【Cocoon】プロフィールをオシャレで可愛くしてみた！ Cocoonのプロフィールカスタマイズです。グラデーションを使って可愛くオシャレにカスタマイズします。コピペで簡単に出来るようになっています。色の変更や肩書きの挿入な…

コメント欄

コメント欄に該当するCSSをカスタマイズします。

コメントフォームに色をつける

参考記事

うぇぶあしび

【Cocoon】コメント欄をおしゃれにカスタマイズ WordPressテーマ「Cocoon」のカスタマイズ備忘録です。今回はコメント欄のカスタマイズをしてみました。コメントがあった時に表示されるコメントリストはこんな感じになり…

導入の際の注意点

コメント欄のタイトル部分のアイコンは、 Font Awesomeで表示しています。
参考記事のCSSは、FontAwesome4です。

.comment-title:before { /*タイトルにアイコンを付ける*/
  font-family: FontAwesome;
  content: '\f27b';
  color: #fff;
  margin-right: 4px;
}

現在、Cocoonは「Font Awesome5」にも対応しており、
「Cocoon設定＞全体」で「 Font Awesome 4」か「 Font Awesome 5」かの選択が可能になっています。
すでに設定を5に変更済みの場合、アイコンは表示されないので以下のCSSに置き換えます。
（変更箇所をハイライト表示）

.comment-title:before { /*タイトルにアイコンを付ける*/
font-family: "Font Awesome 5 Free";
  content: '\f086';
  color: #fff;
  margin-right: 4px;
}

導入後、Cocoonに追加されたカスタマイズ

ボックスメニュー

カテゴリーをボックス分けにして、読者が見やすいナビゲーションになるカスタマイズです。

参考記事

ぽんひろ.com

ボックス分けされたナビを作る！回遊率をアップしよう！区分けされたナビゲーションをHTMLとCSSで作ります。単純なグローバルナビゲーションよりも視認性が高く、スマホでタップしやすいのでユーザーに優しいインタフェースにな…

「Cocoon 2.0.6」よりCocoon機能に「ボックスメニュー」として追加

Cocoon

アイコンや画像が使える「ボックスメニュー」ショートコードの使い方アイコンフォントや画像用いて、視覚的にわかりやすいボックスタイプのメニューを表示するショートコード機能の説明です。

「記事を読む」の表示を非表示

Cocoonの標準機能「この記事は約○分で読めます。」の表示を非表示にするカスタマイズです。
固定ページでは表示させたくなかったため、カスタマイズしました。

WordPressエディター画面の下部「カスタムCSS」の入力欄に非表示のCSSを記述するだけです。

投稿が見つかりません。

「Cocoon 1.7.7」よりCocoon機能に追加。

Cocoon

「記事を読む目安時間」の表示をページ毎に切り替える方法トップページやサイトマップページで「読み時間の目安」表示を非表示にしたい場合などにどうぞ。

記事投稿画面のサイドメニューから、「記事を読む」の表示・非表示を選択できるようになりました。

ソースコードに行表示

ソースコードに行数を表示させるため、プラグインを導入しました。

おわりに

以上、Cocoonカスタマイズの参考にさせていただいた記事を紹介しました。

この記事の内容は今後もカスタマイズの度に追加予定です。
どっちかというと、自分用のメモみたいなものですが何かの参考になれば幸いです。

それでは、また！けろら～でした♪＼(^▽^)／

よかったらシェアしてね！

URLをコピーしました！

Cocoonでちょこっとカスタマイズ【まとめ】