無料コンサル受付中です~!!!

【コピペ簡単】TOPページもカスタマイズしてオシャレサイトに!

2.サイトの作り方
スポンサーリンク
この記事は 約9 分で読めます。

「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">このカテゴリをもっと読む</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>

STEP3:微調整

STEP4:TOPページに表示

TOPページに設定する

まとめ

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

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

コメント