はまちゃんのプロフィールはこちら
田舎フリーランスになるな!?

インフルエンサーの影響でフリーランスを目指す人に物申す!
地方移住したらまず会社員になるべきだって!

移住時の田舎フリーランスがダメな理由

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

一体いつからCocoonトップページを固定ページで作れないと錯覚していた? ブログ運営

これからはCocoonが天に立つ

 

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

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

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

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

 

だがしかし!

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

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

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

 

avatar

はまちゃん

正直、教えたくない…

おいおい、心の声漏れてるぞ? 大丈夫か?

avatar

婿太郎

 

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

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

 

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

ここまでするんだ…!

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

この記事は、Cocoon用のトップページの作り方ですが、他のWordPressテーマを使っていても、参考になる部分はあるはずですよ。

 

好きなところから読む!

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

cocoon ブログデザイン変更 トップページ 固定ページ

 

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

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

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

(Before)

cocoon デザイン カスタマイズ後

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

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

 

そして・・・・

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

(After)

wakuwaku-keigo.com_トップページ cocoon トップページ

クリックして画像を確認するか、当ブログのトップページから全体を確認しよう。
※ただし、当ブログのトップページは時間経過とともに、さらにカスタマイズを加えている可能性があります。

 

avatar

はまちゃん

自作したブログトップページのデザインはどうですか?
気に入ったらテンプレートにしてるので、最後まで記事を呼んでくださいね。

 

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

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

Cocoon カテゴリ別最新記事 新着記事 トップページ

 

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

ブログ型:個人日記のような新着記事順のトップページのこと。
サイト型:ホームページのように必要な情報が整理されたトップページのこと。

 

avatar

はまちゃん

記事数がまだ少ないのでカテゴリ毎の新着記事順にしてますが、今後は徐々に特集ページやお知らせがある、ホームページみたいなトップページにする予定です。WordPressのカスタマイズ楽しい〜!

 

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

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

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

 

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

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

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

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

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

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

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

 

avatar

はまちゃん

特化ブログならまだしも、雑記ブログだとトップページ、つまりブログの顔を見ても何のブログかわからんって、やばくない!?

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

 

そして・・・・

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

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

 

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

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

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

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

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

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

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

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

avatar

はまちゃん

検索して記事を読んでくれた読者が、わざわざトップページを見てくれた…
こんな数少ない大事なお客様を、僕も大事にしたい!!

 

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

 

▼スポンサーのリョータロー様です▼

リョータロー 地域おこし協力隊 スポンサーバナー

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

Customize Cocoon 簡単

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

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

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

 

avatar

はまちゃん

順番に丁寧にわかりやすく説明します。
テンプレートを用意しているからご安心を!

 

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

【Cocoon用トップページの作り方】(1)トップページのコンテンツ設計

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

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

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

 

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

ワイヤーフレームとは?
→ワイヤー(線)とフレーム(骨組み)の言葉を合わせたWebサイトの下書き。ホームページ制作では必ず必要なもので、クライアントとコンテンツやデザインのすり合わせのために使います。

 

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

ブログ ワイヤーフレーム サンプル

こんなの俺は作れないぞ!? 難しそう・・・

avatar

婿太郎

avatar

はまちゃん

心配ご無用!
Cocoonはワードプレステーマなので、大まかなデザインは全て決まってるよね?
だから、ヘッダー下に何をどんなデザインで表示するかをざっくりとイメージできたらOKだよ。

 

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

 

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

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

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

 

Cocoonには、

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

などの機能もあります。

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

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

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

 

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

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

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

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

 

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

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

avatar

はまちゃん

ただ、HTMLやCSSは知っていたら確実に武器になります!
少しずつ勉強して損はないですよ?

 

【WordPress「Cocoon」カスタマイズ】(2)固定ページの作り方の決定

【Cocoon用トップページの作り方】(2)固定ページの作成方法の決定

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

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

 

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

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

それって大変ですよね?

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

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

 

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

プラグイン トップページ作成

 

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

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

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

avatar

はまちゃん

自分の考えてるデザインなら、Cocoonの標準機能で作れるくね?

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

 

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

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

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

 

作り方②:Cocoon(コクーン)の標準機能で固定ページを作る

本命はこっち!

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

 

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

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

avatar

はまちゃん

なんて簡単なんだーー!!

ブログのWordPressテーマでCocoonを選んだ我々の勝利ですぞ!

avatar

婿太郎

 

【WordPress「Cocoon」カスタマイズ】(3)固定ページの作り方

【Cocoon用トップページの作り方】(3)固定ページの作成

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

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

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

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

 

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

 

avatar

はまちゃん

教えたくないよ〜

往生際悪いぞ!? サクッと教えんかいっ!!

avatar

婿太郎

 

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

 

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

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

固定ページ 新規作成 Cocoon

 

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

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

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

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です。

cocoon 固定ページ テンプレコピペ

avatar

はまちゃん

見出し2と見出し3のデザインは、僕はカスタマイズしてるから上記のデザインになってるんやで〜

 

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

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

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

 

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

ブログタイトルとは?

『ブログタイトル』

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

 

(ブログに合った画像)

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

 

ブログの説明欄

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

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

 

●●をチェック

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

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

 ボタンの色は、僕はライトブルーにしてますが、違う色もCocoonなら簡単に変更できます。
色を変えたいなら記事作成に使える拡張スタイル。ボタン編。を読んでみてね!

 

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

カテゴリ別の最新記事

 

カテゴリ①〜⑥

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

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

テキストエディタで見ると、カテゴリ名の前に下記の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コピペでおしゃれに

 

(カテゴリに合った画像)

cocoon 見出し3 トップページ カスタマイズ

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

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

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

avatar

はまちゃん

フラットなデザインでおしゃれなのに商用利用可の無料!
最強のフリー素材サイトやと思うわ。マジで。

 

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

 

キャッチフレーズ

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

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

 

新着記事or人気記事

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

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

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

Cocoon ショートコード ビジュアルエディタ

avatar

はまちゃん

なんと! 新着記事一覧や人気記事一覧をショートコードで追加できるだと〜!?

 

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

新着記事一覧 ショートコード クリック

[〜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が以下のように表示されるのでその数字を追記すれば完了

Cocoon カテゴリ ID 確認方法

cocoon タグ カテゴリ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カラムなどを簡単に表示できますので、好きにイジってあなただけのトップページを作り上げてくださいね!

Cocoon 標準機能 トップページ作成

avatar

はまちゃん

この記事を読んだ全員が、僕と同じトップページにしたら僕のトップページの個性が死ぬしね。笑

それが本音かっ!

avatar

婿太郎

 

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

【Cocoon用トップページの作り方】(4)固定ページ・サイドバーのデザイン調整

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

 

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

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

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

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

【記事上】

cocoon 記事上 シェアボタン

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

 

【記事下】

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つで非表示にできるので、削除しておきましょうね。

Cocoon アドセンス広告・目次 削除

 

見出し3のデザイン調整

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

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

cocoon 見出し3 トップページ カスタマイズ

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

 

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

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

/* トップページ見出し3 CSS変更 */
.page-id-●●●● .article h3 {
/* 見出し3のスタイル */
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を指定する箇所です。

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

固定ページID

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

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

avatar

はまちゃん

もちろん!
見出し3のデザインは、CSSで他のデザインに変えることもできるよ!
同じようにして、見出し2もトップページ用に変えてみるのもお洒落かもね!

 

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

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

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

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

 

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

avatar

はまちゃん

僕はサイドバーがあるバージョンにしてるよ!
僕のデザインを参考にするなら②サイドバーがあるバージョンにしよう!

 

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

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

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

操作は簡単!

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

ページ設定 Cocoon

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

 

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

 

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

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

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

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

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

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

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

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

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

 

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

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

 

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

Cocoon ウィジェット トップページのみ チェック

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

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

 

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

 

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

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

 


avatar

はまちゃん

ここまで頑張りましたね!
トップページになる固定ページが作成できたら、公開ボタンを押して次の章に進みましょう!

憧れのトップページまであともう一息!!

avatar

婿太郎

 

【WordPress「Cocoon」カスタマイズ】(5)固定ページをトップページ化

【Cocoon用トップページの作り方】(5)固定ページをトップページ化

これで最後です!

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

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

 

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

Cocoon トップページ 固定ページ化

 

はい!

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

お疲れ様でした!!

 

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

Challenge cocoon カスタマイズ 挑戦

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

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

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

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

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

 

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

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

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

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

 

応募方法はシンプル!

  • この記事を参考にCocoonのトップページをカスタマイズ
  • 以下のツイートをRT+ツイートにコメントをしてトップページの変更を僕に知らせる
  • 僕がこの記事の下にある「みんなのトップページ」にてあなたのブログを紹介

▼応募用のツイートはこちら

はまちゃん
はまちゃん

たくさんの方がご参加いただけて嬉しいです。
以前は引用RTだけで企画の参加でしたが、僕が気づかないことがあるので、「RT+ツイートにコメント」が企画の参加条件に変更しました。

 

(ブログ内で記事にしてくださった皆様)

嬉しかったので、記事にしてくださった方は気づいたら紹介していきます♪

WordPressテーマをCocoonに変更した後のカスタマイズと今後のブログ更新について
WordPressのテーマをSimplicity2からCocoonに変更して1週間。まだまだカスタマイズは続いています。WordPressでのブログ作成をこれから始める方、他のテーマからの乗り換えをお考え中の方に当ブログでのカスタマイズの一例をご紹介します。
初心者がWordPressで遊ぶ(3)トップページをカスタマイズ
読んでいただける方も増えてきましたので、それならせっかくサイトにお越しいただいた方が少しでも興味ある記事を探しやすくするため、トップページを自分で作ってみました。まだ塾のホームページを作る段階には来ていませんので今日はこのへんで我慢我慢。
WordPressのカスタマイズはCocoonで!
Wordpressのカスタマイズ 2018年10月、これまであまり手をかけられなかったWordpressで作成…
【Cocoon】固定ページを使ってトップページを作る!【コピペOK】
どうも。ままん(@maman_selfish)です。相変わらずカスタマイズ沼の中にいます。笑Cocoonはそのままでも十分活用できますが、わたしのようにデザインが決まってないとヤル気でないぜ!!という方も、カスタマイズについての記事がすでに
【cocoon】たった数時間でプロの仕上がり⁉︎ 初心者でも簡単にお洒落ブログ作成 | 元アパレル社長が投資とWEBで自分の店を出すまでの物語
ブログのテーマ変更したい。堪え性のないいや、特に理由はないんですけどね。ブログも資産になり始めたしそろそろ有料テーマにでもしてみっか!って事で色々と探してたんですけど最終的に現在使っているテーマ【cocoon】でもっと出来ないか⁇という本末店頭スタイルに。って事で以前デザインを作成した時に参考にさせて頂いた。はまちゃん

 

はまちゃんの一言

avatar

はまちゃん

この記事は、問い合わせいただいた声に応えて作成した記事です。
せっかく書いたので、たくさんのCocoonブロガー仲間に届いてほしいと思っています。
この記事がよかったら、はてなブックマークとシェアをお願いします!

 

質問などあれば、Twitterまでお願いします→はまちゃん(@wakuwakukeigo

 

ただし、偉そうに解説してきましたが、僕はプログラマーでもなくただの一般ピーポー。
HTMLやCSS知識0から、試行錯誤した自作カスタマイズが今回の記事です。
できる限り質問に答えたいと思いますが、細かなCSSなどの質問にはお答えできない可能性もあるので、ご了承ください。

 

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

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

 

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

 

地方に移住を考えたらまずは情報収集を!
僕が都会から島根に移住すると決めたとき、最初にしたのが情報収集でした。
『地方創生プロジェクト』に会員登録すると、移住相談や求人、起業セミナーなどの情報が届きます。
▼無料ですよ▼ 移住のお役立ち情報はこちら >
ブログ運営
\面白かったらシェアお願いします!/
\はまちゃんをフォローしよう!/

関連する記事



おすすめWordPressテーマ
ELEPHANT3

ブログマーケッターjunichiさんの渾身の力作!
2018年5月販売の最新WordPressテーマ。「ブログで集客したい」なら選ぶべきテーマです。月額7980円のオンラインサロン「BMS」に所属でき、さらにメルマガ配信ができるオレンジメールの有料プラン27,680円分が無料特典!特典分だけでテーマ料金を超えてます・・・

▼他の有料WordPressテーマと比較データを詳細ページにまとめました。

この記事を書いた人

「婿養子が結婚条件」の彼女に5年かけて説得され、4年の人事コンサル人生に幕を下ろし大阪→島根へ。
地方移住をきっかけに、人口減少に耐える強い田舎作りの必要性を感じ、島根の魅力を発信するブロガーへ転身。
地方創生に取り組むオンラインサロン運営。詳細なプロフィールはこちら

\はまちゃんをフォローしよう!/
婿養子の島根移住ブログ
トップへ戻る