murmure

美貌録。

2012-01-25

はてブロカスタマイズ

この2日間仕事そっちのけでやっていたのがはてなブログのカスタマイズです。
ブログ始めたいと言ったら某蝉ミキサーさんが無責任にもはてなブログがいいよ」とおっしゃってくれたので
慣れ親しんだFC2を捨て新天地ではじめてみることにしました。
デザインなんですがはてな側で用意されてるのが4タイプしかない。
これでも全然いいんですがどうせなら愛着湧かせて長続きさせたいので
自分でカスタマイズすることに。以下簡単に記録。

参考にしたのはこちらのサイト様。
そっとプロジェクト@Wiki:はてなブログのデザインのカスタマイズ
http://www19.atwiki.jp/sotto_project/pages/224.html

HTMLはこちら。
http://tikeda.hatenablog.com/entry/2011/11/07/224858

デザインはこちらから。
http://theme.hatenablog.com/
id:swimy1113氏のCSSを元にいじっていきました。

背景に画像を入れただけでテキストを非表示にするとリンクがなくなります。
僕は一番上の画像からトップページに飛べないサイトはクソだと常々思っているのでそれは避けたかった。

そこで参考にしたのがこちら。
MoloTech Blog:はてなブログで、ロゴタイトルを設定したい
http://molo.hateblo.jp/entry/2011/11/14/113551
#blog-descriptionはdisplay:none;にしてあります。
あとコメント関連も調整が面倒くさかったので非表示にしてありますw

最後の方で躓いたのが記事が複数になると左右のカラムの高さが合わなくなる
(右のカラムが古い記事の上辺に並ぶ形で下に落ちる)件です。
これだけは本職の人(半ニート)(元彼)にアドバイスをいただきました。
#contentのwidthを指定してposition: relative;した上で
#box2に
display: block;
position: absolute;
right: 0px;
top: 0px;を追加で治りました。floatはいらないらしい。
本職の人が見たらちょろいんでしょうけど覚書として。

という感じでCSSはできました。
素人なのにここまでできちゃった!(たいしたことない)

あとは画像ですね。
素材は以下のサイト様からお借りしております。
フリー素材*ヒバナ *  *
Retrofan(レトロファン)
シルエットデザイン

おまけに
$takc923->write($weblog);:はてなブログの広告を目立たなくする方法
http://takc923.hatenablog.com/entry/2011/11/28/003817
広告がだいぶ大人しくなってくれました。

という感じでできたよわーい
ChromeFirefoxでは確認しました。バージョン?知らね。IE?死ね。
CSSをこんなに触ったのは初めてなので勉強になりました。ありがとう蝉さん。
これで僕も気持ち悪いと噂のはてな民デビュー!
満足したので次の更新の目処はたってません。