【Cocoon】ブログ半年で始めるトップページのカスタマイズ。固定ページ挿入で個性化を図る。

Cocoon(コクーン)
スポンサーリンク

ブログを公開して半年、ようやくトップページのカスタマイズを行いました。トップページはブログを作ったときからデフォルトの新着記事一覧を表示させていましたが、もう少しブログの特色がわかるようにしよかなというのが動機。

ドンちゃん
ドンちゃん

デフォルト好き?

ありがち!?新着記事一覧のまま問題
  • ブログにはどんなジャンルがあり、強みが何か分かりづらい
  • 目的の記事が探しづらい
  • ありきたりで個性が見えない

上記のような不都合を感じながら、ブログのトップページにはもっとポータル的な、サイト的な機能が必要と考え、重い腰を上げてようやくページを更新しました。もっと早くやりたかったのですがとっつきづらかった…

この記事では、Cocoon利用者に向けて次のことを共有します。私なりの考えなので、他にもっと良い方法があると思います。「あ、こんな考えもあるのね」程度にさらっとお読みください。

考え方と使える機能のご紹介なので、読む人の方でアレンジ可能です。

コードコピペとかは極力抑えました。なるべくGUIの操作で完結できるように。

ドンちゃん
ドンちゃん

簡潔にね。

チャンビア
チャンビア

は、はい!?

この記事で共有すること
  • トップページに持たせる機能の考え方
  • デフォルト設定から固定ページを使ったカスタマイズ方法
  • Cocoon機能の応用(タグとショートコード)
    • 新着記事
    • 人気記事
    • 任意の記事一覧(ナビカード)
    • 記事内での複数カラム
スポンサーリンク

ブログ・トップページのカスタマイズ

トップページのカスタマイズ時期

個人的に、ワードプレス経験者でサクサクッとできない限り、最初はやらないほうがよいかと思います。記事をジャンル分けして表示するにも一定の記事数が必要ですし、カスタマイズを始めて肝心の記事投稿が手付かずでは、いつまでたってもブログのアクセスは増えません。

この記事投稿時点のこの当ブログ・スペックは次の通り。

公開からの期間もうすぐ7ヶ月目が終了
記事数82
前月アクセス(PV)
(2018年11月)
17,486
(追記:それから半年後…5倍くらいに成長しました…涙)

記事数はまだまだ増やして行きたいのですが、最初に作ったカテゴリー内にも記事が貯まってきました。新着記事一覧だけだとトップページからは埋もれてしまうので少しでも目に触れるように救い出してあげたい。

Cocoonテーマのトップページカスタマイズ(ちょっと埋もれちゃうって(汗)
ちょっと埋もれちゃうって(汗

トップページの機能を考える

トップページに求められる機能はなんだろうか。

自分がほかのブログを見るときにトップページはなんで見るんだっけ?

検索でページに辿り着いてページから離脱するのではなく、トップページに行く。

皆さんはどんな時にみますか?

私はどうかな… 「記事の質が高いなぁ…」「面白い!他の記事はどんなものがある?」「いいサイトだからFeedlyに入れよかな」とかかな。

一つの記事に終わらず、ブログ内を回遊してくれる。

そんな時にトップページがイマイチだと読者の期待を裏切ってしまいますよね。トップページさえバッチリ決まっていればブログのファンになってくれる(かもしれない)。

私が思いつくところでは次のようなイメージ。

トップページに持たせたい機能
  1. 得意のジャンルを伝える
  2. ほかのブログにはない特色を伝える
  3. 迷ったらトップを見ればよいという安心感を与える
  4. (体裁的に)見るに値すると判断させる

機能から導くコンテンツ

得意のジャンルを伝える

Cocoonテーマのトップページカスタマイズ(旅行をイメージした画像)

まず、人気記事をなるべく上の方に配置します。オススメ記事など手動で選んでもいいかも知れません。

このブログは旅行系のトピックを取り扱っています。その特色が出るようにメインとなるカテゴリ記事一覧が目立つ位置に来るようにします。

ほかのブログにはない特色を伝える

Cocoonテーマのトップページカスタマイズ(特色をイメージした画像)

自分なりの世界観は持ちたいですよね。このブログは役立つ旅行ブログのつもりなのでそこを意識したいです。

広告の用語で「トンマナ」って言葉があります。デザインや雰囲気に一貫性を持たせることなんですって。

トンマナとは、「トーン&マナー」の略で、広告におけるデザインの一貫性を持たせることを指します。また、ブランドのイメージカラーとホームページのデザインカラーを合わせる必要があるなど、「トンマナ」は企業部ブランディングにおいても重要です。

ferret「トンマナ」

迷ったらトップを見ればよいという安心感を与える

Cocoonテーマのトップページカスタマイズ(山の頂から景色を見る画像)

トップページに情報が網羅的に配置されているような印象付けを行います。主要なカテゴリー記事一覧を2カラム形式で表示することにしました。

(体裁的に)見るに値すると判断させる

Cocoonテーマのトップページカスタマイズ(整理されたデスク)

体裁が悪いサイトは、わたしも読む気が失せ離脱します。みやすいように丁寧にページを作ります。使うべきところで見出しを使い、トップページのため長々した記述は控えます。

広告色が強すぎると閲覧者が引いてしまうため、それとなーく挿入します…そーっと

カスタマイズの方針

この記事投稿時点で、当ブログの記事数は80あまり。まだまだ記事を増やしていかなければいけない段階のため、カスタマイズに時間を掛けたくない。

  • カンタンに時間をかけずに済ませたい。
  • プラグインは出来れば入れたくない。
  • コードを書くとかまずナイ、メンドウ。
  • なるべく標準機能で済ませたい。
  • 追記:これからはブロックエディタを使うことを勧める
    (スクショの内容もブロックエディタに入れ替えます)

チャンビア
チャンビア

良いものをきちんと勧めたい。ぼちぼち、ブロックエディタ>クラシックエディタで立場が逆転しつつある。まだエディタ移行しきれていない方はお早めに。コクーンのエディタ表現に関するアップデートはブロックエディタ中心です。

↓という話。

え!?そういえばヘッダー設定がまだ…というお方

別のブログを作る機会があり、ヘッダー設定と詳しく格闘してみました。

固定ページで行うトップページ・カスタマイズ

カスタマイズで使う主な要素

本日の材料
  • 固定ページ
  • 普段はあまり使わないタグ、ショートコード
    • 複数カラム
    • 新着記事
    • 人気記事
    • ナビカード
  • 時間(1時間)と飽きないようにお菓子を少々

作成の流れ

トップページ・カスタマイズ手順
  • ステップ1
    トップページに盛り込む内容を考えておく
    ザックリでいいと思うのでどんな内容を盛り込むか紙にでも書き起こしましょう。
  • ステップ2
    新しい新着記事用の固定ページを作成する
    今あるものとの差し替え用の新着記事を固定ページとして作ります。
  • ステップ3
    新しいトップページ用の固定ページを作成する
    ここが腕の見せどころ。
  • ステップ4
    ワードプレスの表示設定から新しい固定ページを適用する
    元のトップページから新しいトップページへ差し替えます。

具体的な作成手順

ステップ1: トップページに盛り込む内容を考えておく

盛り込みたい内容を完成イメージをぼんやり考えておきます。いじり出すとアレコレ触るのでぼんやりとしたイメージで良いと思います。迷いそうな方は手元の紙にラフに書き出してみるのも良いかも。

トップページの記事イメージ(PCで見た場合)
新着記事
人気記事カテゴリ記事
カテゴリ記事おすすめカテゴリ(画像表示)
カテゴリ記事レスポンシブ広告
カテゴリ記事おすすめ記事(任意選択)

モバイルで見た場合は1カラム表示になります。

ステップ2: 新しい新着記事用の固定ページを作成する

「新着記事」というタイトル名でページを作成します。ワードプレスが勝手に出力してくれるので中身は空で良いです。

Cocoonテーマのトップページカスタマイズ(トップページとは別に固定ページを作る)
トップページとは別に固定ページを作る(新着記事用)

トップページを固定ページにすると、新着記事一覧のページがなくなります。新着記事一覧を流し込む別ページを作っておきます。後からここへのリンクも行います。

ステップ3: 新しいトップページ用の固定ページを作成する

名前はなんでも良いです。私はブログ名の「バジェットな旅行記ロク」としました。

イメージしたものを具体的に記事にしていきます。「人気」「新着」「カテゴリー」の記事一覧は、Cocoonテーマではショートコードから出力することが出来ます。

ショートコードってなに?っていうCocoon使いの方はいないとは思いますが次の場所にあります。

ブロックエディタからの新着記事、人気記事のショートコード呼び出し
ブロックエディタからの新着記事、人気記事のショートコード呼び出し

私が不慣れなだけかな?最近、ブロックエディタからもショートコード呼び出しができるようになりました。しかし、段落(P要素ブロック)に何か文字を入れないとショートコードが選べない。GIFアニメは半角スペースを入れています。ショートコード入れたら不要な文字は消しましょう。

固定ページ内に2カラム、3カラムを入れ込むなら

この手法、普段の投稿記事内でも使っています。わりと好き。使い方は、Cocoonのマニュアル見てね

Cocoonテーマのトップページカスタマイズ(ブロックエディタで作るカラムレイアウト)
ブロックエディタで作るカラムレイアウト

私はよくカラムレイアウトを使うので、すぐに選択できていますが使っていない人はよく使うブロックとしては表示されていないかも。その場合は、ブロックの検索を使うか「Cocoonレイアウト→2カラム(または3カラム)」で見つけられます。

Cocoonテーマのトップページカスタマイズ(カラムレイアウトで作るページ)
カラムレイアウトで作るページ

▲ ビジュアルエディターと格闘すれば、こんな感じになっていきます。ボタンは次の要領で作ります(Gutenbergの場合)

チャンビア
チャンビア

このブログトップもブロックエディタ(Gutenberg)に移行しました。ブロックエディタの方がコンテンツの入れ替えが容易でオススメ。

Cocoonテーマのトップページカスタマイズ(「記事をもっと見る」ボタンの作り方)
「記事をもっと見る」ボタンの作り方
新着記事一覧を出すショートコード
[new_list count="5" type="default" cats="all" children="0" post_type="post"]
詳細は以下、ご参照を。
人気記事一覧を出すショートコード
[popular_list days="all" rank="0" pv="0" count="5" type="default" cats="all"]
詳細は以下、ご参照を。
カテゴリ記事一覧を出すショートコード

カテゴリ記事一覧を出す場合、新着記事一覧を出すショートコードのオプションを使います。

[new_list count="5" type="default" cats="2" children="0" post_type="post"]

上記の「cats=”all”」の箇所を「cats=2,16,23」など特定のカテゴリーIDを指定します。カテゴリーIDは、カテゴリーのページを編集する場面でURLを見るとIDが確認できます。

おすすめ記事一覧(任意に選ぶ記事一覧)

Cocoon Version 1.6.7.よりナビカードショートコード機能が追加されました。人気・新着・カテゴリ記事一覧はプログラムが自動で出力しますが、ナビカードだと自分が選んだ記事を好きな順番で一覧表示できます。

かなりざっくりした手順を書きます。詳細は「Cocoon ナビカード」マニュアルをご覧ください。

Cocoonテーマのトップページカスタマイズ(「外観」→「メニュー」任意記事の選択してメニューを作成する)
「外観」→「メニュー」任意記事の選択してメニューを作成する
  1. 「外観」→「メニュー」より新しいメニューを作ります。
  2. 投稿記事、固定記事から表示させたい記事を選んでメニューに追加します。
  3. ラベル名、説明文章を入れます。
  4. ショートコードで好きな場所で表示させます。
[navi name="ブログの始め方"]
注目
残業は不要になる月間10万pv
残業は不要になる月間10万pv
10万pvあると5万円以上の副収益が生まれます。ブログをやるなら狙いたいところ。
おすすめ
ブログやると決めたら読む本
ブログやると決めたら読む本
ブログやるなら最初に読むべきおすすめ本・書籍8選。1年でブログ収益5万円。
おすすめ
お手頃値段のレンタルサーバー
お手頃値段のレンタルサーバー
月額480円で高速Web表示、柔軟なプラン変更、簡単にワードプレスが作れるレンタルサーバー・カラフルボックス。
ワードプレスブログの開設方法
ワードプレスブログの開設方法
レンタルサーバー・カラフルボックスの契約〜ワードプレス開設までの手順をやさしく画像付きで説明。
初心者向けワードプレス設定
初心者向けワードプレス設定
初めてのワードプレスで設定すべきポイントを解説した記事です。

▲ ラベル名は記事タイトルとは別のものにしています。SEOを意識するとどうしてもタイトルが長くなりすぎ、別名のラベルを作ることによってよりみる人にわかりやすくなるのが狙いの機能のようです。

ドンちゃん
ドンちゃん

こうやってしれっと内部リンク足している…

ステップ4: ワードプレスの表示設定から新しい固定ページを適用する

Cocoonテーマのトップページカスタマイズ(ワードプレスの表示設定)
ワードプレスの表示設定

▲ 「設定」→「表示設定」を選択します。

Cocoonテーマのトップページカスタマイズ(フロントページ切り替えの設定)
フロントページ切り替えの設定

▲ 次の通り設定します。

  1. 「ホームページの表示」のラジオボタンを「最新の投稿」→「固定ページ」へ切り替えます。
  2. 「固定ページ」選択肢の「ホームページ」を予め作ったステップ3の固定ページに切り替えます。
  3. 「投稿ページ」に「新着記事」の固定ページを選択します。
    →この後、トップページからリンクを貼ります。

①の「最新の投稿」→「固定ページ」を行った時点で、「最新の投稿」がブログ内から消えてしまいます。「最新の投稿」一覧を見ることができなくなるので、③で別の固定ページに「最新の投稿」一覧が出力されるようにしています。

ドンちゃん
ドンちゃん

説明長いよね

ポイント

固定ページのタイトルを消す(非表示)

トップページには、このブログの「バジェットな旅行記ロク」というタイトルをつけました。ただ、見出しのデザイン的に表示したくなかったので、非表示にしています。

Cocoonテーマのトップページカスタマイズ(トップページのタイトルって非表示でも...)
トップページのタイトルって非表示でも…

▲ トップページ上部のロゴで十分に当ブログのタイトルは伝わるので、あえて固定ページのh1タイトルを表示する必要はないかな…と考えました。

固定ページのタイトル自体は未入力も可能です。ただ、うまく使った方がSEO的には有利かな、、と考えました。このブログの場合、需要があるかどうかは別にして「バジェットな旅行」「バジェット + 旅行」のキーワードで上位にさせたいと考えています。

いわゆるエゴサーチを狙っています。

そんなわけでタイトルはつけつつ、固定ページ内の「カスタムCSS」で非表示にしました。

/* トップページのタイトルを消す */
#post-5976 h1.entry-title {
display: none;
}

「5976」の部分は、固定ページのIDです。固定ページの編集画面URLから取得できます。

Cocoonテーマのトップページカスタマイズ(固定ページのIDを取得する)
固定ページのIDを取得する

新着/カテゴリ記事一覧からもっと見たい場合

ショートコードで出した一覧には、ページネーション(出力された以上にもっと見るリンク)がありませんでした。

Cocoonテーマのトップページカスタマイズ(ページネーション例)
ページネーション例

次のように対処しました。

  • 新着記事:新着記事用の固定ページにリンクを貼る。
  • カテゴリ記事:各カテゴリへリンクを貼る。
新着記事の掲載例

新着記事の掲載例

カテゴリ記事の掲載例

カテゴリ記事の掲載例

ビフォー&アフター

ビフォー(変更前:デフォルトの新着記事一覧)

新着記事の一覧、古い記事は埋もれていっちゃう...

新着記事の一覧、古い記事は埋もれていっちゃう…

前の新着記事一覧のみはこちら。

画像が大きくて見た目は良さげですが、古い記事は埋もれます。また、どんなジャンルを取り扱っているかがわかりづらいです。

アフター(変更後:固定ページのカスタマイズ結果)

現在の当ブログトップページ

現在の当ブログトップページ

現在のトップページ

新着記事はトップに持ってきました。記事投稿当初は、検索流入が入りづらいのでトラフィックを流してGoogleへの記事評価を促したい。

新着記事以降は、ブログ特性に近いものから順に。Cocoon関連も最近ではかなりアクセスがあるので記事を探しやすいように下部に入れておきました。

トップページ・カスタマイズによる効果

トップページの指標
指標変更前
(12/1-7)
1周目
(12/8-14)
2周目
(12/15-21)
3周目
(12/22-28)
直帰率56.52%33.33%33.87%39.62%
離脱率39.29%30.43%35.64%34.34%
ページ滞在時間00:00:2200:00:2500:02:2100:01:24

数字で改善されている様子が出てきました。

それ以外にも、今ままで眠っていた幅広いページにアクセスされるようになったかも。トップページ上で見えている記事や、各カテゴリー記事から古い記事にアクセスしている様子が見られました。 その後も観測を続けましたが、「直帰率」の改善がとても良いです。滞在時間はコクーン利用者がガン見するとバラけます…

この記事投稿してからしばらく

気が向いたので最近のパフォーマンス。BounceRate(直帰率)、Exit(離脱率)です。

Cocoonテーマのトップページカスタマイズ(Page Analyticsで見るトップページパフォーマンス)
Page Analyticsで見るトップページパフォーマンス

これはPage AnalyticsというChromeアプリを使っています。内部リンクのどこがどのくらいクリックされているとかわかるので、トップページのカスタマイズ見直しに使っています。

最後に

Cocoonテーマを利用する当ブログにおけるトップページのカスタマイズ方法のご紹介でした。少し手間ですが、ブログの特色が以前よりは表に出すことが出来たのではないかと勝手に思っています。

やり方はこの方法だけでなく、他にもアプローチがあると思います。ブログを継続してひと段落した方はトップページのカスタマイズにチャレンジしてはいかがでしょうか。

ドンちゃん
ドンちゃん

ねぇねぇ、あのGIFアニメーションはどうやってやるの?

チャンビア
チャンビア

GifoxというMacアプリを使っています。Gifoxをよく解説した記事を見つけました。

Cocoon(コクーン)
スポンサーリンク
ご覧いただき感謝です。記事の品質がブースト的に向上するボタンは次の通りです。
このブログを購読してみる
スポンサーリンク
スポンサーリンク
ブログの購読はこちら

バジェットな旅行記ロク、主に東南アジアを中心とした旅行ブログです。

ブログ投稿は週に2, 3回です。写真多め、見やすい記事をお届けします。

cocoon-affiliate-tag-bannerblog-icon-banner
バジェットな旅行記ロク

コメント

  1. tks より:

    はじめまして。

    私もブログのトップページを固定ページにしようと思い、検索しているうちにこちらにたどり着きました。

    ひとつ質問なのですが、カスタマイズ後にリンクを貼っている旧来の新着記事一覧(https://changbeer.site/new_posts/)ですが、どのようにして作成したのでしょうか?

    • チャンビア より:

      記事が少し長くなってすみません。

      「トップページ・カスタマイズ手順」のフロー、「ステップ2:新しい新着記事用の固定ページを作成する」でトップページの固定ページとは別に固定ページを作ります。その後、「ステップ4:ワードプレスの表示設定から新しい固定ページを適用する」にある設定を行うと旧型の新着一覧が作られます。

      ステップ2側に画像を一つ追加しました。

      • tks より:

        早速のお返事ありがとうございます。

        そういうことだったのですね。
        まだトップページを作成中の段階なので分からなかったのですが、やってみれば分かったことでしたね。

        ありがとうございました!

タイトルとURLをコピーしました