Firebug を使ったCSSカスタマイズ作業の一連の流れ

Firebug を使った WordPress.com ブログのCSSカスタマイズ作業の一連の流れについての覚書です。

firebugedit10

ここでは、CSSを修正して、下図の「続きを読む→」と「更新情報など(調整中)」の間のスペースを空けることを考えてみます。

firebugedit01

まず、Firebug のアイコンをクリック。

firebugedit02

すると、Firebug が起動します。

firebugedit03

下図のアイコンをクリックし、

firebugedit04

CSSを修正したい箇所にカーソルをあてると、青い枠が表示され、

firebugedit05

該当部分のHTMLの背景が青くなります。

firebugedit06

HTMLの方をクリックすると、

firebugedit07

該当部分の表示が下図のように色付けされます。ちなみに黄色い部分が margin、紫色の部分が padding を示しています。

firebugedit08

HTMLをいろいろとクリックして、

firebugedit09

上にスペースを空けるにふさわしそうな箇所を見つけます。このあたりは経験を積めば、だんだんわかってくると思います。

firebugedit10

右側の欄に該当部分のCSSが表示されます。

firebugedit11

例えば、上側の margin を 10px に修正すると、

firebugedit12

下図のようにブログの表示も変更され、スペースができます。

WS000926

修正したCSSをコピーし、

firebugedit13

WordPress.com の「外観」→「カスタムデザイン」をクリック。

firebugedit16

タブ「CSS」をクリックすると、

firebugedit17

「CSSスタイルシートエディター」が表示されます。

firebugedit18

編集欄の一番下の方にCSSを貼り付け、

firebugedit14

「スタイルシートを保存」をクリックすると、

firebugedit15

CSSの修正内容がブログの表示に反映されます。

firebugedit19

なお、第三者に公開するときには、Google Chrome, Firefox,Safari,Internet Explorerなどで表示状態を確認するとよりベターかと思います。

firebugedit20

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。