この度、ブログをリニューアルしました！
ブログリニューアルで実施した
Cocoonカスタマイズ
- トップページをサイト型に変更
→フルワイド設定と波形装飾、メインビジュアル設置、タブ切り替え…etc - トップページにイラストギャラリー設置【Foo gallery】
→プラグインをインストールして設定 - 記事内の装飾カスタマイズ
→目次と見出しのデザイン変更、記事冒頭のプロフィールカード追加 - その他Cocoon標準設定の調整
→サイドバーの表示、ウィジェット設定、メニューの調整など
まる1週間かけて、かなり集中して作業を進めてやっと完成できました…！大変だけど楽しい作業でした。
- WordPress無料テーマ「Cocoon」を利用
- サイト型トップページにカスタマイズしていたものの、見た目的にはブログ型
- 2020年開設、その後手付かずの時期も…
- 2025年9月、全体的なリニューアルを実施（←今ココ）
リニューアル後のトップページ【サイト型】
こちらが完成したCocoonサイト型トップページです！
ぜひスクロールして全体イメージをご覧ください。
【サイト型トップページ】は、トップページを固定ページで作成して、Wordpress設定＞表示設定＞「ホームページの表示」に設定する方法で作ることができます。
この固定ページにカスタマイズを加えることで、見た目を整えて読みやすく洗練されたイメージを目指しました。WordPress無料テーマ「Cocoon」で、ほとんどコピペでも、ここまで仕上げることができるんです…！
サイトデザインや技術に関しては、全くの素人で初心者のわたし…ですが、いろんな方の知識と知恵をお借りして、ここまで仕上げることができました！
このトップページをつくるためにやったこと、参考にさせていただいたサイトなどを１つずつご紹介していくよ〜！
【Cocoon】サイト型トップページカスタマイズでやったこと
はるみさんのサイト「Turicco」でCocoonカスタマイズを学びました！
今回のCocoonブログリニューアルで大変お世話になったのが、はるみさんのブログ「Turicco」でした！
まず、このサイト自体がわたしと同じCocoonで作られているとは信じられないぐらい、おしゃれで見やすい、カッコいい…！と驚嘆。
こんな有料テーマみたいなデザインをCocoonで実現できる、と想像しただけでワクワク！今回のブログリニューアルは、そんなワクワクから始まったのです。
そこから記事をたくさん読んで、CocoonのカスタマイズHowtoを吸収させていただきました。とても丁寧で分かりやすい記事ばかりなので、初心者でも理想のサイト作りができます。
「Turicco」では一部有料記事も含まれます。ですが有料テーマを購入するのに比べればぐんと低予算でおしゃれなブログカスタマイズが実現できます！
ここからはわたしが「Turicco」を参考にして実施したカスタマイズを紹介しますね！
Cocoonのブロック機能でサイト型トップページを作る
まずは、トップページをおしゃれなサイト型にする方法。
こちらの【有料記事】を購入して、手順を一つずつ辿りながら「サイト型トップページ」を作っていきました。
この方法ならWordPress標準のブロックエディター機能を使うので、面倒なHTMLの記述は不要。CSSの記述はありますが、ほとんどコピペするだけなので難しくありません！
この方法でトップページ全体を作りながら、中身のパーツを整えていきます。
波形の装飾とフルワイド設定
トップページの印象を作り上げる上で、重要な役割を持ったのが、コンテンツの区切りに使用した波形の装飾です。
簡単にいうと、WordPressのブロックエディターにある「カラムブロック」機能に、境界線を組み合わせたもの。CSSとSVG（エス・ブイ・ジー）の記述で作ることができます。
さらにこのブロックを「全幅（フルワイド）セクション」で作ることで、境界線を画面の端から端まで広げて見せることができ、グッと洗練されたページデザインに仕上がります！
当ブログトップページでの波形の装飾は、このような感じです。
難しそうに見えるけど、構造としてはシンプルで思ったよりも簡単にできたね！
途中、どうしてもわからない箇所があって「Turicco」管理人のはるみさんに問い合わせしちゃいました…が、丁寧にサポートしていただき無事に解決できて感謝です！
タブ切り替えで新着記事・人気記事を表示
上の画像、黄色いフキダシになっている「あたらしい記事」と「読まれている記事」のところです。
表示を切り替えるのに、Cocoonタブブロック機能を利用。そこにカスタマイズをプラスしています。
カスタマイズで角丸のフキダシに変えておしゃれに見やすくしました！
こちらも、「Turicco」の【有料記事】でカスタマイズさせていただいたもの。
Cocoonのタブブロックは便利ですが、デフォルトでは見た目がちょっと味気ない…。それを、一瞬でオシャレに見やすくしてくれるデザイン切り替えカスタマイズです！
新着記事と人気記事を切り替えて表示できるようになって、スマートに多くの記事に誘導できる上に省スペース化も叶いました。タブブロックのカスタマイズはかなりオススメです。
新着・人気記事・カテゴリ記事のナビカードを横並び表示
こちらも、「Turicco」の【有料記事】でカスタマイズしました。
Cocoonのデフォルトでもカードを「横並び表示」にできるのですが、それだと横スクロールさせる形になってしまう…。そこで、カードをカラム形式ですべて整列表示する方法がこれ！
当ブログでは「4カラム（モバイルでは2カラム）」の表示にしていますが、新着記事・人気記事・カテゴリごとの記事がグンと見やすく整頓されました！
トップページ全体の見た目が、格上げされて見えますよ。
「Turicco」さんのカスタマイズHowToはその他にもいろいろ当ブログに活かされています。本当にありがとうございます！
メインビジュアルのイラスト設置
トップページのメインに、当ブログのテーマを表現したイラストを描きました。わたしの好きな「手帳」と「iPad」で気ままに創作をしているイメージです。
訪れた人にも、リラックスしてゆっくりとブログを楽しんでもらいたいな、という想いを込めているよ〜
ついでと言ってはなんですが…当ブログのマスコットキャラクター「てちょ」と「あいぱ」を作って、メインコンテンツの案内役としてトップページにも登場させています。
ちょこっと注目してあげてくださいね…！
フェードインテキスト＆スクロールアイコンのアニメーション
メインビジュアル下には、ふわっとフェードインするテキストと、スクロールを促すアニメーションアイコンを設置しました。
トップページにイラストギャラリー設置【FooGallery】
もうひとつ、今回のリニューアルで加えたい要素が「イラストギャラリーの設置」でした。
調べてみるとこちらのWordpressプラグイン「FooGallery」が良さそうだったので、使っています。
WordPress管理画面のプラグインにインストール・有効化すればすぐに使えます！有料版（Pro)もありますが無料でも充分な内容です。
画像の表示形式もいろいろ選べて、見栄えのするギャラリーを簡単に作ることができます。
自作のイラストや写真といった画像をたくさん見てもらいたいという時に、オススメのプラグインです！
記事内の装飾カスタマイズ
その他、記事内の装飾をカスタマイズした箇所のまとめです。
目次のデザインカスタマイズ
見出しのデザインカスタマイズ
プロフィールカード
記事の冒頭部分、目次の前に自分のプロフィールカードを作り、挿入するようにしました。
以前からCocoonブログカスタマイズの記事をよく読ませていただいている、ぽんひろさんが作られたWordPressプラグイン「Useful Blocks」に含まれている「アイコンボックス」を使っています。
「Useful Blocks」は比較ボックスやCVボックスなど記事作成に便利なブロックスタイルを簡単に作ることができるので、めちゃくちゃオススメ！
その他、Cocoon 標準設定の調整など
ここまで紹介した以外にも、Cocoon標準設定の調整を行い、全体的な見た目や機能面を見直しました。
- ヘッダー、フッターの表示設定調整
- サイドバーの表示設定、内容を見直し
- アフィリエイトプラグイン「ポチップ」導入
- …その他、こまごまと気になったところをカスタマイズ中！
今後も少しずつ、より快適に見ていただけるブログになるよう日々改善していきます！
おわりに
今回、Cocoonブログをサイト型トップページにカスタマイズする中でやったことをまとめてご紹介しました。
WordPress、Cocoonカスタマイズの参考にさせていただいたサイトの管理人様には心から感謝申し上げます…！
WordPress無料テーマ「Cocoon」で、ほとんどコピペでも、ここまで仕上げることができる！これを身をもって体感できたことが、今回のブログリニューアルに挑戦した1番の収穫だと思っています。
「ほぼコピペ」とはいっても、やっぱりある程度コードの中身の記述が、どういう指示が書いてあるのかが理解できていないとトラブルがあった時に対処できないもの。そこが少しわかってくると、また次も更なるカスタマイズに挑戦してみよう！という意欲が湧いてきますね。
この「ワクワク」が好きで、わたしはブログを続けているんだなぁと思います。
この記事がCocoonカスタマイズをしようとされている方のお役に立てれば幸いです。
今後もカスタマイズしながら、「手帳とiPadで、好きを綴る。」をより良いブログに育てていきたいです！
よろしくお願いします。
コメント