ふにゃるんv2

もとは、http://d.hatena.ne.jp/Wacky/

はてなダイアリーのスタイルを若干改造するコツ

tips

思い立ったが、吉日という訳で、はてなダイアリーのスタイルを若干改造する。
目的は、とりあえず右段落の横幅を、もう少し縮める事。

スタイル
スタイル posted from フォト蔵


では、スタート。

1.スタイルシートを、ぶっこ抜く

最初に、今適用されているスタイルシートを ぶっこ抜いて、スタイルの構造を把握する。
上で示したように、現在のページを「Webページ、完全」にて取り込む。
すると、「ふにゃるん.files」フォルダに、pict.css ファイルがあるので、エディタで開く。

2.右段落のスタイルを把握する

右段落のスタイルって、どこに記述されているか、って言うと、↓ここに回答が書かれている。


つまり、sidebar クラスが定義されている訳。
「sidebar」を検索すると、すぐに見つかる。

.sidebar {
	PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 90%; RIGHT: 25px; PADDING-BOTTOM: 0px; MARGIN: 0px; WIDTH: 240px; PADDING-TOP: 0px; POSITION: absolute; TOP: 135px
}

上で、"WIDTH: 240px;"って書かれている所が、右段落の横幅を決定している所。

3.管理画面のスタイル設定で、スタイルを弄る

このファイル(pict.css)を直接弄ってもいいのだけど、少し修正するだけなのに、そんな面倒な事はしたくない。
ってんで、ちょいちょいっと弄ってすませる事にする。
ここいら辺のスタイル指定は、はてなダイアリーの管理画面の、詳細デザインの下の方にある「スタイルシート」部で行う。

スタイル
スタイル posted from フォト蔵

下の方に、「スタイルシート」ってのがあるが、ここにスタイル設定をかけると反映される。
実際には、はてなダイアリーでHTML出力された際のボディに反映される。

4.スタイル指定で、横幅を弄る

早速スタイルを弄る。
こんな感じに。

.sidebar {
	width: 80px;
}

早速「プレビュー」ボタンで見る。

スタイル
スタイル posted from フォト蔵


ダメじゃん。
右段落の横幅は確かに細くなっているけど、本文が追従してないじゃん。がぁん。

5.全ブロックに枠線を入れて、問題箇所を追跡する

何かが邪魔して、本文と右段落の間に「隙間」が空いていると推定する。
で、何が邪魔しているのか？追跡する方法として、コードを一々眺め回すのもあほらしいので、全ブロックに枠線を入れて、問題箇所を推定しやすくする。


スタイル指定の最下行に、以下のコードを追加する。

* {
	border-style: dotted;
	border-width: 1px;
	border-color: red;
}


これでプレビューすると、以下のように、全ブロックが枠線表示される。
スタイル
スタイル posted from フォト蔵


これで眺め回してみると、本文と右段落の間に、余計なブロックが入ってない。(入っている場合、このブロックの幅を短くすれば解決する)
という事は、本文自体が、特定のサイズに収まるように指定がかかっていると想定できる。

6.本文のスタイルを特定する

次は、本文のスタイルが何で指定かけられているか特定する事だ。
ここで、右クリックメニューの「ソースの表示」を使って、HTML文書コードを眺める。


この時、どこに当たりを付けるか？という問題がある。
必要なのは、本文の一番外枠(下図の矢印の部分)だ。

スタイル
スタイル posted from フォト蔵


外枠のブロックの外と中に、何の文があるかというと、「ふにゃるん」と「＜前の5日間」という文がある。
外枠は、この辺りであろうと当たりを付け、とりあえず「ふにゃるん」で検索する。


すると、早速↓こんなのが引っかかる。

</table>


<h1>ふにゃるん</h1>
<div class="hatena-body">
<div class="main">

<div class="calendar">
	<a href="/Wacky/designdetail?of=5">&lt;前の5日分</a>&nbsp;
</div>

<div class="day">

H1タグで囲まれた「ふにゃるん」の後、

  1. "hatena-body"指定をかけたDIVタグ
  2. "main"指定をかけたDIVタグ

が続き、「前の5日間」に到達している。


という訳で、外枠は "hatena-body"指定のDIVタグか、"main"指定のDIVタグの どちらか、と想定できる。
で、上の図を眺め回してみると、

  • 「ふにゃるん」全体を囲む枠線は、下の枠線と完全に上下に切り離されている事がわかる。
  • 更に、下の枠線は、画面一杯に伸びた枠線と、「前の5日分」までの3/4くらいまで伸びた枠線の2種類がある事がわかる。

ここから推定できるのは、

  • 「ふにゃるん」のH1タグの後、全体を囲む外枠と、3/4を占める外枠がある
  • 順番に考えて、"hatena-body"が全体を囲む外枠で、3/4を占める外枠は"main"で無いだろうか？

と想定できる。


じゃぁ、ってんで 早速確かめよう。
スタイルシート欄に、更に以下を追加する。

.main {
	border-color: blue;
}


プレビュー。
スタイル
スタイル posted from フォト蔵

どうやらビンゴのようだ。


pict.cssの"main"を検索すると、以下のコードが見つかった。

.main {
	LEFT: 0px; MARGIN: 0px 250px 0px 0px; WIDTH: auto; POSITION: relative; TOP: 0px
}

上の"MARGIN"で、"250px"と書かれている箇所がある。

ここを参照すると、右に250ほど幅を空けている事がわかる。つまりですな、こいつが本文と右段落のスキマの正体だった訳。

7.修正、そして完了

原因がわかれば、対応は早い。
スタイルシート欄に、修正コードを突っ込む。

.main {
	margin-right: 200px;
}

大分、スキマが減ったでしょ？
スタイル
スタイル posted from フォト蔵


後は、適当に調整して終わり。
スタイルシート欄には、最終的には、以下を追加した。

.sidebar {
	width: 160px;
}
.main {
	margin-right: 170px;
}
DIV.hatena-module {
	margin-left: 5px;
	margin-right: 0px;
}

スタイル
スタイル posted from フォト蔵

まぁ、こんなもんかな？