stMind

about Tech, Computer vision and Machine learning

はてなダイアリーで副題をつける

デザインテーマを変えて、副題をつけてみた。
そこで自分の備忘メモを兼ねて副題を表示させる方法を書いてみる。
もっといい方法があるかもしれませんが参考になれば。

基本方針

「設定」→「日記全体の設定」にある日記のタイトルに副題を記述すると
タイトルと同じサイズになって副題っぽくならない。
なので、日記のタイトル(h1要素)を使わずに
ヘッダとスタイルシートを編集してタイトルと副題を作成することにした。

手順

  1. h1要素を非表示に

スタイルシートでh1要素を非表示にします。

h1 { display : none }
  1. ヘッダにタイトルと副題を追加

デフォルトで記述してあるdiv要素の前に追加します。
あとで微調整するためにブロックにしておきます。

<div class="myHeader">
<div class="myTitle">
<a href="http://d.hatena.ne.jp/ユーザ名/" class="myTitleLink">(日記タイトル)</a>
<a href="http://d.hatena.ne.jp/ユーザ名/rss"><img src="http://d.hatena.ne.jp/images/rss_wh.gif" alt="RSSフィード" title="RSSフィード" border="0" width="24" height="12" class="icon"></a>
</div>
<div class="mySubTitle">(日記の副題)</div>
</div>
  1. 微調整

ヘッダに記述したタイトルと副題の表示をスタイルシートで設定します。
ここは選択したデザインテーマによって変わりますので、僕が使っている
Pure-Sodaの例を示します。

まずはタイトルのフォントサイズと左マージンを指定。

div.myTitle {
 margin-left : 20px;
 font-size : 180%;
}

同様に副題のフォントサイズと左マージンを指定。

div.mySubTitle {
 margin-left : 20px;
 font-size : 120%;
}

タイトルと副題を含む自作ヘッダ領域にデザインテーマの背景画像を設定。

div.myHeader {
 margin-top : 5px;
 padding : 30px 0px 30px 0px;
 background : transparent url(/theme/pure-soda/header_image.gif) no-repeat scroll 0%;
}

あとはこまごまとしたところを色々。

/* タイトルのリンク下線を非表示に */
a {
 border-bottom : none;
}

/* RSSアイコンの表示位置調整 */
img.icon {
 margin-left : 4px;
}

/* タイトルの色 */
a.myTitleLink {
 color : #646464;
}

最終的に

ヘッダとスタイルシートはこんな感じになりました。

  • ヘッダ
<div class="myHeader">
<div class="myTitle">
<a href="http://d.hatena.ne.jp/ユーザ名/" class="myTitleLink">(日記タイトル)</a>
<a href="http://d.hatena.ne.jp/ユーザ名/rss"><img src="http://d.hatena.ne.jp/images/rss_wh.gif" alt="RSSフィード" title="RSSフィード" border="0" width="24" height="12" class="icon"></a>
</div>
<div class="mySubTitle">(日記の副題)</div>
</div>
<div class="main">
h1 { 
 display : none;
}

div.myTitle {
 margin-left : 20px;
 font-size : 180%;
}

div.mySubTitle {
 margin-left : 20px;
 font-size : 120%;
}

div.myHeader {
 margin-top : 5px;
 padding : 30px 0px 30px 0px;
 background : transparent url(/theme/pure-soda/header_image.gif) no-repeat scroll 0%;
}

/* タイトルのリンク下線を非表示に */
a {
 border-bottom : none;
}

/* RSSアイコンの表示位置調整 */
img.icon {
 margin-left : 4px;
}

/* タイトルの色 */
a.myTitleLink {
 color : #646464;
}

というわけで

以上です。
もっと簡単な方法はないのかな。