人生RPG

2児のパパで今年30歳の冒険者(サラリーマン)が日々の生活を通して勇者(自由を手に入れた者)を目指すサクセスブログです。

人生RPG

フッターを消去してブログのホーム画面をさらに見やすくするカスタマイズ

SPONSORED LINK

こんにちは!冒険者Lv.1です。
前回「続きを読む」の使い方とカスタマイズ方法を紹介しましたが。
それに引き続きブログホーム(トップ画面)のページに表示されている各記事のフッターを消去し、さらにすっきりしたデザインにするカスタマイズを紹介していきます。

フッターとは?(カスタマイズ実装図)

上の画像は、私のブログのホーム(トップ画面)です。
赤い枠で囲んでいる箇所には、本来
・自分のはてなID
・読者が付けてくれたスター
・読者からのコメント

の項目が表示されています。
簡単に言うと、この記事の下の部分をフッターと言います。

ホーム(トップ画面)には複数の記事が掲載されていますが各記事の下には必ずこの項目も表示されています。
特にコメントをいただくとそのまま全文表示されるので長いホームになってしまいます。
※コメントをいただくのはすごい嬉しいので誤解が無いようお願いします。

なのでホームのページに掲載されている記事の赤線枠の項目だけを表示されないようにカスタマイズします。
ホームだけのカスタマイズなので、各記事のページを開くと記事下にはこれまで通り上の3つの項目はあるので安心してください。

設定方法

今回のカスタマイズもデザインCSSのみでできます。

手順①

下のコードをコピペ(コピー<複製>&ペースト<貼り付け>)します。

.page-index .entry-footer{
    display: none;
}

ダッシュボード(管理画面)
  ↓
デザイン
  ↓
カスタマイズ(スパナマーク)
  ↓
デザインCSSに貼り付けます。
画面右のプレビューを確認してください。

上記の項目が無くなっているとおもいます。

あとは、上部の「変更を保存する」をクリックして完了です。

まとめ

すごい短いソースコードでしたが、その効果は素晴らしいカスタマイズです。

前回紹介した「続きを読む」をカスタマイズと組み合わせることでかなりスッキリした分かりやすいホームデザインが完成できます。
life-is-rpg.hatenablog.jp

またデザイン以外にもメリットはあり、スターなどの「読み込み」&「表示」にかかる時間も省くことができるので読者のストレスも解消できます。

是非、読者にやさしいブログデザインを採用してください。