はてなブログを使っていると気づくと思いますが、はてなブログのトップページと個別記事ページ（エントリーページ）では表示される要素に違いがあります。
- はてなスターと公式のソーシャルパーツ以外の記事上、記事下のカスタマイズはトップページに表示されない
- サイドバーの関連記事はトップページには表示されない
- パンくずリストはトップページに表示されない
記事上・記事下のカスタマイズ部分について
はてなの人力検索でこんな質問がありました。
はてなブログ初心者です。カスタマイズしたSNSシェアボタンが記… - 人力検索はてな
記事上・記事下にオリジナルのカスタマイズしたシェアボタンを貼っている方も多いと思いますが、記事上記事下のカスタマイズ部分はトップページには表示されません。
トップページを見たときにシェアボタンが無い！と慌てないで下さいね。
トップページにシェアボタンを表示させるには公式のソーシャルパーツを使うしか無いです。オリジナルのカスタマイズシェアボタンのコードと併用するには
ダッシュボード＞デザイン＞カスタマイズ＞記事＞ソーシャルパーツのところにチェックを入れ、
デザインCSSに以下のCSSを追記して個別記事では公式のソーシャルパーツを非表示にします。
.page-entry .social-buttons {
display: none;
}
ただし、この方法はシェアボタンのコードを2重に読み込むことになるので重くなります。カスタマイズされたシェアボタンを使う場合はトップページにはシェアボタンがなくても問題ないので、そのままで良いでしょう。
はてなブログのページ構成
はてなブログのページ構成は以下のようになっています。参考：はてなブログテーマ制作の手引き - はてなブログ ヘルプ
それぞれ生成されるHTMLのbodyタグに固有のclassが指定されます。
| ページの種類 | class |
| トップページ | .page-index |
| パーマリンク（記事ページ） | .page-entry |
| Aboutページ | .page-about |
| Archiveページ | .page-archive |
| Archive/Categoryページ | .page-archive-category |
| Searchページ | .page-archive |
Archiveページとはブログの記事一覧がズラ～と並んでいるあれです。トップページにリダイレクトしている方もいらっしゃいますね。
記事一覧 - Minimal Green
トップページの余白だけ変更したいとか、記事ページだけ変更したいというときにこのclassは活用できます。↑の.page-entry .social-buttonsも記事ページのソーシャルパーツだけにスタイルを指定しています。
特定のページのスタイルを指定したいときは↓のように、セレクタの前にページ固有のclassを付記して使用します。
例：トップページからはてなスターを消す
/* トップページのみはてなスターとコメントボタンを消す */
.page-index .entry-footer {
display:none;
}
パンくずリスト
パンくずリストは当然ながらトップページにはありません。故に記事ページでパンくずリストを設定するとお使いのテーマによってはデザインが崩れることがあります。
はてなブログでは以前は公式のパンくずリストがなかったので、それに対応したデザインになっていないテーマが多いのです。。
はてなブログのパンくずリストの調整については過去に記事にしていますので、ご参照下さい。
はてなブログ公式機能のパンくずリストを表示したときの余白（margin）について - Minimal Green
はてなブログ公式パンくずリストを記事上、記事下に表示するカスタマイズ - Minimal Green
記事ページ固有のものはトップページに表示されない
記事上記事下部分やパンくずリスト、サイドバーの関連記事はその個別記事ページ固有の要素で、トップページには表示されません。サイドバーの関連記事はその記事のカテゴリーに対応したものが生成されます。
はてなブログを構成するページの種類を把握すると、カスタマイズも捗ると思います。
最近ちょこちょこ有償カスタマイズの依頼を受けています。結構はてなブログについては知っているつもりでしたけど、いろんなテーマやカスタマイズをいじっていると新たな発見があります。まだまだ勉強しないとなーと思います。特にスマホ版の仕様については初めて知ったことが多かったです。それについてはまた改めて記事にしたいと思います。
ブログカスタマイズは調べるとたくさん解説がありますのでじっくり勉強するのも面白いと思います。ですが、知識を使いこなせるようになるのはやはり手間なので、一発でブロガーっぽいブログにしたい！というときは有償カスタマイズのご依頼もご検討下さい。代行設置でブログデザインを整えます。
ブログカスタマイズ・サービスのご案内 テーマ制作・カスタマイズ設置代行 - Minimal Green
