CSSをリアルタイムに確認しながらカスタマイズするのならChromeだけで十分だった件

ブログやHTMLサイトをカスタマイズするためには、ある程度CSSの知識が必要だったりするわけですが、初心者にとって大規模なカスタマイズは案外大変だったりしませんか?

私もHTMLやCSSに関して知ろうとなワケで、ちょっとしたカスタマイズだったらいいんだけど、大規模なサイトイメージチェンジの時なんかは結構大変なの・・・

            ____   _____      みんな大丈夫かお?
           /      \/        \       ‐-、
     、-‐   /⌒   ⌒        ⌒   ⌒\   ___,ノ-、
   、- !、,__/(● ) (● )  彡   ( ●) ( ●)ヽ    ___,ノ
   !、,___ l  (__人__)           (__人__)   |
        \ `⌒ ´     彡      ⌒´   /
         /                       ヽ

例えば私の場合Wordpressを利用してブログを運営しているんだけど、大規模カスタマイズが必要な時には「CSSをちょっといじる」⇒「スタイルシートを更新する」⇒「ブラウザをリロードしてチェックする」の繰り返し・・・

またいじった部分の整合性が取れてないと、こちらを直せばあちらが崩れるって感じで面倒だったりするの。

そこで便利なのが、CSSやHTMLをリアルタイムにプレビューしながらカスタマイズできるサービスやツールです。

有名なところではCSSDeskとかEmmet LiveStyleなどがありますけど、私の場合ブラウザのGoogle Chromeだけで十分だったって話です。


             /)
           ///)
          /,.=゙””/
   /     i f ,.r='”-‐’つ____     Chromeで十分だおwww
  /      /   _,.-‐’~/⌒  ⌒\
    /   ,i   ,二ニ⊃( >). (<)\
   /    ノ    il゙フ::::::⌒(__人__)⌒::::: \
      ,イ「ト、  ,!,!|     |r┬-|     |
     / iトヾヽ_/ィ”\      `ー’´     /

Chromeでのカスタマイズだったら手軽だし、ビジュアル的にもとてもわかりやすいので、オススメですよ。

Google ChromeでCSSをカスタマイズする方法

やり方は簡単♪

ブラウザGoogle Chromeを持っていたら、自分がカスタマイズしたいURLを開いて【右クリック】で、【要素を検証】を選ぶだけ!!

簡単でしょ?


               ∩_
              〈〈〈 ヽ 簡単だおww
      ____   〈⊃  }
     /⌒  ⌒\   |   |
   /( ●)  (●)\  !   !
  / :::::⌒(__人__)⌒:::::\|   l
  |     |r┬-|       |  /
  \     ` ー’´     //
  / __        /
  (___)      /

あれ?不親切すぎました?

それじゃ、もう少し詳しくカスタマイズ方法をご紹介しますね。

もう少し詳しく

それでは、ブラウザGoogle Chromeで自分のCSSをカスタマイズしたいURLを開いて【右クリック】⇒【要素を検証】を選んでみましょう。

下のような画面が表示されました?

要素を検証

この画面では、上側の窓には自分のサイトがプレビューされていて、下の窓にはHTMLとCSSが表示されていると思います。

この「要素を検証」の窓ではElementsのタブを開いて左側がHTMLソースが表示されているんだけど、ここで任意のHTMLタグをマウスオーバーすると、上の窓のプレビューで「そのタグがサイトのどこに対応するのか?」がビジュアル的に明示されて、クリックすると右側の窓に対応するCSSが記述されている位置が表示されます。

例えば、この例で「Blockquote」で囲まれた部分をマウスオーバーしてみます。

マウスオーバー

これで、自分がどこをカスタマイズしたいのかがスグに解りますね。

例えば、ページのどの場所のどの要素を変更したいのかスグに解らないときとかに便利だし、この例ではBlockquoteだからすぐにわかるかもしれないけど、DL・DT・DDのマージンを変更したいんだけど、その定義要素のマージンを変更すればいいのか解らない・・・なんて時にとても楽チン!!

どの要素をカスタマイズしたいのかが解ったら、その要素をクリックすると右側に関連するCSSが表示されます。

それでは、例の画像のBlockquoteのPaddingを右側の窓で書き換えてみます。

Padding変更

ね?

変わったでしょ?


         ____
        /⌒  ⌒\
      / (⌒) (⌒)\  どこをイジればいいか
     /  ::⌒(__人__)⌒::: \  スグにわかるおwww
     |       |::::::|   ,—、
     \       `ー’   しE |
     /           l、E ノ
   /            | |
   (   丶- 、       ヽ_/
    `ー、_ノ

後は「Sources」のタブで変更したCSSをコピーして自分のサイト・ブログのCSSを書き換えればOKです。

ちなみにこの「Sources」のタブは、そのままだと何も表示されていないので、キーボードで「Ctrl+O」を押下して任意のCSSファイルを呼び出します。

Sources

ここで選択したファイルは、先ほど更新した内容が反映されているものになっているので、これをコピーしておけばいいですね。

まぁ、あまりにもCSSが複数ファイルに分割されているときは、どれを開けばいいのかわかりにくいかもしれませんけどね。

最後に・・・

あまりHTMLやCSSのコーディングに慣れていないと、どこを変更すればいいのか、何をすると何処に影響があるのかスグには解らないものですよね。

そんな時に、いろんなツールを入手して試してみるのも一手ですけど、Google Chromeだったら簡単に試してみることができるので、一度試してみてはいかがでしょうかね?

正直私は自分が所有しているサイトをカスタマイズするときに、いろんなツールを歴代試してみたんだけど、結局Google Chromeが一番楽チンで解りやすかったの・・・ってオチです。



いいよね?

最後まで私の拙いエントリーを読んでいただいてありがとうございます!
もしもこの記事が少しでもあなたのお役に立てたなら、ぜひ「いいね!」していってください。
また何か新しい発見をお届けできるかもしれません。

何か見つかるかもね

関連記事

コメント

※コメントは承認制ですので、表示されるまで時間がかかる場合があります。
  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

オススメ鯖


高速かつ高機能で、しかも安定性抜群!!
私も利用させていただいてますわ

My Tumblr

    http://deltablog01.tumblr.com/post/77273138691http://deltablog01.tumblr.com/post/76325997079http://deltablog01.tumblr.com/post/75899137417http://deltablog01.tumblr.com/post/75253777050

BlogParts

あわせて読みたい

Share Me! Please!!!

このエントリーをはてなブックマークに追加
ページ上部へ戻る