どうも、ぶちくまです。
WordPress無料テーマ「Cocoon」の初心者でもできるカスタマイズ部とその方法をまとめてみました。見出しも本文だけではなく、「サイドバーウィジェット」「コメント」「関連記事」などもデザイン可能。ボタンやバッジ、ボックスデザインやCocoonおすすめ機能のカルーセルのCSS編集などを掲載しています。
今回は、ぶちくまがcocoonカスタマイズしてきた中で、「初心者でもお勧めできるカスタマイズできる場所」をご紹介していきたいと思います。
具体的なCSSに関しては詳細記事をご覧ください。
- 1.見出しは一番簡単でしかもサイト色出しやすい！
- 2.グローバルナビはアイコンを設定すると可愛く仕上がる
- 3.スマホ用サブメニューに点線など仕込む
- 4.トップページのインデックス一覧はカードタイプを活かしたカスタマイズを
- 5.サイドバーのウィジェット「人気記事」「新着投稿」もカード風
- 6.サイドバーのタイトル（見出し）も見やすく変更
- 7.「コメント」「関連記事」だって見出しでおしゃれにアイコン挿入
- 8.ボタンは「光らせたい」ならこのカスタマイズ！
- 9.吹き出しを左右で色変えてみました
- 10.バッジは一部だけ変更して簡単に「参照」「引用」がわかるように
- 11.ボックスも一部変更し「おすすめ記事」「check!」などが含まれた、おされBOXに
- 12.箇条書きリストもアイコン挿入
- 13.補足説明BOXの微調整
- 14.目次のデザインカスタマイズ
- 15.コード表示のためにクリックで現れるBOXをつくる
- 16.「カエレバ・ヨメレバ」デザインの調整 アイコン設定など
- 17.「アプリーチ」導入とCSS調整
- 18.カードリンク全般のホバー時のエフェクトを追加
- 19.サイドウィジェットの「カテゴリ」を点線やアイコンを入れて見やすくする
- 20.カルーセル実装したら背景色くらい入れとこう
- 21. モバイルスライドインボタンの「サイドバー」
- 22.RinkerのAMP表示を調整
1.見出しは一番簡単でしかもサイト色出しやすい！
見出しはとにかく簡単なのでお勧めです。
ただし、セレクタがあっていても、COCOON本来に記述されているborder（囲ったりしている線のこと）が邪魔をすることがあります。
border:noneにすることがお勧めです。
2.グローバルナビはアイコンを設定すると可愛く仕上がる
グローバルナビはカスタマイズすべきところがたくさん詰まっています。
ただ、労力的に考えると、スマホはグローバルナビ非表示でも困ることはないし、カスタマイズ優先度としては低いと思います。
グローバルナビのアイコン設定
アイコンの設定はとっても簡単です！
WordPressのダッシュボード（編集画面）で、「外観」→「メニュー」を開くと、詳細な設定ができます。
そのなかで、編集するメニューを「ヘッダーナビ」にして、該当する項目をカスタム設定していきます。
「ナビゲーションラベル」というものがあるので、そこに例えば「ホーム画面」を変えるのであれば、
＜i class="fa fa-home"> ホーム
みたいな感じにすると、うちのブログみたいにメニュー名の前に、「家」のアイコンをつけることができます。
こちらの「ブロギングライフ」さんは、コクーンのCSSカスタム意外にも、役に立つ情報がたくさんあるのでおススメです！
サブメニューも背景色や影をつけて見やすくするといい
Cocoonのグローバルナビでは、サブメニューを設定していると、びろーんとグローバルナビからサブメニューの一覧をみる事ができます。
ぶちくま創作ベースでは、背景に点線をつけて、少し布っぽさを出しています。
グローバルナビにアニメーションをつけて文字が現れるように
これは少し難しいので初心者にはお勧めできませんが、こういうことも可能だよってことで。
ちなみに、ぶちくま創作ベースではヘッダー画像もしたから時間差で挿入されるようになってます。
まぁ、スマホ流入がほとんどなので、目にすることは少ないかもしれませんが。
3.スマホ用サブメニューに点線など仕込む
だいたいCSSをいじる人は、PCでやるので、サイトチェックもPCばっかりになりがち。
スマホ環境も必ずチェックしましょう。
ちなみに、Cocoonのいいところは、スマホも最適化されていること。
スマホだと、スライドインボタンが簡単に挿入できます。
この中で、メニュー画面の設定が非常に崩れやすいのですが、こちらもいじったりする事ができます。
見出しっぽく、アイコンをつけたりするとメニューとサブメニューが区別できていいと思います！
4.トップページのインデックス一覧はカードタイプを活かしたカスタマイズを
インデックス一覧はこんな感じになっています。
少し浮き上がらせてカードっぽさを演出、リンクを認知させる
ぶちくまサイトでは、インデックスは「縦型カード２列」で設定しています。
やや縦長になってしまいますが、こちらをカードっぽく、さらに言えば「付箋」っぽくカスタマイズしています。
ADHD必須アイテムの「リマインダー」をイメージした、と過去記事で触れましたね。
少し浮き上がらせる事で、「ここはこの範囲がリンクになっているんだな」と、少しでも視認性、操作性、ユーザビリティの向上を目指してこうなりました。
最近また人気が出てきた「本文はこちら」誘導
最近はスマホがネットビューの主流となっていることもあって、「リンクであることを伝える方法」もはっきりさせたほうがいいね、って流れがあります。
Twitterで「リンク率が上がるぜ！」ってことで、「続きを読む」をブログカードに挿入する方法が流行りました。
なんでも流行るんです、Twitterってのは。
まぁ、これはSimplicity使ってた人は、わかると思うんだけども、もともと「記事を読む」が実装されていて、こちらのカスタマイズが流行ってました。
「記事を読む」をクリックするとページに飛ぶ仕組みだったわけですね。
テキスト部がリンクだと、スマホだとタップしづらいんですよね。
そこで、ブログカード全体をリンクにする流れとなりました。
そうなると「続きを読む」いらなくねってなって、廃れていったわけです。
Cocoonの場合はインデックスカード全体がリンク
Cocoonでは基本、ブログカード全体がリンクになるので不要なわけですが、大型のカードになると、「あれっ？ これってどこタッチしたらいいの？」ってなりがち。
とくに、最近はスマホですからね、タッチするまでリンクかどうかわからんですからね。
そういうわけで、「本文はこちら」を入れてみました。
色の変わっている「本文はこちら」をタップしてもらうと、ちゃんとリンク先に飛ぶことをしっかり明示したわけですね。
カテゴリ表示はリボン風
一応ね、マテリアルな感じを求めていったらね、なんかこう、細かいところまでカスタマイズしたくなってね。
こちらはみんな大好きサルワカデザインですね。
5.サイドバーのウィジェット「人気記事」「新着投稿」もカード風
これはもうエントリーカードと以下同文ですね。
まだやってませんが、こちらにも「続きはこちら」をいれてもいいかも。
「記事を読む」を入れてみた
詳細記事がまったく間に合ってませんが、「記事を読む」をカード内に挿入しました。
hoverするとウニョーンって伸びるうざい仕様です。
実はアイキャッチも少しだけ拡大されています。
6.サイドバーのタイトル（見出し）も見やすく変更
見出し関連は簡単にへんこうできるのですが、もちろんサイドバーの見出し、タイトルも、CSSでおしゃれに変更できます。
おしゃれ、と言えば、そう、サルワカ先生ですね！
オリジナルのカスタマイズがほとんどないな
見出しごとにアイコンをつけたい
まだ未実装、というかCSSがかさばるのが嫌でアイコンはひとつだけにしています。
7.「コメント」「関連記事」だって見出しでおしゃれにアイコン挿入
サイドバータイトルに以下同文ですが、こちらもセレクタ設定さえできれば、簡単に変更できます！
8.ボタンは「光らせたい」ならこのカスタマイズ！
ぶちくまサイトではボタン、光らせてます。
ちなみに、ぶちくまは光ってるボタンは絶対に踏みませんけどね。
だって、怪しいじゃん！
ぜったい、「ワンクリック詐欺」じゃん！
だけど、どうやらクリック率が上がる、というよりは「ここがリンクだ」ってのがわかりやすくなるんでしょうね。
実装してます。→Cocoonのボタン側で光らせることに対応したので不要に。
9.吹き出しを左右で色変えてみました
サイトのテーマ色、「青」「オレンジ」で左右吹き出しコメントの背景色を変えてます。
繋げてくと、みづらくなってくるからね。
この吹き出しが欲しくて、Cocoonにしたんでした。
しろくましかないってどうなのよ
絵が下手だから準備に時間がかかるんです！
10.バッジは一部だけ変更して簡単に「参照」「引用」がわかるように
べつに個別にクラス指定してもよかったんだが、Cocoonはバッジとかボタンとか、いろんな色が用意されているんですよね。
ぶちくまは一部の色だけ、この「バッジ」を変更して、
- 「ref (refernce) = 参照」
- 「source = 引用」
であることを示すようにしました。
今後、こういった引用表現は大事になってくるので、面倒でも、「引用、出典、参照」は明示したほうがいいですよ。
たとえばこんなバッジ、リンクはないよ
参照の場合はreferenceの略語で対応
11.ボックスも一部変更し「おすすめ記事」「check!」などが含まれた、おされBOXに
これは、いわば有料テーマでよく実装されているやつの、まぁ、うん、そうだ。
パクリですよね。
おすすめ記事の紹介が一発でできるので、個人的には、バッジとボックス、重宝しています！
- この中にリンクをいれたりします。
- テキストリンクでも、ブログカードでもOK！
- 「Check」にしておくと、リンクじゃなくても使いやすいBOXになります。
- たとえば箇条書きもいいよね
怪しいリンクユニット風の箇条書きリストも
こんな感じで、いかにも怪しいリンクユニット風の箇条書きリストも用意しました。
12.箇条書きリストもアイコン挿入
- 普段はこんなやつ。
- ←こんなやつ
- 現在は箇条書きリストは通常に戻しました。
- だけど、ブランクボックスに入れた時だけ適応するように調整
- 数字の場合はこれ
- 色も対応した
13.補足説明BOXの微調整
こちらも一応、Simplicityから引き継ぎましたが、ぶちくまはCocoonデフォルトも結構好きなので、AMPの方ではデフォルトのままにしています。
【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30
14.目次のデザインカスタマイズ
こちらはCocoonで目次が実装されたので、移行に伴い、余白の調整からセレクタの設定まで結構骨が折れました。
15.コード表示のためにクリックで現れるBOXをつくる
こちらはサルワカ先生のところに詳細あります。
まだまるっとCSSいただいてるだけなので微調整。
こんなやつですね。
サンプル
16.「カエレバ・ヨメレバ」デザインの調整 アイコン設定など
TwitterではRinkerが大人気ですが、価格表示は誤誘導につながりかねないので保留中。
あと、プラグインは基本入れない。
でも、アナリティクス連携機能は魅力。
とにかく、カエレバ・ヨメレバはデフォルトも素敵デザインなので、とくにカスタマイズは不要かとは思ってる。
AMPはデフォルト推奨で。
Amazon商品リンク対応したので不要に
Cocoonが便利なAmazonリンク作成ツールを機能に盛り込んだので不要になりました。
これが超便利なので、RinkerとWPAPは不要になってありがたいっす。
モバイル版がシュッとしたデザインになったので調整
モバイル版のYahooリンクが大きくなり過ぎたので少し手を入れました。
17.「アプリーチ」導入とCSS調整
すでに詳細記事あります。
18.カードリンク全般のホバー時のエフェクトを追加
さいとうさんの記事がとても素敵です。
さいとうカスタムは有料テーマに負けないアニメーションも取り入れているので、参考におすすめしたいサイトです‼︎
19.サイドウィジェットの「カテゴリ」を点線やアイコンを入れて見やすくする
もうね、ここまでカスタマイズすると
FontAwesomeを使わないといけないんじゃないかという、
妙な強迫症状がでてくるよね。
ベストなアイコン探すのって結構大変。
そんな時にはさいとうさんのブログですね。
こういうのが欲しかった、という見事なリスト！
実際の画像
20.カルーセル実装したら背景色くらい入れとこう
Cocoonの魅力的な昨日に「カルーセル」機能という、おしゃれなECサイトなんかで、商品画像をぐるぐるまわしているあれ、なんとCocoonでもできます。
これは画像と背景の感じから
「あっ、これ絶対映画フィルムっぽくしたら素敵やん！」
と思って、こんなデザインになりました。
結構気に入ってます。
実際の画像はこちら
21. モバイルスライドインボタンの「サイドバー」
更新しました。
モバイルスライドインを設定している方も多いのでは？
サイドバー息してないから、カスタマイズ方法教えるよ！
22.RinkerのAMP表示を調整
もうね、全然更新が追いついていないけどね。
やることは一応やってるんです。
こんな感じでした。
取り急ぎ、載せておきました。詳細記事は随時更新していきます！
「CSS教えて！」という希望がありましたら、そのあたりの記事をなるはやで更新して見ます！
コメント