パソコンで表示した時にはてなブログのトップページを、カテゴリー別ページやアーカイブページの様に見やすくするやり方。
概要
理想はカテゴリー別やアーカイブページを開いた時のような表示。はてなブログは初期設定のままだとトップページに幾つかの記事が並ぶ形になる。記事の数は詳細設定で変更できるが、長文だとスクロールするのも大変だし色々と弊害があると思ったので、「続きを読む」を利用して見やすく変更した。
続きを読むを推奨する理由
ユーザービリティー
- トップページに5記事表示される設定にしてあるとします。1記事1記事が長文だとスクロールするのが大変です。
- ブログによっては記事と記事の境目が分かりづらくて行き過ぎてしまうことも。
- 画像が多いと表示されるのに時間がかかります。表示が遅いと諦めて帰る訪問者も居ます。
アクセス解析の精度
- 記事が長くないとしてもトップに5記事表示されているとトップページに訪問した人は記事ページに飛ばなくても5記事を読むことができます。これでは全記事が読まれたのか1記事だけしか読まれなかったのかアクセスの詳細が把握できません。
PVアップ
- トップページの表示を1記事にすればいいと思うかもしれませんが、その1記事に興味を示さなければ速攻で帰られるかもしれません。
- 幾つかの記事がリストのように並んでいれば選択肢が増えるので直帰される可能性も少しは減ります。
- 視認性が良いのでユーザービリティーにもかないますね。
- トップページに5記事が表示されていると仮に5記事全部読まれたとしてもページの表示は１なので１PVにしかなりません。
変更した点
1. ソーシャルボタンを外す。
ソーシャルボタンはデフォルトだと記事下のみの表示だが、続きを読むを設定するとトップページにも表示される。トップページにはいらないと思ったのではずした。ほとんどシェアされたりしないブログだが、記事ページには一応残しておきたかったので、別に忍者おまとめボタンを利用して付けた。
2. 「コメントを書く」非表示にした。
コメントも一度もされたこともないので外した。
3. 写真のサイズを一定サイズに変更する。
写真サイズは120✕120ピクセルくらいで一定にする。このサイズではてなフォトライフにアップロードしてもいいが、少し大きめサイズをアップロードすれば写真をクリックした時に大きいサイズが表示される。
アップロードした写真を記事に貼ると、編集画面で[]で閉じられた文字列が表示されます。最後の]の左側に:w120:h120と入れると大きさが変更される。
[文字列]→[文字列:w120:h120]
フリッカーはいい写真が多くてはてなブログから簡単に利用できるのでよく利用していたが、大きさを勝手に変更していいのか分からないのと、写真の下の著作権者のリンクが前から気になっていたので順次他の写真に変更していこうと思う。
4. 写真の横に文章を回り込ませる。
最後の]の左側に:leftと入れると写真の下に書いた文章が写真の右側に表示される。:rightならその逆。
[文字列]→[文字列:left]
写真のサイズを120✕120に変更して写真を左に配置して文章を右に回りこませるには下のようにする。
[文字列:w120:h120:left]
5. 続きを読むを設定する。
最後に編集画面で見出し分の後に「続きを読む」を設定する。
完成
ビフォー
それぞれの記事の幅が画像の大きさによってバラバラ。変更前の写真を取ってありませんでしたが「gamiura 18日前」の下にソーシャルボタンと「コメントを書く」の文字があってもっと縦幅が長かった。
アフター
画像の大きさをだいたい統一して横に文章を回り込ませることによって記事が一定間隔で並ぶようになった。視認性が良くなったと自分では思っている。
