スマートフォン用の表示で見る

はてなダイアリーガイド「ヘッダとフッタ」

ヘッダとフッタ

『管理ツール > デザイン > 詳細デザイン設定』に『ページのヘッダ(HTMLタグ利用可)』『ページのフッタ(HTMLタグ利用可)』という欄があります(以下、ヘッダ欄・フッタ欄と書きます)。ここに書いた内容は、以下の部分に反映されます。

ヘッダ欄の範囲
『日記のタイトル』の後から『<前の○日分 | 次の○日分>』の前まで
フッタ欄の範囲
日記本文と『<前の○日分 | 次の○日分>』の後

試しに自分の日記のヘッダ欄・フッタ欄に何かを書いて、「この内容に変更する」してみると、日記のどこに反映されるのかがわかると思います。

  • 【補足:サイドバーはフッタ】かんたんデザイン設定で作るサイドバーは、フッタにできます。そのままなら日記本文の下に表示される部分を、スタイルシートを使って日記本文の横にくるようにしているのです。日記をソースで見ると、サイドバーの内容は日記本文の後にあるのがわかります。
  • 【補足の補足:ソースを見るって?】 ソースを見る方法はご覧の環境によって違いますが、パソコンのブラウザではページのどこかを右クリックや、controlキーを押しながらクリックするなどして“ソースの表示”といったメニューを出して選ぶと、表示できると思います。普段は表示されないHTML等の情報を読むことが出来ます。ブラウザはその情報に基づいて、人が読む画面を表示しています。

ヘッダに書くか、フッタに書くか

文字通り、ヘッダは“頭”でフッタは“足”です。例えばブラウザはページのソースを“頭”から読み込んでいきます。また音声ブラウザでは、ページの先頭から順に文字が読み上げられていきます。たとえスタイルシートで見た目の上下が変わったとしても、ヘッダとフッタの、文書としての“前後関係”は変わりません。

こうしたことから、ある内容をヘッダに書いたほうがいいか、フッタに書いたほうがいいかを判断できます。

「ヘッダ」の利用例

日記本文よりも先に読んで欲しいような重要なことを書くのに適しています。

日記の説明

自己紹介やサイトポリシーに関するちょっとした文章を書いたり、もっと詳しく書いた日付やプロフィール画面へのリンクを表示したり。

読者へのお知らせ

イベントの告知や、「○日まで更新を停止する」といった連絡事項。

日記のメニュー

カテゴリーのリストなどを置いて日記のコンテンツを紹介するなど。関連ガイド:活用編「ヘッダにカテゴリーのリストを作ってみる。」。

メモ

自分が絶対忘れてはならないことをメモしておくという、個人的な使い方。

「フッタ」の利用例

補足的なことや、読み込みを後回しにしたい内容を置くのに適しています。

署名

フッタに自分が書いたという署名や連絡先を書いておくと、すべての日付に表示されるので便利です(参考リンク:「The Web Kanzaki」 - 署名しよう)。関連ガイド:活用編「フッタにメールアドレスを書いてみる」。

カレンダーなどのモジュール

かんたんデザイン設定で(サイドバーに)表示できるものは、だいたいフッタ向きだと思います。

過去の文章へのリンク

記事一覧ページへのリンクを張ったり、はじめて日記を読む人におすすめの文章にリンクを張ってまとめたり。これは紹介代わりにヘッダでもいいかも。

重たい画像

ヘッダに必要な画像ならヘッダで良いですが、表示に時間がかかるものは、なるべく後まわしにすると読者が読みやすく、アクセスされやすいページになります。

calendar2jphotoモジュール

Flashを使うので、パソコンの処理能力によっては展開にとても時間がかかることがあります。これもアクセスしやすくする対策です。

ヘッダ・フッタで使えないタグについて(scriptタグやembedタグ)

はてなダイアリーではセキュリティ上の問題などから利用できないようになっているHTMLタグがあり、使える物だけがはてなダイアリー利用可能タグに掲載されています。

このため、外部のアクセス解析やカウンター、電子ペットや時計表示などで、scriptタグやembedタグを使ったサービスは利用できません。他のブログサービスで使えるところがあるので、とてもよく見かける問い合わせなのですが、使えないのです。セキュリティ方針なので、使えるようにしてほしいという要望があっても、ちょっと無理かも。

より詳しくは

より具体的な方法はHTMLのタグに少し慣れたあとのほうがいいかもしれませんが、活用編「ヘッダやフッタに何かを入れる」や「サイドバーに何かを入れる」をご覧ください。


はてなダイアリーガイド・活用編目次に戻る← | →過去日記・未来日記を利用するに進む

目次