Twitterにてブログの新着記事更新情報をお届けしてます!

Cocoonカスタマイズは初心者でも簡単にできる【おすすめ一覧】

どうも、ぶちくまです。

WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。

今回は、ぶちくまがcocoonカスタマイズしてきた中で、「初心者でもお勧めできるカスタマイズできる場所」をご紹介していきたいと思います。

具体的なCSSに関しては詳細記事をご覧ください。

  1. 1.見出しは一番簡単でしかもサイト色出しやすい!
  2. 2.グローバルナビはアイコンを設定すると可愛く仕上がる
    1. グローバルナビのアイコン設定
    2. サブメニューも背景色や影をつけて見やすくするといい
    3. グローバルナビにアニメーションをつけて文字が現れるように
  3. 3.スマホ用サブメニューに点線など仕込む
  4. 4.トップページのインデックス一覧はカードタイプを活かしたカスタマイズを
    1. 少し浮き上がらせてカードっぽさを演出、リンクを認知させる
    2. 最近また人気が出てきた「本文はこちら」誘導
    3. カテゴリ表示はリボン風
  5. 5.サイドバーのウィジェット「人気記事」「新着投稿」もカード風
  6. 6.サイドバーのタイトル(見出し)も見やすく変更
    1. 見出しごとにアイコンをつけたい
  7. 7.「コメント」「関連記事」だって見出しでおしゃれにアイコン挿入
  8. 8.ボタンは「光らせたい」ならこのカスタマイズ!
  9. 9.吹き出しを左右で色変えてみました
  10. 10.バッジは一部だけ変更して簡単に「参照」「引用」がわかるように
  11. 11.ボックスも一部変更し「おすすめ記事」「check!」などが含まれた、おされBOXに
    1. 怪しいリンクユニット風の箇条書きリストも
  12. 12.箇条書きリストもアイコン挿入
  13. 13.補足説明BOXの微調整
  14. 14.目次のデザインカスタマイズ
  15. 15.コード表示のためにクリックで現れるBOXをつくる
  16. 16.「カエレバ・ヨメレバ」デザインの調整 アイコン設定など
    1. Amazon商品リンク対応したので不要に
  17. 17.「アプリーチ」導入とCSS調整
  18. 18.カードリンク全般のホバー時のエフェクトを追加
  19. 19.サイドウィジェットの「カテゴリ」を点線やアイコンを入れて見やすくする
    1. 実際の画像
  20. 20.カルーセル実装したら背景色くらい入れとこう
    1. 実際の画像はこちら
  21. 21. モバイルスライドインボタンの「サイドバー」
  22. 22.RinkerのAMP表示を調整
スポンサーリンク

1.見出しは一番簡単でしかもサイト色出しやすい!

見出しはとにかく簡単なのでお勧めです。

ただし、セレクタがあっていても、COCOON本来に記述されているborder(囲ったりしている線のこと)が邪魔をすることがあります。

border:noneにすることがお勧めです。

スポンサーリンク

2.グローバルナビはアイコンを設定すると可愛く仕上がる

グローバルナビはカスタマイズすべきところがたくさん詰まっています。

ただ、労力的に考えると、スマホはグローバルナビ非表示でも困ることはないし、カスタマイズ優先度としては低いと思います。

グローバルナビのアイコン設定

アイコンの設定はとっても簡単です!

WordPressのダッシュボード(編集画面)で、「外観」→「メニュー」を開くと、詳細な設定ができます。

そのなかで、編集するメニューを「ヘッダーナビ」にして、該当する項目をカスタム設定していきます。

「ナビゲーションラベル」というものがあるので、そこに例えば「ホーム画面」を変えるのであれば、

<i class="fa fa-home"> ホーム
※半角の<を使ってください。

みたいな感じにすると、うちのブログみたいにメニュー名の前に、「家」のアイコンをつけることができます。

WordPress テーマ CocoonのメニューにFont Awesomeのアイコンを追加表示する方法
WordPress テーマ Cocoonは、標準でFont Awesome のアイコンフォントが組み込まれて(ロードされて)利用可能になっています。本記事では、Cocoonのメニュー項目にFont Awesomeのアイコンを加えて表示させる

こちらの「ブロギングライフ」さんは、コクーンのCSSカスタム意外にも、役に立つ情報がたくさんあるのでおススメです!

サブメニューも背景色や影をつけて見やすくするといい

Cocoonのグローバルナビでは、サブメニューを設定していると、びろーんとグローバルナビからサブメニューの一覧をみる事ができます。

ぶちくま創作ベースでは、背景に点線をつけて、少し布っぽさを出しています。

グローバルナビのサブメニューに点線を仕込む
グローバルナビのサブメニュー

グローバルナビにアニメーションをつけて文字が現れるように

これは少し難しいので初心者にはお勧めできませんが、こういうことも可能だよってことで。

ちなみに、ぶちくま創作ベースではヘッダー画像もしたから時間差で挿入されるようになってます。

まぁ、スマホ流入がほとんどなので、目にすることは少ないかもしれませんが。

スポンサーリンク

3.スマホ用サブメニューに点線など仕込む

だいたいCSSをいじる人は、PCでやるので、サイトチェックもPCばっかりになりがち。
スマホ環境も必ずチェックしましょう。

ちなみに、Cocoonのいいところは、スマホも最適化されていること。

スマホだと、スライドインボタンが簡単に挿入できます。

この中で、メニュー画面の設定が非常に崩れやすいのですが、こちらもいじったりする事ができます。

見出しっぽく、アイコンをつけたりするとメニューとサブメニューが区別できていいと思います!

スマホスライドインメニューのメニュー画面
スマホスライドインメニューのメニュー画面
スポンサーリンク

4.トップページのインデックス一覧はカードタイプを活かしたカスタマイズを

インデックス一覧はこんな感じになっています。

トップページの記事一覧はカード風に
トップページの記事一覧はカード風に

少し浮き上がらせてカードっぽさを演出、リンクを認知させる

ぶちくまサイトでは、インデックスは「縦型カード2列」で設定しています。

やや縦長になってしまいますが、こちらをカードっぽく、さらに言えば「付箋」っぽくカスタマイズしています。

ADHD必須アイテムの「リマインダー」をイメージした、と過去記事で触れましたね。

少し浮き上がらせる事で、「ここはこの範囲がリンクになっているんだな」と、少しでも視認性、操作性、ユーザビリティの向上を目指してこうなりました。

最近また人気が出てきた「本文はこちら」誘導

最近はスマホがネットビューの主流となっていることもあって、「リンクであることを伝える方法」もはっきりさせたほうがいいね、って流れがあります。

Twitterで「リンク率が上がるぜ!」ってことで、「続きを読む」をブログカードに挿入する方法が流行りました。

ぶちくま
ぶちくま

なんでも流行るんです、Twitterってのは。

まぁ、これはSimplicity使ってた人は、わかると思うんだけども、もともと「記事を読む」が実装されていて、こちらのカスタマイズが流行ってました。

しろくまさん
しろくまさん

「記事を読む」をクリックするとページに飛ぶ仕組みだったわけですね。

テキスト部がリンクだと、スマホだとタップしづらいんですよね。

そこで、ブログカード全体をリンクにする流れとなりました。

そうなると「続きを読む」いらなくねってなって、廃れていったわけです。

Cocoonの場合はインデックスカード全体がリンク

Cocoonでは基本、ブログカード全体がリンクになるので不要なわけですが、大型のカードになると、「あれっ? これってどこタッチしたらいいの?」ってなりがち。

とくに、最近はスマホですからね、タッチするまでリンクかどうかわからんですからね。
そういうわけで、「本文はこちら」を入れてみました。

色の変わっている「本文はこちら」をタップしてもらうと、ちゃんとリンク先に飛ぶことをしっかり明示したわけですね。

カテゴリ表示はリボン風

一応ね、マテリアルな感じを求めていったらね、なんかこう、細かいところまでカスタマイズしたくなってね。

こちらはみんな大好きサルワカデザインですね。

CSSで作る!綺麗なWeb用リボンデザイン22選
HTMLとCSSのコピペで使えるWeb用のリボンデザイン集です。横だけでなく、縦や斜めのもの、ボッ クスに折り込まれるような立体的なデザインのものまで揃えました。
スポンサーリンク

5.サイドバーのウィジェット「人気記事」「新着投稿」もカード風

これはもうエントリーカードと以下同文ですね。

まだやってませんが、こちらにも「続きはこちら」をいれてもいいかも。

「記事を読む」を入れてみた

詳細記事がまったく間に合ってませんが、「記事を読む」をカード内に挿入しました。

hoverするとウニョーンって伸びるうざい仕様です。

実はアイキャッチも少しだけ拡大されています。

サイドバーウィジェットの一覧投稿記事カード
サイドバーウィジェットの一覧投稿記事カード
スポンサーリンク

6.サイドバーのタイトル(見出し)も見やすく変更

見出し関連は簡単にへんこうできるのですが、もちろんサイドバーの見出し、タイトルも、CSSでおしゃれに変更できます。

おしゃれ、と言えば、そう、サルワカ先生ですね!

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。
しろくまさん
しろくまさん

オリジナルのカスタマイズがほとんどないな

見出しごとにアイコンをつけたい

まだ未実装、というかCSSがかさばるのが嫌でアイコンはひとつだけにしています。

スポンサーリンク

7.「コメント」「関連記事」だって見出しでおしゃれにアイコン挿入

サイドバータイトルに以下同文ですが、こちらもセレクタ設定さえできれば、簡単に変更できます!

コメントボタンのカスタマイズcocoon
コメントボタンのカスタマイズcocoon
スポンサーリンク

8.ボタンは「光らせたい」ならこのカスタマイズ!

ぶちくまサイトではボタン、光らせてます。

ちなみに、ぶちくまは光ってるボタンは絶対に踏みませんけどね。

ぶちくま
ぶちくま

だって、怪しいじゃん!
ぜったい、「ワンクリック詐欺」じゃん!

だけど、どうやらクリック率が上がる、というよりは「ここがリンクだ」ってのがわかりやすくなるんでしょうね。

実装してます。→Cocoonのボタン側で光らせることに対応したので不要に。

スポンサーリンク

9.吹き出しを左右で色変えてみました

サイトのテーマ色、「青」「オレンジ」で左右吹き出しコメントの背景色を変えてます。

繋げてくと、みづらくなってくるからね。

この吹き出しが欲しくて、Cocoonにしたんでした。

しろくまさん
しろくまさん

しろくましかないってどうなのよ

ぶちくま
ぶちくま

絵が下手だから準備に時間がかかるんです!

スポンサーリンク

10.バッジは一部だけ変更して簡単に「参照」「引用」がわかるように

べつに個別にクラス指定してもよかったんだが、Cocoonはバッジとかボタンとか、いろんな色が用意されているんですよね。

ぶちくまは一部の色だけ、この「バッジ」を変更して、

  • 「ref (refernce) = 参照」
  • 「source = 引用」

であることを示すようにしました。

今後、こういった引用表現は大事になってくるので、面倒でも、「引用、出典、参照」は明示したほうがいいですよ。

たとえばこんなバッジ、リンクはないよ

参照の場合はreferenceの略語で対応

スポンサーリンク

11.ボックスも一部変更し「おすすめ記事」「check!」などが含まれた、おされBOXに

これは、いわば有料テーマでよく実装されているやつの、まぁ、うん、そうだ。
パクリですよね。

おすすめ記事の紹介が一発でできるので、個人的には、バッジとボックス、重宝しています!

  1. この中にリンクをいれたりします。
  2. テキストリンクでも、ブログカードでもOK!
  • 「Check」にしておくと、リンクじゃなくても使いやすいBOXになります。
  • たとえば箇条書きもいいよね

怪しいリンクユニット風の箇条書きリストも

こんな感じで、いかにも怪しいリンクユニット風の箇条書きリストも用意しました。

スポンサーリンク

12.箇条書きリストもアイコン挿入

  • 普段はこんなやつ。
  • ←こんなやつ
  • 現在は箇条書きリストは通常に戻しました。
  • だけど、ブランクボックスに入れた時だけ適応するように調整
  1. 数字の場合はこれ
  2. 色も対応した
スポンサーリンク

13.補足説明BOXの微調整

こちらも一応、Simplicityから引き継ぎましたが、ぶちくまはCocoonデフォルトも結構好きなので、AMPの方ではデフォルトのままにしています。

インフォメーション
クエスチョン
エクスクラメーションマーク
メモはまだ未対応
原型はサルワカさんですね。

【CSS】おしゃれなボックスデザイン(囲み枠)のサンプル30

スポンサーリンク

14.目次のデザインカスタマイズ

こちらはCocoonで目次が実装されたので、移行に伴い、余白の調整からセレクタの設定まで結構骨が折れました。

スポンサーリンク

15.コード表示のためにクリックで現れるBOXをつくる

こちらはサルワカ先生のところに詳細あります。

まだまるっとCSSいただいてるだけなので微調整。

HTMLとCSSだけ!要素の表示・非表示を切り替える方法

こんなやつですね。


 

サンプル

スポンサーリンク

16.「カエレバ・ヨメレバ」デザインの調整 アイコン設定など

TwitterではRinkerが大人気ですが、価格表示は誤誘導につながりかねないので保留中。
あと、プラグインは基本入れない。

でも、アナリティクス連携機能は魅力。

とにかく、カエレバ・ヨメレバはデフォルトも素敵デザインなので、とくにカスタマイズは不要かとは思ってる。

AMPはデフォルト推奨で。

Amazon商品リンク対応したので不要に

Cocoonが便利なAmazonリンク作成ツールを機能に盛り込んだので不要になりました。

Amazon商品リンク設定と使い方

これが超便利なので、RinkerとWPAPは不要になってありがたいっす。

モバイル版がシュッとしたデザインになったので調整

モバイル版のYahooリンクが大きくなり過ぎたので少し手を入れました。

スポンサーリンク

17.「アプリーチ」導入とCSS調整

すでに詳細記事あります。

Apple Music

Apple Music

Appleposted withアプリーチ

スポンサーリンク

18.カードリンク全般のホバー時のエフェクトを追加

さいとうさんの記事がとても素敵です。

さいとうカスタムは有料テーマに負けないアニメーションも取り入れているので、参考におすすめしたいサイトです‼︎

リスブロ
ブログがわかる、Webメディア。
スポンサーリンク

19.サイドウィジェットの「カテゴリ」を点線やアイコンを入れて見やすくする

もうね、ここまでカスタマイズすると
FontAwesomeを使わないといけないんじゃないかという、
妙な強迫症状がでてくるよね。

ベストなアイコン探すのって結構大変。
そんな時にはさいとうさんのブログですね。

ブロガー・Web制作者必見。ブログデザインに使えるFont Awesomeアイコン 利用シーン別まとめ
こんにちは、さいとう(@S41T0H)です。Font Awesome(フォントオーサム)、使ってますか? めちゃくちゃ便利ですよね。僕は大好きです。Cocoonを始めWordPressのテーマには標準で読み込まれているものも多く、それらでは

こういうのが欲しかった、という見事なリスト!

実際の画像

カテゴリーのカスタマイズcocoon
カテゴリーのカスタマイズ
スポンサーリンク

20.カルーセル実装したら背景色くらい入れとこう

Cocoonの魅力的な昨日に「カルーセル」機能という、おしゃれなECサイトなんかで、商品画像をぐるぐるまわしているあれ、なんとCocoonでもできます。

これは画像と背景の感じから
「あっ、これ絶対映画フィルムっぽくしたら素敵やん!」
と思って、こんなデザインになりました。

結構気に入ってます。

実際の画像はこちら

Cocoon|カルーセルに背景色とボーダーを挿入
カルーセルに背景色とボーダーを挿入
スポンサーリンク

21. モバイルスライドインボタンの「サイドバー」

更新しました。

モバイルスライドインを設定している方も多いのでは?

サイドバー息してないから、カスタマイズ方法教えるよ!

スポンサーリンク

22.RinkerのAMP表示を調整

もうね、全然更新が追いついていないけどね。
やることは一応やってるんです。

こんな感じでした。

取り急ぎ、載せておきました。詳細記事は随時更新していきます!

「CSS教えて!」という希望がありましたら、そのあたりの記事をなるはやで更新して見ます!

コメント

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