ここでアフィリエイターデビューしませんか?
このサイトで学べることは?

【Cocoonカスタマイズ】TOPページをコピペカスタマイズでおしゃれにしよう!

サイトの作り方
この記事は 約10 分で読めます。

「TOPページからの離脱率が多すぎる。」
「見たい記事を探すのが大変だ。」

そういったお悩みを抱えている方はまず、
TOPページをカスタマイズすることを検討してみてください。

サイト内の情報が整理されていれば、
ユーザーは興味のある記事を見つけやすくなります。

せんちゃん
せんちゃん

せっかく良質な記事を作成しても読まれないともったいない!

今回は、プラグインなしで
トップページのカスタマイズ手順を解説していきます。
必要に応じてカスタマイズしてみてください!

スポンサーリンク

TOPページの作り方

まず、作り方の解説から。

TOPページをカスタマイズするなら
固定ページをTOPページとして表示させる方法が簡単です。

カスタマイズ手順は、

  1. 新規固定ページを作成
  2. CSSをコピー&ペースト
  3. 微調整
  4. TOPページに表示

です。

手順を解説する前に、
何を表示すればいいか解説していきます。

TOPページに表示したいコンテンツ

まず、トップページに表示させるコンテンツを考える必要があります。

一般的には、

  • サイト情報:どんなサイトか説明
  • 運営者情報:サイトの運営者
  • コンテンツ:最新、新着、人気記事などサイト内の記事紹介
  • サービス内容:提供するサービスの情報
  • SNS情報:Twitter、Instagramなどのアカウント情報

を表示しておけば問題ないでしょう。

STEP1:新規固定ページを作成

新たな固定ページを追加します。
ダッシュボード→固定ページ→新規追加

追加できたら、

STEP2: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" href="ボタンのリンク先">このカテゴリをもっと読む</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" href="ボタンのリンク先">このカテゴリをもっと読む</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" href="ボタンのリンク先">このカテゴリをもっと読む</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" href="ボタンのリンク先">このカテゴリをもっと読む</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" href="ボタンのリンク先">このカテゴリをもっと読む</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" href="ボタンのリンク先">このカテゴリをもっと読む</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>

STEP3:微調整

上記コードをコピペしたら、

  • 表示させる記事
  • ボタンのリンク先

を変更していきましょう。

表示させる記事については、
Cocoonのショートコードがおすすめです。

新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

その他、

  • FontAwesome
  • キャッチフレーズ
  • 画像

はなくてもいいという人は、
お好みで設定してみて下さい。

STEP4:TOPページに表示

TOPページが作成できたら、
現在のTOPページから変更します。

管理画面→設定→表示設定から、
ホームページの表示で固定ページを選び、
作成したページをホームページに変更。

変更を保存を押して確認しましょう。

まとめ

今回は、WordPressのテーマ「Cocoon」を使った
TOPページをカスタマイズする方法を解説しました。

優先順位は低いですが、
サイトの見栄えも運営していくうえで重要になってくるので、
先にやっておくといいかもしれません。

コメント