Cocoonのトップページをカスタマイズしてみた！
初めましての方も、そうでない方も、訪問ありがとうございます！
こたか(@kotacalog)です！
私はブログを始めた時からWordPressテーマはずっとCocoonを使用しています。
Cocoonは無料テーマとは思えないほど有能なのです。しかし、使用している人も多いので、カスタマイズを適当にやってるとどうしても量産型のブログに見えてしまうのは否めません…。
有料テーマの購入も視野に入れてましたが、どうしてもこのデザインがイイ！！と思えるテーマが見つかりませんでした。
そんな時、私はふと思いました。
そもそも、Cocoonそのものの機能に満足しているし、いろんなテーマのいいところを参考にして、自分で気に入るようなデザインにすればいのではと…。
とはいえ、CSSの知識は多少あるものの、PHPの知識は皆無…。なので、できるだけ標準機能＋CSSだけでどうにかしたい…。
ということで、前置きが長くなりましたがまずはトップページのカスタマイズが完成したので、どのようにしたのか参考にしたサイトと、個人的につまづりたり苦労したところをまとめていきたいと思います！
基本的にはググれば多く出てくる内容ではありますが、誰かの役にたてば幸いです。
トップページのカスタマイズ
ここからはカスタマイズの内容を個別に紹介しますが、あくまでも一例です。
カスタマイズを行う際は、ご自身で必ずスタイルシートのバックアップを取得したり、ある程度CSSの知識を勉強し、自己責任でお願いします。
サイトロゴの変更
シンプルかつ、サイトカラーをアピールする配色にしました。
kotacaogのサイトカラーはグリーン（#98d3b7）・ブルー（#a1c4fd）・イエロー（#e9e9cb）の3色でまとめています。
ちなみに、ファビコンにも設定しているサイト名の隣のモチーフは、ゲームのコントローラーの十字キーだったりします。ゲーマーですからね。さりげなくアピールしたつもり…。
関連リンク
グローバルメニューにアイコンを設定
多くの人が既にしているカスタマイズかと思います。画像だけじゃ分かりにくいので実際に目で確認して頂ければと思います。
自分はアイコンをプラスするだけでなく、触れたとき（hover）に下線を出したのと、グローバルメニューのフォントとサイズを変えました。
少し前にCocoon標準機能として追加された、トップページをカテゴリごとに表示する機能を使って、新着記事をカテゴリごとに分かりやすくしました。
私みたいな雑記ブログでもいろんなネタを扱うブログにとっては、読者さんが全部の記事を見るとも限らないので、このようにカテゴリ毎に分かりやすく表示できるのは嬉しいことです。
こちらは、Cocoon設定→インデックスで簡単に設定できますよ。
私はそれだけで飽き足らず、カテゴリ名ともっと見るボタンの装飾をしました。カテゴリ名のカスタマイズはikuzoblog、装飾のアイデアはサルワカを参考にさせてもらいました。
クラス名が分かれば、さほど難しくないかと思います。
記事一覧をマテリアルデザイン化
有料テーマで人気なSANGOやJINみたいに、記事に触れた時にふわっと浮かびあがるようなデザインに変更しました。
アクションが多くあるのは個人的には好みませんが、アクセントとして少しあるのが理想だったので採用しました。PCからじゃないと確認できませんけどね。
kotacalogでは背景色を白にしているので、マテリアル化をしても記事と背景の境界線が分かりにくいのもあり、横長で表示されるものに関しては点線のボーダーをあえて入れました。
SNSボタンと表示ラベルの装飾
地味に苦労した部分…。
SNSボタンはプロフィールを装飾した時に自然とついてきたので、そちらでカスタマイズしました。こちらにちては後日サイドバーのカスタマイズで紹介します。
SNSボタンの上のラベル（SNS SHARE,SNS FOLLOW）は背景色と影を付けました。
影はマテリアル化の際に設定したものをコピペし、背景色をつけ角を丸くしフォントと文字の大きさを変更。
装飾をいろいろしてたら自然と好きにカスタマイズできると思います。
ちなみに、SNSボタンの上のラベルの文言の内容はCocoon設定→SNSシェア・SNSフォローから設定できます。
ページネーション(ページ送り)の装飾
ページネーションを丸く柔らかい感じにしました。触れると色が変わります。
めっちゃ可愛くて気に行ってます。
サイトバー編に続く
今回はトップページに関するカスタマイズになりましたが、基本的にはコピペだけでどうにかなるものが大半です。
CSSのカスタマイズはコピペして色や大きさを自分好みにカスタマイズしていけば、自然と各プロパティがどのような役割をしているのか身に付いていくと思います。
とはいえ、要素や配置などは理解するのに時間がかかることもありますが…。
まずは色だけ変えてみるなど簡単なところから、チャレンジしてみるのも良いかもしれません。
低コストでブログを始めるならスターサーバーがオススメ！[PR]
当サイトはスターサーバー 
を使用しています。
- 月額200円～(税抜)からWordPressが使える。
- 初期設定費無料キャンペーンが定期的に行われている。
- サーバーと一緒にドメインの契約・管理も可能。
- 大きな不具合もなく常に安定して稼働している。
- A8.net
のセルフバック対象。
ブログの収益化を目指すためにはランニングコストを抑えるのも大切です。
２週間のお試し期間もあるので、有料サーバーの契約に悩んでいる人は一度試してみてはいかがでしょうか？
趣味として楽しむ人にとってもコスパが抜群です！
Comment