ヘッダ部

div.adminmenu

ようこそゲストさんログイン

部を出力しています。標準では右寄せになっていますが、例えばumiテーマなどでは位置やメッセージを変更しています（メッセージ変更はIE非対応）。

<span class="welcome">
  <span class="welcome-prefix">ようこそ</span>
  <span class="welcome-name"><a class="guest">ゲスト</a></span>
  <span class="welcome-postfix">さん</span>
</span> 
<span class="admin-links">
  <span class="adminmenu"><a class="login" href="?login"><span>ログイン</span></a></span>
</span>

div.adminmenuについている「id="simple-header"」ははてな互換のための要素です。使用しないでください。

span.welcome

前半部の「ようこそ○○さん」の部分です。ログイン時はユーザー名の部分がリンクとなることがあります（IDに対応する日記帳があるときリンクになります）。

また「ようこそ」の部分もリンクになっています。通常トップ画面へ移動します（シングルモードのときはディフォルトIDの日記帳が表示されます）。

span.admin-links

ログインや、管理者用のリンク「日記を書く管理ログアウト」が表示されます。各要素は<span class="adminmenu"><a href=""><span>～～～</span></a></span>となっています。中の空span要素は、before: afeter: 擬似要素をリンクを書き換える際に利用しますが、通常は気にする必要はありません。

要素はいくつ表示されるかわかりません*1。間に区切りを表示する場合は、最終要素に"last"クラスが出力される（Ver1.44～）ことを利用して次のようにします。

span.adminmenu {
	padding-right:	0.3em;
	border-right:	1px solid #555;
}
span.adminmenu.last {
	border-right:	none;
}

追記

間に区切りを表示するもう一つの方法として、first-child疑似要素を利用します。konomiテーマでは以下のようにしています。（Ver1.44未満でも有効ですが、IEが:first-childに対押ししていないためIE非対応です。）

span.admin-links span {
	border-left:	1px solid #555;
}
span.admin-links span:first-child {
	border-left:	none;
}

a.newcome-mark

新着のコメントやトラックバックがある際に「管理」の横に表示される『♪』マークです。このマーク自体は「管理」のspan要素内に出力されます。

<span class="adminmenu">
  <a class="diary-admin"><span>管理</span></a>
  <a href="xxx" class="newcome-mark"><span>♪</span></a>
</span>

div.page-title

ページタイトル部です。中の要素はH1のみになります。

<div class="page-title">
<h1><a href="<@v.myself>">ページタイトル</a></h1>
</div>

リンクのa要素はないことがあります。

タイトル部に特定の画像を使う場合は、div.page-title自体に背景として幅と高さを取り、その要素内の任意の位置にh1要素をタイトルとして配置するという使い方が多いようです。

またタイトルの文字列を文字ではなく画像で指定することもでき（日記帳の設定）、その場合は次のようになります。

<div class="page-title">
<h1><a href="<@v.myself>"><img src="タイトル画像のURL"></a></h1>
</div>

関連記事