【cocoon】HTMLとCSS初心者によるカスタマイズ【トップページ編】

ブログ

大して記事数が多くないにも関わらずトップページを作成

デフォルトブログだと新着記事がだだっと並んでいるのがトップページになっています。

新着記事をチェックするのって継続でそのブログを見ているときかなーと思い、

初めてブログに来てくださった方は、気になったカテゴリの記事を読みたいだろう(というか私がそう)なのでトップページを作成しました。

 

作成方法については、はまちゃんさんのブログからCSSを丸コピさせていただきまして、変えたいところをちょこちょこいじって作成しました。

 

 

いちこ

ありがたや…
コピペしただけでトップページができるなんて…!

 

はまちゃんさんからのブログからCSSコピペしまくっているので、Google様にコピペブログだと思われていないか心配になりますが( ;´Д`)

私が手を加えたところをメモしておこうと思います。

 

トップページ画像はCanvaで作成

アイキャッチ画像と同様にCanvaで作成しました。

アイキャッチ画像については【cocoon】HTMLとCSS初心者によるカスタマイズ【本文編】に書いています。

 

「いちにちいっぽ」のタイトル画像に犬と足跡を使っていますし、自分のアイコンも狼なのでここはワンコで統一しようとCanvaのテンプレートから検索しました。

 

その下に文章を少し書いて、初めは設置してなかったのですが、プロフィールボタンをつけました

どピンクで主張しまくっていますが、どういう人が書いているかってブログを読んでいくのにちょっと気にしますよね。

自分と似たようなものに興味を持っていたり、近い属性だったら勝手に親近感わきますし、気になった人はプロフィールページに飛んでくれたら嬉しいです。

 

各カテゴリの画像は有名な「いらすとや」さんから

アイキャッチ画像ではオシャレめな素材を使っていますが、トップページは少し違う感じにしたいと思っていました。

かわいい動物のイラストは「いらすとん」で、人物のイラストは「いらすとや」から拝借しました。

 

「いらすとん」は「いらすとや」と同じ、みふねたかしさんが描いています。

使ってみたそれぞれの特徴は

いらすとん → 動物や文字だけのイラストがメイン
いらすとや → 人物中心、バリエーションが圧倒的に多い
「いらすとん」は干支のイラストが多いので年賀状を作るときに大活躍しそうです。

「いらすとや」より「いらすとん」のほうが手描きっぽい感じがするのでやさしい感じがします。

「いらすとん」は色つきと色なしバージョンの両方があります。

お好みやイラストの種類で使い分けるといいかもしれません。

 

「このカテゴリをもっと読む」ボタンの色を変更

もともとは「light-blue」になっていますが、「yellow」に変更しました。

1つのカテゴリにつき、5記事表示されるようになっているのですが、各カテゴリ5記事もないからかクリックしてもページが飛びませんw

 

トップページを作ってから離脱率?直帰率?が良くなったような

Googleアナリティクスもまだぼーっと見ているだけで、まだ使い方がよくわかっていないのですが、トップページを設置してから離脱率や直帰率が良くなっています

各ページに飛びやすくなって、セッション継続時間も長くなりました

 

記事数が少なくても各カテゴリ1記事あるなら、トップページを先に作ってからブログ更新をがんばってもいいかもしれません。

 

コメント

トップへ戻る
公開日:2018年11月10日