ウェブ学のすすめ

Study of Web Design & Programing

はてなダイアリーのCSSを簡単にカスタマイズする方法

通常、はてなダイアリースタイルシートを変更するには、
管理画面から「デザイン」→「デザイン編集」に進み、スタイルシート欄にCSSを書いて
プレビュー」または「この内容に変更する」を選択します。

しかしいちいちスタイルシートを書いてはプレビューで確認していると大変です。特にサイト全体のデザインを変更するときには時間がかかります。

そこでGoogle Chromeデベロッパーツールを使用します。

Google Chromeデベロッパーツールを使うには

右上スパナマークをクリック

「ツール」をクリック

デベロッパーツール」をクリック

  • Ctrl + Shift + I
  • F12

でもデベロッパーツールを開くことができます。

デベロッパーツールの使い方

↓左画面:HTML、右画面CSS

↓HTMLを選択すると実際のブラウザ上の該当箇所に色が付いて対応が分かります。またその箇所に指定されているCSSも表示されます。

↓左下のボタンをクリックすると別ウィンドウにデベロッパーツールを表示させることができます。

↓デザインを変更したい周辺で右クリック、「要素を検証」をクリックすると該当箇所のHTML、CSSが確認できます。

CSSデベロッパーツール内で変更、追加することができます。そのプレビューをすぐブラウザ上で確認することができます。文字色や背景色の変更などに便利です。

デベロッパーツール上で変更してもはてなダイアリーには反映されていないので変更したところはメモ帳などにコピーしておき、まとめてはてなダイアリー内のスタイルシート欄にペーストします。