Cocoon「ミックスグリーン」利用中。スキン利用歴はこちら♪

【Cocoon】カスタマイズ参考記事まとめ

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

ブログのカスタマイズは基本「Cocoon設定」とスキンにお任せ状態のけろら~ですが、
時々無性に何かしらカスタマイズしたくなる衝動に駆られ、ついついカスタマイズを追加してしまいます。(^_^;

当記事では、その追加したカスタマイズで参考させていただいた記事をまとめています。(^_^;
(カスタマイズ記事を公開して下さっている皆さまありがとうございます!!)

プロフィール

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

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

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

参考記事元 うぇぶあしび

参考記事元 ぽんひろ.com

ボックスナビ

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

参考記事元 ぽんひろ.com

コメント欄

コメント欄が柔らかい印象になるカスタマイズです。

参考記事元 うぇぶあしび

コメント欄のタイトル部分のアイコンは、 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;
}

新着、人気記事表示を横3列

Cocoonのショートコード機能、「新着記事」と「人気記事」表示は縦配列がデフォルトですが、
それを横並びにするカスタマイズです。
トップページで表示させる時に便利。

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

おわりに

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

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

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

コメント欄

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