WordPressのCocoonテーマを使っているブログ「きりんの巣」を、ほぼ初期設定のスッピン状態からちょっとオシャレにしてみました！
改装前（before） 
改装後（after）
まだ発展途上とはいえ、一晩でかなり改善された（はず…）ので、どこをどう改築したのかを詳細にお伝えします。
レイアウトの手順やCSSコードを公開してくださっているサイトのご紹介もさせていただきます。とてもわかりやすく参考になる、良心的かつ良質なサイトばかりなので、皆さんの参考になれば嬉しいです。
改善前の外観
まずは、改築前の状態をご覧いただきます。
使用スキン：おでかけレモン
とっ散らかってんな
スキンを使っているので、色合いやおおよその形は整っています。
でもちょっと味気ない感じですね。
ヘッダーのバナー画像、頑張って作ったんですが…
「頑張ったから見てー！」という主張が激しくて、ブログと合ってない感じ。
そもそもサイズが大きすぎるな！
サイドバーのメニューブロック項目もほとんどいじっていません。
最新の記事の文字が多すぎて何が何だか…記事タイトルも見直す必要がありそう。
問題点の洗い出しと改善
まずは自分が直したいと思うところから手をつけることにしました。
- 色合いが単色だから味気ない
- ヘッダーロゴ画像の主張が激しい
- グローバルメニューがうまく馴染んでいない
- 未開拓のサイドバー
- トップにカテゴリーのボタンが欲しい
あくまで個人の感覚なので、もっと直すべきところはあると思いますが。
では一つずつやっていきましょう！
色合いが単色だから味気ない
現状のスキン→ おでかけレモン
スキンの感じは統一感あって好きでした。きりんの黄色だし！
ただ、全て単色なのでペットリしているというか…もう少し遊びたいと考えていました。
そこで改善策として、スキンの変更と背景画像を挿入することに。
スキンをseason（Autumn）に変更
（cocoon設定→［スキン］）
背景画像を挿入
（cocoon設定→［全体］内【サイト背景画像】）
背景画像はこちらのサイトがとーーーっても便利！
超使いやすい背景用画像が大量に配布されています。これで無料とは…！
ヘッダーロゴ画像の主張が激しい
私はとにかくCanvaを使うのが大好きなので、好きあらば自分のイラストにCanva装飾を施したくなるのです。
ですがロゴはあくまでブログの顔。ごちゃごちゃさせると逆効果です。
他のサイトさんをチェックしたところ、皆さんほとんど文字だけなんですね（絵があってもワンポイント程度）。
改善策として、無駄を徹底的に削いでできるだけシンプルにしました。
色装飾のみの文字ロゴに変更
ロゴの大きさを固定（うちの場合は200×62）
（cocoon設定→［ヘッダー］内【ヘッダーロゴ】）
本当はサブタイトルも入れたかったんですが、我がブログはまだテーマ迷走中なので…
わざわざロゴに入れなくていいと判断しました。
グローバルメニューがうまく馴染んでない
ブログを始めて一番最初にしたカスタマイズ。
もっと素朴で純粋な内容のブログなら牧歌的でよさそうですが、うちのブログにはなんか合わないような…？
ヘッダーロゴが大きいせいで、メニューの位置が私の理想より下の方にきてしまうのが気になってました。
先ほどロゴを小さくしたので、グローバルメニュもスリムに設定してみます。
グローバルメニューを「センターロゴ（スリムメニュー）」に変更
（cocoon設定→［ヘッダー］内【ヘッダーレイアウト】）
これでロゴ問題とグローバルメニュー問題が一気に解決！
cocoonテーマのヘッダーとロゴ設定については、こちらのサイトを参考にしました。
↑ヘッダーの構造が図解してあるので、とってもわかりやすいです！
未開拓のサイドバー
全体的にごちゃごちゃしていて、なんだか散らかっている感じです。
ここでは読者にとって必要な項目を厳選しました。
初期設定のままになっていたRecent Posts、Category、archivesを削除
（外観→ウィジェット→右側にある項目やブロックを削除）
サイドバーにプロフィール、カテゴリー、人気記事を追加
（外観→ウィジェット→
使いたいウィジェット（左）を「サイドバー」（右）にドラッグ）
※iPadの場合：ウィジェット長押し→追加したい場所へ持って行く
サイドバーのデザインをCSSで変更
外観→テーマエディター→style.cssにCSSコードをペースト
サイドバーのカスタマイズCSSコードはこちらの記事から使わせていただきました。
とてもシンプルでみやすいデザインになりました。満足です！
トップにカテゴリーのボタンが欲しい
記事数が10を超えたので、そろそろカテゴリー別にまとめたいと思っていました。
憧れていたピクトグラムを用いたボタンを作成してみます。
ヘッダーメニューを作る
（外観→メニュー→ ヘッダーメニューを作成）
作ったメニューをコンテンツ上部に追加する
（外観→ウィジェット）
このカスタマイズに関しては正直このブログでは力不足なので…
こちらのサイトをご覧ください。全面的に参考にさせていただきました！
サイト内にピクトグラムがあるだけでだいぶ洗練されたイメージになる気がする…！
しかし今のままだとピクトグラムが大きすぎるような…ここはまだ改善の余地ありですね。
おまけ：サイトアイコンの設定
他の設定をしていると偶然見つけたので、ついでに「サイトアイコン」を設定してみました。
設定されたサイトアイコンは、ブラウザのタブやブックマークで表示されます。
サイトアイコンの設定
（外観→カスタマイズ→サイト基本設定）
※アイコンは512px四方以上の正方形で作ってください。
改善後の外観
以上の改善を施したところ、一晩でここまで変わりました！
改装後（after） 
サイドバーもスッキリ
いかがでしょうか？
まだまだ発展途上とはいえ、改善前に比べるとメリハリがついた感じ。
前よりは訪問者に優しいレイアウトになったと思います。
今回の改装は第一弾。
また記事が増えたら、それに見合った改装をしていく予定です。
参考にさせていただいたサイトの運営者さま、ありがとうございました！
最後までお読みいただきありがとうございます。
