はてなCSSの覚え書き
有り物のテーマを大規模改造したいときの手順。
- 自分のブログを好きなテーマに変更し、ブラウザから適当なフォルダに画像を含めて全て保存する。
- htmlファイルをテキストエディタで開く。
<style type="text/css">から</style>までの部分がスタイルシートなので編集する。
- htmlファイルをブラウザで表示させる。満足いくまで編集&表示を繰り返す。
- 完成したらスタイルシート部分をコピーする。
- はてなダイアリー設定画面を表示させ、テーマを「指定なし」に変更し「スタイルシート欄」にコピーしたスタイルシートを貼り付ける。
- おしまい。
便利なテクニック
- paddingには背景画像を入れられる。
→はてなヘッダのpaddingを広げて画像を表示させることができる。
- marginやpaddingでは置けない場所にサイドバーなどを置きたい場合はposition: absolute;を使う。
→パラメータ(topやleft)にマイナス位置を指定できるので「h1要素の上にサイドバーを置く」といったことができる。