はてなブログのTOPページ一覧をスッキリさせてみよう（パソコン編）
3/19追記あり
「続きを読む」をカスタマイズして少し見た目を変えてみました。
今回はもっとスッキリさせてみたいと思います。
写真ばぁーーん！その下に文字がきて記事を投稿して何日経ったか、ハテナスターにいいねとTOPページに置かなくてもいいものがたくさん出てきます。
その分スクロールする量が増えるので見づらくなってしまいますよね。
それを無くす方法を見つけてしまったのでさっそく導入してみましょう。
カスタマイズ前
こんな感じで表示されると思います。これはこれで問題はないのでしょうがとりあえず画像を小さくしてみましょう。
カスタマイズの仕方
画像の大きさを50%にします
画像を半分の大きさの50%にして左側に行くようにしました。 これで文字と写真が同じ列になって見やすくなりますね。
画像と文字の隙間を少し開ける
画像を小さくして見やすくなりましたが、本文との距離が近すぎて気になりますよね。なので少し距離をあけてみましょう。
少し間をあけるだけでかなり印象が違いますね。
画像と文字の上部を揃える
画像を基準に考え、本文の上に少し空白があるのがわかりますか？どうせならそこもしゅっと上で揃えてみましょう。
赤い枠にあった隙間がなくなりしゅっと見やすくなりました。
TOP画面フッター非表示
ここまできたら投稿から何日後とか「いいね」の表示も消しちゃいましょう。ここの部分の事を「フッター」と言うらしいです。
スッキリ！！！TOP画面はこれだけ表示されていれば困らないし見やすくなりましたね。
無料プランの人
TOP画面フッター非表示を入れると広告まで非表示にされてしまいます。
はてなブログの規約として以下の一文がありました。
はてなが掲載する広告について はてなブログでは、はてなによる広告が表示されます。有料プラン「はてなブログPro」に加入しているブログのみ、この広告を非表示にできます。
はてなブログのガイドライン - はてなブログ ヘルプ
上記で紹介した「TOP画面フッター非表示」は規約違反になるのかもしれませんので以下のコードを代わりに入力して下さい。
ID、時間の非表示はTOPページと記事内両方とも非表示されるようになっています。もしTOPページだけ非表示にしたい場合は「.entry-footer-section」の前に「.page-index」を付けて下さい。.page-indexでTOPページという意味になります。
まとめ
これでとりあえずパソコン表示のTOPページはスッキリ完成です。
ここまで分割でコードを載せてきましたが、ちょこちょこコピペするのも面倒くさいので一括したコードを貼っておきます。
有料プラン用
無料プラン用
参考にさせて頂いたサイト様
