テーマ移行に伴うお知らせとおわび

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

Cocoon
けろら~

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

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

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

目次

プロフィール

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

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

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

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

参考記事

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

その他参考記事

コメント欄

コメント欄に該当する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列に表示します。
トップページで表示させる時に便利。

参考記事

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

ボックスメニュー

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

参考記事

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

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

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

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

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

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

ソースコードに行表示

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

「Cocoon2.0.4」よりCocoon機能のコード表示で行数表示が可能に。

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

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

おわりに

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

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

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

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

コメント

コメントする

目次
閉じる