SAKMIS ≫ はてなダイアリー改造計画！

経緯

「はてなダイアリーでブログ始めたんだけどリンクの貼り方がわからないみょん。」
などと抜かした友人のためにわざわざアカウントまで取って研究を始めたのだった。

ウチの改造例を例にとって話は進みます。

何が起きても責任は負いかねます。
弄ってるウチにどこかおかしくなって再起不能になっても大丈夫。
スタイルシートを全部消してテーマを選び直してはい最初から。

栞

基本的に使われる文字色、背景色、スクロールバーの色の設定
 日記のタイトル文字色の設定
 見出し語文字色の設定
 アンカー文字の設定
 レイアウトの変更
 サイドバーにオリジナルモジュールを追加
 無料でアクセスカウンタを設置
 最後に

基本的に使われる文字色、背景色、スクロールバーの色の設定

ほら、SAKMISのスクロールバー（→）も普通と違うでしょ、これですよこれ。
はてなでも変えられるのですよ。
以下をスタイルシートにコピペ。
body { color: #ffffff;
background-color: #00aaaa;
scrollbar-arrow-color: #ffaacc;
scrollbar-track-color: #ffaacc;
scrollbar-3dlight-color: #cc88aa;
scrollbar-highlight-color: #cc88aa;
scrollbar-face-color: #cc88aa;
scrollbar-shadow-color: #880044;
scrollbar-darkshadow-color: #880044; }
カラーコードは#RRGGBBです。赤なら#ff0000、緑なら#00ff00、黄色なら#ffff00、と。
１行目、color、基本的に使われる文字の色です。
２行目、background-color、画面全体の背景の色です。
３行目以降、説明は不可。自分で弄って確かめてｗ
上から下へ色を暗くしていけばとりあえず悪くないかも。

日記のタイトル文字色の設定

超重要？ｗ
以下をスタイルシートにコピペ。
h1 { color: #ffaacc; }
説明無し。次っ。

見出し語文字色の設定

ウチの改造例で言う青い文字の色を設定します。
以下をスタイルシートにコピペ。
h2, h3, h4, span.title, div.hatena-moduletitle { color: #aaccff; }
説明は要らないかな。
これで色が変わってくれない見出し語があったら報告よろしく。（たぶんいくつもあるＯＴＬ

アンカー文字の設定

アンカー＝リンク。クリックするとどこかに飛ぶヤツ。SAKMISのメニュー（←）の文字がそう。
これが一番楽しいのではないでしょうか。
マウスポインタを合わせると色が変わるって面白いですよね。
以下をスタイルシートにコピペ。
a { font-size: x-small; font-weight: bold; }
a:link, a:visited { color: #aaffcc; }
a:link:hover, a:visited:hover { color: #008800; background-color: #aaffcc; }
１行目、font-size、まんまです。小さい方から順に、xx-small、x-small、small、medium、large、x-large、xx-large。
１行目、font-weight、文字の太さです。アンカーだからって太くなくてもイイという方は削りましょう。
２行目、color、通常時のアンカー文字色です。好きな色をどうぞ。
３行目、color、ポイント時のアンカー文字色です。２行目と違う色にしましょう。
３行目、background-color、ポイント時の背景色です。文字色と違う色にしましょう。ったりめぇだ！

レイアウトの変更

日記部分（以後「メイン」）とサイドバーの大きさなどを変更します。

背景にでっかい枠があって、その中にメインとサイドバーがあるようなテーマだとウマくいかないっぽい。（レイアウトが崩れる
ウチの改造例みたいに無地にでん、でん、でん、と枠を並べていくようなテーマなら可能。

以下をスタイルシートにコピペ。
div.hatena-body { width: 90%; }
div.main { margin-right: 37%; }
div.sidebar { width: 36%; position: absolute; top: 0; right: 0; }
１行目、widthの値は、はてな全体の横幅がウィンドウ全体の横幅の何パーセント使うかです。
２行目、margin-rightの値は、サイドバーを置くためにメインの横幅をどれだけ削るかです。
３行目、widthの値は、サイドバーの横幅です。２行目のmargin-rightと同じか１％減が理想的かと。

↑はサイドバーが右に表示される場合。左に表示する時はrightをleftにすればオッケー。……なんだろうか？（オィ

サイドバーにオリジナルモジュールを追加

はい、当初の某友人の目標です。
例としてLinksを作ってみましょう。
ページのフッタを見ると、
</div>
<div class="sidebar">
<hatena……
<hatena……
　：
　：
</div>
となっているハズです。（モジュールを使っている場合の話
<hatena……がサイドバーのモジュールの正体です。
今回はサイドバーの一番上にLinksを表示させたいので、<div class="sidebar">のすぐ下に以下をコピペ。
<div class="hatena-module">
<div class="hatena-moduletitle">Links</div>
<div class="hatena-modulebody">
<a href="http://www.susono.com/~sakmis/">SAKMIS</a>
<div class="about">私のメインサイト。……まぁこっちがサブってワケでもないけどｗ</div>
<a href="http://d.hatena.ne.jp/naruminamo/">飽くなき乙女道</a>
<div class="about">私にはてな改造法を研究する気にさせたスゴい人のブログ。</div>
</div></div>
２行目、-moduletitle">～</div>間がタイトルです。
-modulebody">～</div></div>間が自由に使えるスペースです。アナタのHTML力を存分に発揮させましょうｗ

今回はまだ終わりません。サイトの説明をするために、
「アンカー文字より小さくて、アンカー文字のすぐ下に表示されて、その下には若干の余白が空くような文字」
を用意します。ま、これはただの私のこだわりなので飛ばしちゃってもイイのですがｗ
今度はスタイルシートです。以下をコピペ。
div.about { font-size: xx-small; margin-top: 0; margin-bottom: 8; }
特に言うことはないかな？div.aboutというスタイルを勝手に作ってしまうだけです。
font-sizeは、サイト名よりサイトの説明のほうが小さくあって欲しいからここではxx-smallを指定しています。

無料でアクセスカウンタを設置

はてなダイアリーの有料オプションにアクセスカウンタがあります。
今回はそれを無料で実現してしまいましょ。

まずは広告の付かないレンタルカウンタを探す。（結構多数ある
はてなの規約に広告禁止とか書いてない気がするけど、無いにこしたコトはないでしょ。

ウチの改造例では忍者TOOLSのを借りてみました。選べるカウンタ画像は数百種。ウチのはノリです。

レンタルサイトの手順に従ってカウンタを借ります。
借りたらカウンタ設置用のHTMLソースをもらえるので、それをサイドバーのオリジナルモジュールにコピペ。
以下はウチでの例。
<div class="hatena-module">
<div class="hatena-moduletitle">アクセスカウンタ</div>
<div class="hatena-modulebody">
<a href="http://ct1.shinobi.jp/gg/0168778" target="_blank">
<img src="http://ct1.shinobi.jp/ll/0168778" border="0" alt="忍者TOOLS">
</a>
</div></div>
忍者TOOLSの提示したHTMLソースはもっと長かったんだけど、
scriptタグとnoscriptタグが入っていると私の環境では正常に表示されなかったので削りました。
はてなが裏で何かやってる、って可能性もありますが。
訪問者がJavaScriptに対応出来る環境である保証もありませんしね。

もう一つ、提示されたHTMLソースは、カウンタ直下に「アクセスカウンタ」と表示させるようになっていたけど、
あまりにも見栄えが悪いので削っちゃいました。
モジュールタイトルに表示させたからイイかな？なんて。
アンカーを削ったりaltを削ったりするのは流石に規約違反でしょうね。

最後に

うへぇ、終わった……。
ここまで読んでくれた人なら、
h2, h3, h4, span.title, div.hatena-moduletitle { color: #bbddff; }
ってトコを、
h2 { color: #ff0000; font-size: xx-large;}
h3, h4, div.hatena-moduletitle { color: #00ff00; }
span.title { color: #0000ff;  font-weight: bold; }
ってな風に書き換えちゃうコトも思いつけるのかなー？
スタイルシートはホントに柔軟性に富んでますからねー。
スタイルシートの勉強をすればネット上での表現力アップ！

このページの執筆に１時間くらいかけちゃったけど、報われるのかしら……？ＯＴＬ
感想とか聞きたいなー、「あんなコトしたい！」とか「ウマくいかない！」なんてのもウチのBBSで受付中。