ぼくの詳細デザイン設定(1)〜テーマのCSSと下準備

というわけで、昨日のつづき。
他のソフトだと「スキン」なんて言ったりしますけども。デザインのセンスとスキルのある人ならこういうものをパッと作れてしまうんでしょうが、あいにくぼくにはデザインセンスの“デ”の字もないので、本館のほうは色を少々いじってみただけの殺風景なサイトになっちゃってます。こちらではデザイナーの人(ですか?)が作ってくれたテーマがたくさん用意されていたので、いろいろ見栄えを変えてみることができて楽しかったです。
さて、その中から「これだ!」と選んでみましたが、何から何まで望みどおりとはいかないわけですね。細かいところでちょこちょこと気になることが、やっぱりありました。はてなダイアリーでは「詳細デザイン設定」でそのあたりの修正がきく、とのことでしたので、さっそくやってみることに。

ぼくが選んだテーマは「Hatena_sunflower」。これを土台にして、気になるところに変更を加えます。はてな記法に慣れていないのでうまくいってなければすまんですが、このテーマ名から別ウィンドウでテンプレートのページを開けられたら、ぼくのページと見比べて、いったいどこをいじったか探してみてください。

テーマのスタイルシートを覗いてみる

ウェブページのデザインはスタイルシートで設定されているので、それを見ないことにはどこを直せばいいかもわからないんですが、そのためには下準備が必要です。
(1)「窓の手」と「ttPage」という2つのフリーウェアをインストール。
(2)窓の手を起動し、「ie(1)」タブの「ソースを表示するエディタ」にttPageを登録し(「参照」ボタンからインストール先にあるプログラム本体を指定します)、「設定反映」ボタンを押して「閉じる」。
これによって、ブラウザの「ソースの表示」でttPageが起動してウェブページのHTMLソースを読むことができるようになります。
なんでわざわざこんな遠回りを、と思われるかもしれません。これをしないと、「ソースの表示」の際に「メモ帳」が立ち上がるんですけど、メモ帳がはてなダイアリーで使われている文字コードに対応していないために、ソースが文字化けして読めないんですよね。文字化けさえしなければいいわけだから、「ソースを表示するエディタ」は複数の日本語文字コードに対応したテキストソフトなら何でもかまいません。
そうしてソースを表示したら、次に、そのソースのはじめのほうに書かれている、

<link rel="stylesheet" href="http://d.hatena.ne.jp/theme/ほにゃらら.css" type="text/css" media="all">

とあるのを探します。この「ほにゃらら」にはテーマの名前が入ってましたが、この「http://d.hatena.ne.jp/theme/ほにゃらら.css」の部分が、そのテーマのスタイルシート(のあるアドレス)。これをブラウザの「アドレス」フィールドにコピー&ペーストしてEnterを押すと、スタイルシートがダウンロードされ、メモ帳で開かれます。メモ帳の「ファイル」メニューから「名前を付けて保存」を選び、デスクトップにでも置いときましょう。
このスタイルシートを先ほどのttPageか何かソースを見るのに使ったソフトで開くことで、ようやく、テーマのスタイルシートを読むことができるようになりました。


……と、ここまで書いてずいぶん時間をとってしまいましたので(^^; つづきは次回。