雑記ブログならトップページ(固定ページ)を作るべし!直帰率ダウンや滞在時間のアップに期待できるかも!

雑記ブログこそトップページをブログ

こんにちは、しみたくです。

みなさんはブログのトップページはどうしていますか?変えていなければ新着記事が並ぶスタイルが普通かと思います。

私のブログはITガジェットに関することやミスチルに関することなど、ジャンルによってバラバラなので、一緒に並ばれるとどうしても統一感がなくなってしまいます。

そこで、先日固定ページを使ってトップページを作ってみました。本日はトップページを作るメリットについて紹介したいと思います。

※本記事はテーマ「Cocoon」を前提としています。


スポンサーリンク

雑記ブログこそトップページ(固定ページ)を作ろう!

雑記ブログだと最新記事一覧は統一感がない

こちらは私がトップページをカスタマイズする前の標準で良いされているトップページです。何も弄っていない場合はレイアウトは違えど、並ぶ内容は同じような形になるかと思います。

 

しみたく
しみたく
 

料理や育児、ITガジェットが並んで統一感ないなー

こちらのトップページには最新記事が投稿順に並んでいるのですが、料理のものもあれば、ITガジェットに関するものもあり、まったく統一感がありませんでした。

そこでWordpressの固定ページを使って新たにトップページをつくりました。トップページ作成の際にははまちゃんさんのブログを参考にさせていただきました。

【Cocoon】脱ブログ!固定ページでサイト型トップページにカスタマイズする方法
『これからはCocoonが天に立つ』こう言い放ちWordPressテーマ界に殴り込みをかけたCocoon(コクーン)。ブロガーにとっても衝撃で、無料のワードプレステーマとしては圧倒的な存在感を示しました。もちろん、僕も機能とデザインに惚れ込

こちらが変更後のトップページの一部です。

トップページ変更後

 

しみたく
しみたく

カテゴリ別に分けられているからとっても見やすいね!

詳細はこのブログのトップページをご確認ください。

大きな変更点としては、カテゴリ別に最新記事を分けて配置するようにしたことです。こちらはcocoonの機能を使って配置しているので、クリックだけでこの配置が可能です。

雑記ブログでトップページ(固定ページ)を作るメリット

よっぽどのインフルエンサーでもない限り、カテゴリ違いのページを見てもらえることって殆どないと思うんです。

私のブログではGalaxyの便利な使い方やおすすめのガジェットを紹介しているページが一番アクセスが多いんですけど、その人達が料理のカテゴリのページにアクセスすることってほぼないと思います。そうなるといろんなカテゴリのページが並んでいると訪問者にとっては邪魔な要素が増えてしまうわけですよね。

 

しみたく
しみたく

せっかくブログを訪問してくれてるんだから

見やすいサイトを作っておきたいよね!

 

雑記ブログだとどうしてもカテゴリが増えてしまって、こうした問題が起こりがちです。

その人が欲しい情報に簡単にアクセスできる動線をつくるのもサイトづくりにはとっても重要なことです!

なので、最新記事が並ぶだけのページよりも、個別にトップページを用意したほうがいいのです!

雑記ブログならトップページを作ることで統一感をアップ
訪問者へわかりやすいサイトを提供できる

トップページ(固定ページ)の作り方

今回つくったトップページははまちゃんさんのブログを参考にさせてもらっています!

私で解説してもいいんですけど、はまちゃんさんのブログのほうが圧倒的に細かく解説しているので、基本はこちらを参考にしてもらえたらと思います。

作る中で個人的に工夫した点を紹介しておきます。

『Add Custom CSS』で固定ページのみのカスタムCSSを有効化

固定ページでトップページを作っていたときに気になったのが見出しのデザインです。紹介元のページをコピペでもいいんですが、それだと個性が出ないですよね。

しみたく
しみたく

見出しぐらいは個性を出したい!

ブログ始めたての方でも、見出しのCSSぐらいは弄ったことがあると思います。ただ、固定ページを作っていると細かい問題がいくつか発生してきます。

こちらが特に手を加えていないときのトップページのカテゴリ別最新記事です。

 

しみたく
しみたく

CSSで設定した見出しが適用されて不格好・・・

これでも悪くはないですが、せっかく作るトップページなのにこのデザインはちょっと残念な感じがありますよね。

そこで解決策を探していると、『Add Custom CSS』という素晴らしいプラグインを見つけました!

『Add Custom CSS』とは
記事毎に個別にCSSを設定できるWordpressのプラグイン

記事毎に個別に設定できるということは固定ページだけに効くCSSを設定できるとういことです!

しみたく
しみたく

これならトップページだけ別のCSSを設定できるじゃん!

使い方はとっても簡単、プラグインをインストール>有効化すると、Wordpressの投稿ページに以下の枠が追加されます。

Add Custom CSS

この入力欄に設定したいCSSを記述すれば、このページにだけCSSが有効化されるようになります!こうしてトップページだけ別の見出し使うことができました。

Cocoonのカテゴリ別最新記事が微妙にずれるため高さを固定

カテゴリ別の最新記事を2カラムで表示されているのですが、高さが微妙にずれてしまうという問題が発生しました!

しみたく
しみたく

細かいけどこれはちょっとかっこ悪いよね・・

調べてみると、原因はアイキャッチ画像のばらつきによるものだということがわかりました。そこでCSSに以下のコードを追加して高さを固定させてしまいます。

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

これでそれぞれの記事ごとのスペースの高さが固定されて、バランスが良くなりました!

最後に

雑記ブログなら固定ページでトップページを作ったほうがいい理由とトップページの作り方をご紹介しました。

いろんなことを書いてしまって発散しがちな雑記ブログですが、訪問者にはある程度体系化されていたほうが確実に見やすくなり、滞在時間も長くなります。僕のブログも固定ページを変えてから確実にトップページへのアクセスや滞在時間は長くなりました!

自分のブログの価値を高めるためにも、トップページのカスタマイズに挑戦してみてはいかがでしょうか。

最後までご愛読ありがとうございました。

コメント

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