ふとんのなかから

びまん性大細胞型B細胞リンパ腫にかかったあとだらだらしている人のブログ

はてなCSSの覚え書き

有り物のテーマを大規模改造したいときの手順。

  1. 自分のブログを好きなテーマに変更し、ブラウザから適当なフォルダに画像を含めて全て保存する。
  2. htmlファイルをテキストエディタで開く。
<style type="text/css">から</style>までの部分がスタイルシートなので編集する。
  1. htmlファイルをブラウザで表示させる。満足いくまで編集&表示を繰り返す。
  2. 完成したらスタイルシート部分をコピーする。
  3. はてなダイアリー設定画面を表示させ、テーマを「指定なし」に変更し「スタイルシート欄」にコピーしたスタイルシートを貼り付ける。
  4. おしまい。

便利なテクニック

  • paddingには背景画像を入れられる。

はてなヘッダのpaddingを広げて画像を表示させることができる。

  • marginやpaddingでは置けない場所にサイドバーなどを置きたい場合はposition: absolute;を使う。

→パラメータ(topやleft)にマイナス位置を指定できるので「h1要素の上にサイドバーを置く」といったことができる。