【Cocoon】脱ブログ！固定ページでサイト型トップページにカスタマイズする方法

『これからはCocoonが天に立つ』

こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon（コクーン）。

ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。

もちろん、僕も機能とデザインに惚れ込み、これまで使っていたSimplicity2からCocoonへ移行しました。

さらに、Cocoonをおしゃれにカスタマイズして、かっこいいブログに仕上げてCocoonライフを過ごしていました。

だがしかし！

上記の記事を公開してからたくさんの方々に読まれ、いただいた通知の数々。

中でも、「トップページを固定ページにするやり方教えろや！ボケがぁ！！」という問い合わせがかなりありました。

カスタマイズ方法の質問を受けるのですが、ブログ初心者の僕がCocoon（コクーン）のトップページを個性を出すために、様々な試行錯誤があって今にいたっています。

でも、問い合わせを頂ける方からの感謝の声に応えるためにも、泣く泣く固定ページでCocoonのトップページの作り方を公開することにしました(他のWordPressテーマでも流用可)。

しかも、丸パクリできるように自作したCSSコピペOKのテンプレート付。

はっきり言って、真似するだけで「ブログのトップページは新着記事が並ぶ」という常識があるブロガー界で、一味違う個性あるブログが作れるでしょう！

ここまでするんだ…！

良い記事だったら、はてブとシェアしてくださいね(-人-)

記事を参考にWordPress「Cocoon」のブログトップページを固定ページで作るメリット

Cocoonのトップページをブログ型からサイト型へデザインを一新できる

最初に、この記事でマネできるCocoon（コクーン）のトップページ（固定ページ）を見せておきましょう。

変更前のCocoonのトップページデザインはコレでした。

（Before）

このCocoonのカスタマイズ方法は、WordPressテーマ「Cocoon」カスタマイズ攻略！CSSコピペでおしゃれにするまとめで紹介しています。

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

そして・・・・

この記事で紹介する固定ページで作ったCocoonのトップページがコレだっ！！

（After）

ご覧のように、このCocoonのトップページデザインのキモは、カテゴリごとに新着記事を表示するようにした点。

つまり、一般的な新着記事順のトップページをやめたということです。

僕個人としては、ブログ型からサイト型に変更したという認識です。

ブログのトップページを固定ページで作ればアクセスアップできる（かも）

僕がブログのトップページを変えようと思った理由は2つ。

1. ワードプレステーマ「Cocoon」で個性を出したかっこいいデザインにしたかったから
2. 「最新記事順のブログは読者からすると見にくいのでは？」という不安があったから

ブログ歴8ヶ月程度のブログ初心者の僕ですが、ブロガーになってたくさんのブログを見てきました。

そこで気づきましたが、最新記事順って読者目線で見るとわかりにくくないですか？

僕の場合だと、婿養子の記事→移住の記事→ブログ運営の記事→WordPressの記事…というように、記事ネタがバラバラで思いついた順番で記事を書いていました。

これを読むあなたはどうですか？

ブロガーは好き勝手な順番で記事を書いていくので、読者からすると、

このブログって、何のブログだ？

と思われてしまっているかもしれません！

という仮説があって、トップページを固定ページを使って改造できないか考え始めました。

そして・・・・

NAE（@naenotenet）さんの記事にたどり着きました。

ブログのトップページを作ったので、作り方から実測効果まで全部紹介

ブログトップページを作りました。コンセプト、コンテンツ設計の考え方、実際の作り方や使ったプラグイン、作成前後での数値変化などをまとめました。

bloglab.naenote.net

要約すると、トップページをリニューアルすると、

• 平均ページ滞在時間
• 直帰率
• 離脱率

のデータが改善してアクセスが増えたって話。

トップページをリニューアルするだけですげぇ効果！

でも、アクセスアップ以上に僕がCocoonをリニューアルする決め手になったのが、記事内のNAEさんのこの言葉に共感したからでした。

ちなみに、およそ月10万PVの当ブログにおけるトップページへのアクセス数はおよそ月2000PVです。

たった2%のためにトップページを作り込む必要があるか？　と言われるとぐうの音も出ません。

しかしその2%は、ブログそのものが主役であるトップページにまでわざわざ来ていただいた「大事なお客様」であることを忘れてはいけないと思うんです。

まだ、Cocoonをリニューアルして間もないのでデータがないですが、トップページの変更した効果検証も今後、データでお見せできるようにしていきますね。

（追記）

アクセス数含めて、トップページを変更してから数字が軒並み改善しました。

ただ、当記事を書いたことでトップページを見る人が爆増したこともあるので一概には言えませんが(^_^;)

WordPressテーマ「Cocoon」なら簡単！ブログトップページを固定ページでサイト型にする作り方

それでは、Cocoon（コクーン）で、ブログトップページ（フロントページ）を作る方法を説明していきますね。

具体的な作り方は、以下の5ステップ。

1. トップページのコンテンツ設計
2. 固定ページの作成方法の決定
3. 固定ページの作成
4. 固定ページ・サイドバーのデザイン調整
5. 固定ページをトップページ化

【WordPress「Cocoon」カスタマイズ】（１）トップページのコンテンツ設計

まずは、トップページをどんなコンテンツ設計にするのかを考えましょう。

考えるべきは、たった2つ。

• コンテンツ：ブログのトップページにどんな内容を表示させたいか？
• デザイン：考えたコンテンツのレイアウトやデザインをどうするか？

簡易ワイヤーフレームを考えるイメージです。

▼ワイヤーフレームのイメージ

難しく考えず、Cocoonの新着記事一覧の部分に、どんな固定ページを作りたいかを考えてみましょう。

①コンテンツ：ブログのトップページにどんな内容を表示させたいか？

ブログ読者によって、最適解は変わると思いますが、代表的なものはこんなところでしょう。

1. コンセプト：どんな目的で運営しているブログなのか？
2. 運営者情報：どこの誰がブログを書いているのか？
3. お知らせ：最新記事やおすすめ記事、人気記事10選などは何か？
4. 発信内容：どんなカテゴリで何を発信しているのか？
5. サービス内容：どんなサービスを提供しているのか？
6. SNS・フォロー：ブログのフォローはどうすればいいのか？

Cocoonには、

• アピールエリア
• 通知エリア
• カルーセル

などの機能もあります。

それぞれをうまく使って、あなたのブログ読者にとってわかりやすいコンテンツが表示させるようにしてあげてください。

難しければ、僕と同じようにカテゴリ別の最新記事を表示させればいい感じになりますよ。

後ほど、コピペできるCSSも公開しますね。

②デザイン：考えたコンテンツのレイアウトやデザインをどうするか？

ぶっちゃけ、HTMLやCSSの知識があれば、ランディングページのようなおしゃれでイカすトップページもできるでしょう。

でも、残念ながら僕はその知識は皆無。

な〜んもわっかりまっせ〜ん(￣▽￣)w

なので、デザインをこだわれる人は勝手に頑張ってください。

HTML・CSS知識が０の方は、後ほど紹介する僕のトップページデザインを参考にしてくださいね。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

posted with カエレバ

千貫 りこ 技術評論社 2017-05-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

【WordPress「Cocoon」カスタマイズ】（２）固定ページの作り方の決定

作成したいトップページのコンテンツとデザインが決まったら、固定ページの作成方法を考えましょう。

僕が調べた限り2つのブログトップページの作り方があります。

本命は作り方②です。

作り方①：プラグイン「Page Builder by SiteOrigin」で固定ページを作る

2カラムや3カラムで綺麗なトップページを作ろうとすると、HTMLやCSS、JavaScriptといったプログラミングの知識が必要になってきます。

それって大変ですよね？

そんな時に使える便利なプラグインがPage Builder by SiteOrigin。

サイト Page Builder by SiteOrigin — WordPress プラグイン

簡単にカラムを作れる独自のエディタが使えるようになりますよ↓

WordPressを普段触ってるブロガーなら、感覚的に使い方をマスターできると思います。

でも、慣れるまでは大変です…

僕も最初は、このプラグインを使ってトップページを作成してましたが、

と思い直して、途中でやめました。

Cocoon以外のワードプレステーマを使ってたり、めちゃくちゃおしゃれなトップページを目指したいなら、Page Builder by SiteOriginで作成されるといいと思います。

プラグイン「Page Builder by SiteOrigin」の使い方はこちらを参照ください。

「Page Builder by SiteOrigin」の使い方

前回WordPressの記事やページの更新を劇的に手軽に、かつ直観的にさせてくれる「Page Builder by SiteOrigin」というプラグインを紹介させていただきました。 今回はその使い方をサンプルとデモを交えながら詳しく紹介させていただきます。

glitter-style.jp

作り方②：Cocoon（コクーン）の標準機能で固定ページを作る

本命はこっち！

Cocoonはありがたいことに、無料テーマだとありえないぐらい高性能なので、標準機能で十分トップページ作れるんですよね。

先ほどのプラグインのように、新たな作業は覚えなくてOK！

しかもHTMLとCSSのコピペで完成しちゃいます！

【WordPress「Cocoon」カスタマイズ】（３）固定ページの作り方

さて、ここまで固定ページの新規作成ボタンを押しただけで、特に何もしていないと思います。

ここからはWordPressの標準機能を使って固定ページをがっつり作っていきます！

僕はめちゃくちゃ大変で3日ぐらい、「あーでもない、こーでもない」と言いながら、ブログのトップページをカスタマイズしてテンプレート化しました。

でも、この記事を読むあなたはラッキーです。

僕の3日かけた努力の結晶を全てコピペできるんですから！！

それでは、固定ページの作り方をご説明していきますね。

①固定ページを新規作成する

ワードプレスのダッシュボードから、「固定ページ」＞「新規作成」をクリックします。

タイトルはなんでもいいです。

この記事ではわかりやすく『【Cocoonトップページ】固定ページテンプレ』としておきましょう。

パーマリンクの設定は関係ないので必要ありません。

②テキストエディタにHTMLをコピペしよう

固定ページの入力画面をビジュアルからテキストエディタにしてください。

そして、新規ページに下記のHTMLコード（自作した固定ページのテンプレート）をコピー&ペーストしてください。

<h2 style="text-align: center;">『ブログタイトル』とは</h2>
<p style="text-align: center;"><strong><span class="red">（ブログに合った画像）</span></strong></p>
ブログの説明欄〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">●●をチェック</a></p>
<br>
<h2 style="text-align: center;">カテゴリ別の最新記事</h2>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ①</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ②</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ③</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ④</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ⑤</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
<div class="column-right">
<h3 style="text-align: center;"><i class="fa fa-thumbs-up fa-fw my-gray"></i>カテゴリ⑥</h3>
<p style="text-align: center;"><strong><span class="red">（カテゴリに合った画像）</span></strong></p>
<p style="text-align: center;"><strong>キャッチフレーズ</strong></p>
<strong><span class="marker-under">新着記事or人気記事</span></strong>
<p style="text-align: center;"><a class="btn btn-light-blue btn-m">このカテゴリをもっと読む</a></p>
</div>
</div>
<h2 style="text-align: center;"><strong><span style="font-size: 24px;">はまちゃんからのお知らせ</span></strong></h2>
<div class="column-wrap column-2">
<div class="column-left">プロフィール</div>
<div class="column-right">
<h3 style="text-align: center;">お知らせ①</h3>
内容〜〜〜〜
</div>
</div>
<div class="column-wrap column-2">
<div class="column-left">
<h3 style="text-align: center;">お知らせ②</h3>
内容〜〜〜〜〜
</div>
<div class="column-right">
<h3 style="text-align: center;">お知らせ③</h3>
内容〜〜〜〜〜
</div>
</div>

下記のような固定ページが作成されればOKです。

追記

カテゴリ別最新記事の上に全体の新着記事を3つ横並びで表示させて、よりオシャレなデザインになりました。

新着記事下の「新着記事をもっと見る」ボタンをクリックすると、従来のデザインである新着記事一覧が表示されるようになっています。

こちらの実現方法は、以下の記事に詳しく書いているので参考にしてください。

【Cocoon】ショートコードで新着記事を横並び表示にするフロントページカスタマイズ

wakuwaku-keigo.com

2022.05.17

③Cocoonのタグやショートコード機能を使って固定ページを作成

コピペした固定ページのテンプレートをサンプルに、あなたの目指すトップページにするよう内容を追記していきましょう。

僕がおすすめする編集方法を解説していきますね。

【『ブログタイトル』とは】おすすめしたい固定ページのカスタマイズ方法

『ブログタイトル』

ここはあなたのブログ名を入れましょう。

（ブログに合った画像）

ブログのロゴなどのイメージ画像を入れてみては？

ブログの説明欄

ブログを訪問した読者がわかりやすいように、どんなブログか説明しましょう。

または、ブログのテーマを書いたり、どんな読者向けでどんな悩みが解決するブログなのかを書くのもおすすめですね。

●●をチェック

飛ばしたいページのリンクを貼る箇所。

僕はプロフィールに飛ぶようにしています。
「まず読んでほしい記事10選」なんかも面白いですね。

【カテゴリ別の最新記事】おすすめしたい固定ページのカスタマイズ方法

カテゴリ①〜⑥

あなたのブログのカテゴリ名に変更してください。

アイコンをつけた方がおしゃれかな？　と思って僕はつけてみましたが、必要なければ削除してもいいと思います。

テキストエディタで見ると、カテゴリ名の前に下記のHTMLを追加しています。
（※）以下のHTMLを削除すれば、アイコンも削除されます。

<i class="fa fa-thumbs-up fa-fw my-gray"></i>

そして、CSSに下記を追加すると、アイコンを灰色に変えることができます。
（※）色を変更したいならCSSに追記してください。

.my-gray {color: gray}

実は、CocoonはデフォルトでFont Awesomeを読み込んでいるので、簡単にアイコンをつけることができるんです。

アイコンの付け方と色の変更方法は、以下の記事『【Cocoon】グローバルメニューのカスタマイズ』を参考に挑戦してみてください。

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17

（カテゴリに合った画像）

カテゴリ別の最新記事を一覧で出すだけでもよかったんですが、なんとなく寂しい感じがしたので画像を入れてみました。

僕は可愛いイメージにしたかったので、FLAT ICON DESIGNから素材を選びました。

FLAT ICON DESIGN -フラットアイコンデザイン-

フラットデザインに最適！WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー（無料）ダウンロードできるサイト『FLAT ICON DESIGN』

flat-icon-design.com

逆にかっこいいイメージののトップページにしたいなら、カテゴリ名を書いた横長の画像を入れたらええ感じになりますよ。

キャッチフレーズ

必要なければ削除してください。

僕はハッシュタグのイメージで、入れることにしました。

新着記事or人気記事

ココがCocoonの機能のすごいところ！

新着記事や人気記事を好きな数だけ、カテゴリを指定して一覧で表示できるんです！

ビジュアルエディタの「ショートコード」をクリックすると、

新着記事一覧をクリックすると、下記のショートコードが追記されます。

[〜new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”〜]

難しく見えますが、いじるのはたった2つ。というより1つだけかな？

• count=”5″
• cats=”all”

countは記事の表示数を表しています。

5記事のままで問題なければそのままで。
3記事に減らすなら”3″に変更するなど、好みの記事数にしましょう。

catsはカテゴリを表しています。

つまり、デフォルトの”all”だと、「全てのカテゴリの中の新着記事一覧を表示」という意味になるんです。

カテゴリを指定するには、

• 「ダッシュボード」＞「投稿」＞カテゴリをクリックしてください。
• 指定したいブログカテゴリにマウスを合わせてください
• カテゴリIDが以下のように表示されるのでその数字を追記すれば完了

▲これはカテゴリIDが”3″

このカテゴリを指定した場合のコードは下記。

[〜new_list count=”5″ type=”default” cats=”3″ children=”0″ post_type=”post”〜]

複数のカテゴリを表示したいなら「,（カンマ）」で区切ればOK。

[〜new_list count=”5″ type=”default” cats=”3,6,8″ children=”0″ post_type=”post”〜]

このカテゴリをもっと読む（もっと見る）

クリックすると、各カテゴリの記事一覧に飛ぶようにします。

カテゴリにあったリンクに修正すれば完成です。

https://●●●●●.com/●●●

はまちゃん

ボタンの文言は自由です。「もっと見る」としても良いかもしれません。

その他、2カラムや3カラムの行・列を追加編集したい場合

ここまで読んだあなたなら、固定ページを僕の固定ページテンプレートじゃなくオリジナリティを出したページにしたいと思っていることでしょう。

その場合、ビジュアルエディタから、新たに2カラムや3カラムなどを簡単に表示できますので、好きにイジってあなただけのトップページを作り上げてくださいね！

▼追記

質問が多かったので、新着記事一覧ページの作り方をまとめました。

カテゴリだけでなく、全体の新着記事一覧を表示させたいなら参考にしてください。

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

wakuwaku-keigo.com

2022.05.17

▼追記

アイキャッチ画像の大きさが記事ごとで異なると、ボタン位置がズレてしまいます。

ボタン位置がずれてる…

かっこ悪いと思う方は、以下のコードを固定ページの『カスタムCSS』に追加すれば調整できます。

/* トップページのカテゴリ別最新記事の幅固定 */
.widget-entry-cards .widget-entry-card-content{
padding-top:0.5em;
height:100px;
}

カスタムCSSは固定ページ編集画面の一番下らへん

無事に、位置のズレが直りました。

でも、記事間の隙間が生まれて個人的に気に食わないので追記していません。

ボタン位置を調整。でも記事間の隙間が気になる…

いい感じに、調整できる方法を知ってる方はご連絡くださいm(_ _)m

【WordPress「Cocoon」カスタマイズ】（４）固定ページ・サイドバーのデザイン調整

無事に固定ページのコンテンツ作成ができたら、固定ページとサイドバーのデザインを調整しましょう。

①固定ページのデザインカスタマイズする

トップページに不必要な要素を非表示

固定ページをトップページ化するときは、表示すべきでない箇所がいくつかあります。

プレビューを見てください。

【記事上】

• パンくずリスト
• 固定ページのタイトル
• 記事上のシェアボタン
• 記事の投稿日・更新日

【記事下】

• 記事下シェアボタン
• 投稿者名

これらは、いらないですよね？
人によっては、記事下のフォローボタンすら不要かもしれません。

他の固定ページでは表示してほしいものなので、トップページ用の固定ページのみ非表示させるように、CSSで指定をする必要があります。

色々な要素を非表示にするCSSを以下に掲載しておくので、いらない分だけご利用ください。

/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}
/*モバイルグローバルメニュー非表示*/
.home.page #navi {
display: none
}

グーグルアドセンスと目次を非表示

ブログの顔でもあるトップページ。

そこにアドセンス広告や目次があると、急にダサくなります。

固定ページのビジュアルエディタの右側からチェック1つで非表示にできるので、削除しておきましょうね。

見出し3のデザイン調整

こだわりたい人用ですが、僕のテンプレートではトップページのみ見出し3（h3）のデザインを変更しています。

「婿養子」や「移住」などのカテゴリ名の部分は、実は見出し3です。

でも、普段の記事の見出し3のデザインは以下になんですよね〜

これはどうやっているかというと、スタイリッシュな見出しにしたいと思って、トップページの見出し3のみCSSでデザインを変えているんです。

この見出しの変更をマネしたい方は、以下のCSSのコピペをしてください。

/* トップページ見出し３　CSS変更 */
.page-id-●●●● .article h3 {
/* 見出し３のスタイル */
background: none;
font-size: 20px;
letter-spacing: 1px;
display: inline-block;
position: relative;
width: 100%;
padding: 0;
text-align: center;
border-left: none;
}
.page-id-●●●● .article h3::before, .page-id-●●●● .article h3::after {
content: '';
position: absolute;
top: 50%;
width: 20%; /*ラインの長さ*/
border-top: 1px solid #444d53; /*ラインの色*/
}
.page-id-●●●● .article h3::before {
left: 10px;
}
.page-id-●●●● .article h3::after {
right: 10px;
}

『●●●●』の部分はトップページ用の固定ページIDを指定する箇所です。

固定ページ一覧から作成した固定フロントページにマウスを合わせると、こんな表示が記事下に表示されます。

例えば僕の場合だと、『post=4860』の4860が固定ページIDです。

「.page-id-●●●●」の部分に4860を入れたら完成です。

②サイドバーのデザインカスタマイズをする

最後に調整するのはサイドバーです！

実は、固定ページをトップページ化する方法は2種類あります。

1. サイドバーが無いバージョンのトップページ
2. サイドバーがあるバージョンのトップページ

どちらのフロントページにするか、好みで選んでみてください。

サイドバーを非表示にした1カラムのフロントページにする場合

サイドバーがないトップページなら、サイドバーのデザインカスタマイズは不要。

代わりに固定ページが1カラムで表示されるようにしましょう。

操作は簡単！

固定ページ作成画面の右側にある「ページ設定」で、1カラム（広い）または1カラム（狭い）を選べば、サイドバーがないフロントページにできます。

サイドバー無しを希望の方は、以下の章を飛ばして『（５）固定ページをトップページ化』に進んでください。

サイドバーを表示させた2カラムのフロントページにする場合

僕は色々悩んだ結果、サイドバーありのフロントページデザインを選択しました。

サイドバーがあるトップページを作成するなら、一部デザインの調整しましょう。

ただし、何のデザインを調整すべきかは、あなたのフロントページのコンテンツ次第。

例えば、トップページのコンテンツの中に人気記事を表示させているのに、サイドバーにも同じ人気記事を表示させるとしつこい感じがしますよね？

そのように重複した部分は削除すべきでしょう。

反対に、トップページだけ表示させておいて、各記事を読むときにはサイドバーに表示させたくないという内容もあるかもしれません。

あなたのトップページに合うように、自由にカスタマイズしてください。

ここでは、サイドバーの操作方法のみ解説しておきます。

①「ダッシュボード」＞「ウィジェット」をクリック

サイドバーに、必要なコンテンツをセットします。

②「表示設定」をクリックしページの「トップページのみ」をチェック

上の画像の場合、「ウィジェットの表示」が「チェック・入力したページで非表示」となっています。

トップページに表示させたくないが、普通の記事ではサイドバーに表示させたいコンテンツの場合、この設定にしましょう。

反対に、トップページのみ表示させたいコンテンツの場合は、「ウィジェットの表示」を「チェック・入力したページで表示」に変えてください。

③保存をクリックして完了

固定ページをトップページ化してから、最終的に問題ないか確認するようにしてくださいね？

【WordPress「Cocoon」カスタマイズ】（５）固定ページをトップページ化

これで最後です！

あなたの創意工夫を凝らしたあなただけの固定ページを作ったら、トップページ化しましょう。

WordPressの機能を使ったら簡単なので、サクッと説明しますね。

1. 「ダッシュボード」＞「設定」＞「表示設定をクリック」
2. 「フロントページの表示」で固定ページをクリックし、あなたが作成したトップページにしたい固定ページを選択
3. 変更を保存をクリック

はい！

これで無事にCocoonでオリジナルの固定ページを作成して、トップページ化できました！

お疲れ様でした！！

まとめ：WordPress「Cocoon」でかっこいい固定ページを自作してブログのトップページをカスタマイズせよ！

めちゃくちゃ丁寧に、Cocoonでブログトップページを自作した固定ページを表示させる方法を説明してきました。

15,000文字超なので、ここまで読んだあなたも大変だったと思います。

でも、頑張ったおかげで、他のブロガーから一歩リードしたブログトップページが作れたんじゃないでしょうか？

あなたのブログのトップページを見てくれるのは、いわばお得意様です。

せっかく興味を持ってくれた読者のためにも、ぜひトップページの変更に挑戦してみてくださいね♪

【キャンペーン中】Cocoonのトップページを変更したブログのご紹介

ここまで簡単に作れたのは、ひとえにCocoonが素晴らしいWordPressテーマだからです。

僕と一緒にCocoonブロガーを盛り上げて行きたくありませんか？

そこで、こんな企画をすることにします！

「Cocoonのトップページを変更したブログの紹介企画」

応募方法はシンプル！

▼コメント用のツイートはこちら

【ブログ更新】

ワードプレステーマ「#Cocoon」を使うブロガーの皆様へ🗣️

固定ページでイカすトップページを作る方法を教えます(^^)

【ブログ＝新着記事順】という常識を崩して、個性を出しましょう！

トップページを変更した方は僕のブログで紹介する企画やってます👇https://t.co/HVp1GrepYf

— はまちゃん@島根移住×(仮)婿養子×地方創生 (@wakuwakukeigo) 2018年9月11日

はまちゃん

当ブログ内のどれかの記事のリンクを貼った紹介記事を、あなたのブログで書いてくださった方のみ紹介していきます。
記事を書かれたらツイッターまでご連絡ください。

この企画は、いずれ終了しますのでお早めに。
ここだけの話、以下に紹介させていただいた先のクリックは、ほぼ毎日あります。

＜ブログを読んでCocoonのトップページを変更した皆様＞

新しく記事にしてくださった順で、紹介していきますね^^

はまちゃんの一言

やっぱり、ブログを自分好みにしていくためには、HTMLやCSSの知識が必要ですね。

そう思って、ちょっとずつ勉強を始めています。

デザインの学校 これからはじめる HTML & CSSの本 [Windows 10 & macOS対応版]

posted with カエレバ

千貫 りこ 技術評論社 2017-05-26

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

んじゃ、今日はこれでおしまいっ！
ほな、バイバーイ！

WordPressの固定ページに新着記事一覧を表示させる方法【プラグインなし】

wakuwaku-keigo.com

2022.05.17

WordPressテーマ「Cocoon」カスタマイズまとめ！初心者でもCSSコピペでおしゃれに

wakuwaku-keigo.com

2022.05.17