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

はてなダイアリーガイド「ヘッダやフッタに何かを入れる」

ガイドトップへ・ ガイドトップ ・ 目次 ・ 索引

ヘッダやフッタに何かを入れる

(ヘッダとフッタ自体の説明は活用編「ヘッダとフッタ」からご覧ください。)

『管理ツール > デザイン > 詳細デザイン設定』のヘッダ欄やフッタ欄を見ると、なにやら<divナントカとかいう文字列が書いてあります。それの意味については飛ばしますが、それを消すと日記の表示が崩れちゃうのでご注意ください。ヘッダやフッタをいじるときは、前の状態をどこかにコピーして保存しておきましょう。

さて、文章やモジュールのタグをヘッダ・フッタ欄に書きたいとき、まずこの欄のどこに書けばいいのでしょうか。一般的なテーマで、“かんたんデザイン設定でサイドバーを表示した状態”で、ヘッダ欄とフッタ欄は下のようになります。(サイドバーがない状態の初期設定では、ヘッダに<div class="main">、フッタに</div>があるだけですが、(1)〜(4)の表示位置の説明はだいたい同じです。)

ページのヘッダ(HTMLタグ利用可)

(1)日記のタイトルのすぐ下・日記本文とサイドバー両方の上
<div class="main">
(2)日記本文の真上

ページのフッタ(HTMLタグ利用可)

(3)日記本文の真下
</div>
(4)日記本文とサイドバー両方の下
<div class="sidebar">(5)↓ここから下、サイドバーの中
<hatena template="hatena-module" name="xxxxxxxx"> ←モジュールのタグ
<hatena template="hatena-module" name="xxxxxxxx"> ←モジュールのタグ
</div>(5)↑ここから上、サイドバーの中
(4)日記本文とサイドバー両方の下

<div class="main">から</div>までが、サイドバーと並んでいる部分、つまり日記の本文やコメント欄がある部分です。<div class="sidebar">から</div>までが、サイドバーになります(これが基本)。

(1)〜(5)の説明は、その場所に書き込んだものが(一般的なテーマを使用しているとき)日記のどこに表示されるかです。どこに書き込むかで、表示される場所がまったく変わってきます。

(1)日記のタイトルのすぐ下・日記本文とサイドバー両方の上

一番目立って、日記の雰囲気を左右する部分です。ここは配置の自由度が高いのですがそれだけに、スタイルシートやHTMLの知識が必要になってきます。入れたいものが文章なのか画像なのかモジュールなのかで方法が変わってきますし、ものを「横にふたつ並べる」だけでも案外いろいろな方法があって“こうすればいい”となかなか言いにくいところです。なので簡単な見栄えの整え方だけご紹介します。

文字が左端にくっつかないようにする。

ここに文字を打ち込むと、文字がページの左端にくっついたところから始まってしまうテーマがあります。そんなことは気にしないという人もかっこいいですが、ちょっと日記の体裁を整えたい場合は以下のようにしてみてください。

<div class="main">
〜書きたい文章〜
</div>

または

<div class="main">
<div class="day">
〜書きたい文章〜
</div>
</div>

日記本文はこうしたタグで囲まれていて、それと同じことをしてやることで、同じスタイルシートの指定が適用されるようにしてやるのです。ページの端からどのくらい空けるとか、文字の大きさはどれくらいかといった指定が日記本文になされていれば、それと同じ指定が適用されるようになるでしょう。

(これでダメでしたら)

<div class="header">
〜書きたい文章〜
</div>

というふうにして、スタイルシート欄に

div.header {
 margin-right: 5%;
 margin-left: 5%;
}

を追加。5%の数字は適当に調整できます。

(2)日記本文の真上

ここの下に日記の本文が来ます。わりとデザイン的にまとめやすい部分です。

中央ぞろえにする

<div align="center">
<p>〜書きたい文章〜</p>
<p>〜書きたい文章〜</p>
</div>

のようにしていくと、日記本文の横幅の範囲で、中央揃えになります。

日記本文と同じような見栄えに

<div class="day">
<h2><span class="title">タイトル(いらなければこの行は無くても)</span></h2>
<div class="body">
<div class="section">
<h3>見出し(いらなければこの行は無くても)</h3>
<p>〜書きたい文章〜</p>
<p>〜書きたい文章〜</p>
</div>
</div>
</div>

のようにしていくと、日記本文の見栄えに近い形で、枠やタイトルがつくなどして表示できるでしょう。

(3)日記本文の真下

日記本文やコメント欄のあとに続く部分です。サイドバーを使っている日記でフッタを利用する場合は、ここを使うのがデザイン的にまとまりやすいでしょう。(これといったテクニック紹介は……思いつきませんでした)

(4)日記本文とサイドバー両方の下

日記の底です。サイドバーにモジュールなどがたくさんあって縦に長い日記では、ここはサイドバーが上にかぶさって表示が邪魔されることがあります。

サイドバーがかぶらず、さらに下に配置されるようにもできることはできるのですが(スタイルシートを含めたけっこうな大改造になり、HTML構造も一般的でなくなって、よく分かる方でないと改造しにくくなりますので)ここでは紹介しません。サイドバーを使っていてフッタになにか書きたい時は、(3)の場所に書いたほうが無難でしょう。

(5)サイドバーの中

<div class="sidebar">から</div>までの間にあるものが、サイドバーの中身になります。ここについては「サイドバーに何かを入れる」のほうをご覧ください。


はてなダイアリーのHTMLに戻る← | →サイドバーに何かを入れるに進む