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

Cocoon Wordpress
この記事は約5分で読めます。

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

記事の内容
  • カスタマイズの概要と参考記事の紹介
  • 導入の際に気付いた点
  • 導入後にCocoon標準機能として追加されたカスタマイズ

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

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

プロフィール

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

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

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

カスタマイズしたプロフィール画像

参考記事

記事元 リスブロ | ブログがわかる、Webメディア。

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

その他参考記事

記事元 うぇぶあしび

記事元 ぽんひろ.com

コメント欄

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

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

参考記事

記事元 うぇぶあしび

導入の際の注意点

コメント欄のタイトル部分のアイコンは、 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のショートコード機能、「新着記事」と「人気記事」の並びをCSSでカスタマイズします。

横3列の並びにする

デフォルトの縦配列を横並びで3列に表示します。
トップページで表示させる時に便利。

参考記事

記事元 あかえほ | 赤ちゃん絵本のWeb図書館

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

ボックスメニュー

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

「Cocoon 2.0.6」よりCocoon機能に追加

参考記事

記事元 ぽんひろ.com

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

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

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

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

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

ソースコードに行表示

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

「Cocoon2.0.4」よりCocoon機能に追加

Cocoon設定の「コード」から設定ができます。

ただ、ワタシは現在もプラグインを利用しています。(見た目が好みなので)

おわりに

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

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

それでは、また!けろら~でした♪\(^▽^)/

コメント欄

タイトルとURLをコピーしました