記事も増えてきたし、
ブログのトップページを変えたい！
画像がバーンと出る、おしゃれなサイト風に憧れるけど、無料のWPテーマ「Cocoon」じゃ難しいよね…
実はこのトップページ、
Cocoonでつくりましたよ✨
ええ⁉ Cocoonってもっとこう…
いかにもブログって雰囲気なイメージで…
何か難しい設定してるの？💦
ちょっとだけCSSを調整しているけど、
ほとんどはCocoonのブロックエディターでできましたよ♪
WordPressのデザインといえば、
そんなイメージ、ありますよね？
実は、無料テーマのCocoonでもびっくりするほどおしゃれなサイト風トップページが作れちゃうんです！🎨
方法は、Cocoonのブロックエディターを組み合わせて、少しCSSを加えるだけ。
難しい知識がなくても、見違えるような
トップページに大変身します✨
「CSSっていまだによく分からない…」
そんな私でも、はるみさんの有料記事のおかげで、こんなにおしゃれなトップページを作成できました！
この記事では、実際にカスタマイズに挑戦した体験と、初心者が気をつけたいポイントをまとめました。
Cocoonで自分らしいサイトを作りたい方の参考になれば嬉しいです。
※具体的なカスタマイズ手順やコードは、はるみさんの有料記事にて詳しく解説されています。詳細はこちらをご覧ください。
トップページってそもそも何？
トップページは、ブログに訪れた人が最初に目にするページ。
「ホーム画面」とも呼ばれ、ブログの第一印象を決める大切な場所です。
Cocoonの初期設定では、投稿記事が時系列で並ぶ「ブログ型」表示になります
例えば、Wordpress始めたてはこんな感じ！
ブログらしいスタイルですが、記事が増えてくるとこんな問題が。
せっかく来てくれた人も、目的の情報にたどり着けず離脱しがちに。
気になってクリックしたのに、よく分からない場所だと不安になるよね💦
「このブログは○○なブログ！」とパッと見て伝わるようなトップページを工夫すると、印象もぐっと良くなりますよ。
Cocoonでは固定ページを使ってカスタマイズできます！
ビフォーアフター✨トップページがこんなに変わりました！
トップページを新しく変更しました！
←左がBefore、右→がAfterです。
どちらも
を使って作成しました。
Cocoonでトップページを作るには？
1. 固定ページでつくる
ブロックエディターを使って、パーツを組み立わせるように作っていきます。
ホーム画面として設定する際は、
WordPress管理画面→設定→表示設定→ホームページの表示
から作成したページを選べばＯＫです。
2. 細かいデザインはCSSで設定
CSS（シーエスエス）は、Webページの見た目を設定するための言語。
※CSSは、Cascading Style Sheets（カスケーディングスタイルシート）の略
細かいデザインを整えることができます。
🎨 CSSでできること
当ブログでは、SNSマークを丸くしたりしています
「cocoon、カスタマイズ、CSS」で調べると色々見つかるよ！
CSSは次の場所で追加できます。
| 各ページ下にある「カスタムCSS」 | そのページだけに反映 |
| 外観→テーマファイルエディター | テーマ全体に反映 （子テーマを使っている場合は子テーマに反映） |
| 外観→カスタマイズ→追加CSS | サイト全体に反映 |
よく使うのは上2つ！
反映させたい場所にあわせて使い分けを
トップページのビフォーアフター、何が違う？
どちらも、大まかなデザインはブロックエディターを組み合わせて作成しています。
ポイントは、ページタイプとカラムの使い方です！
Before
：固定ページ（デフォルト）で作成
ページタイプが「デフォルト」の場合、
メインコンテンツ（記事）の横にサイドバーが並ぶレイアウト。
※スマホでは記事部分のみ表示、サイドバーは非表示orスライド式表示となります
記事作成と同じ要領で、見出しや新着記事のブロックなどを組み合わせて作成します。
1列を2つ、3つに分けたいときは
「カラム数」でレイアウトできるよ！
実際の旧トップページはこちら
After（右）
: 固定ページ（1カラム）で作成
ページタイプをデフォルト以外に設定すると、メインコンテンツのみの表示に。
ページタイプは記事作成画面で変更できます。
ページタイプによって、広さや余白スペースも変わってきますよ
シンプルでおしゃれ✨
全体的にスッキリした雰囲気に！
こちらも、基本的にはブロックエディターを組み合わせただけ。
これらを工夫しただけで、印象が大きく変わりました！
はるみさんの記事を見て、カラムってこう使うの？と目からウロコ！今まで全然活用できていなかったんだなと感じました
カスタマイズ時はここに注意！
Cocoonの基本設定に注意
サイト風トップページのように、画面いっぱいに表示させたい（フルワイド表示にする）場合は、基本設定を解除しておきましょう。
CSSで幅を調整しても、Cocoon設定が優先されちゃうよ💦上手くいかないときは一度確認してみてね！
全体を見やすい環境に整える
ノートパソコンなど、小さな画面だと、本来の全体像が分からないことも。
大きな画面で見ると、思わぬ余白が⁉
画面サイズで最適化されるから、
小さな画面だと気づかないことも！
のがおすすめです！
デスクトップがない場合は、スクリーンショットでブログ全体を確認するのがおすすめ！ビフォーアフターを比べるのにも便利ですよ♪
CSS追加時はセキュリティ（WAF）に注意
特に各ページ下にある「カスタムCSS」に追加時は、セキュリティ（WAF）にはじかれてしまうことも。
一時的にWAFをOFFにしたり、
WAFの除外をすると追加できます。
サーバー側から、WAFを一時的に除外してCSSを追加しました
※CSS追加後はすぐに元の設定に戻しておきましょう！
※WAFの攻撃記録は、すぐに反映されない場合も。時間を置くか、WAFの利用設定そのものをOFFにしてみてください。
過去のカスタマイズ（自分で追加したCSS）を確認
過去に追加したCSSと、新しいCSSが干渉することも。
事前に把握しておくと、原因の特定がスムーズです。
昔のカスタマイズって、意外と忘れがちで…
変だなと思ったら、過去のCSSが原因だったことも
バックアップを取る
何かあったときのためにもバックアップを！
まとめ
はるみさんの有料記事をもとに、次のポイントを変えたことで、初心者の私でも素敵なトップページを作ることができました✨
Cocoonのブロックエディターと、少しCSSを追加するだけで、初心者でもサイト風のおしゃれなトップページが作れます！
「CSSって難しそう…」と思っていた私でも作れたので、気になる方はぜひチャレンジしてみてくださいね。
Cocoonでがんばりたい！方には
ぜひおすすめしたいです✨
