ブログ運営

ブログデザインの微調整は、Google Chromeの「要素の検証」で行っている

ブログのデザインを微調整する時には、Google Chromeの「要素の検証」を利用しています。

ブラウザのGoogle Chromeを使用している時に右クリックすると出てくるメニューです。

要素の検証を利用すると、表示している要素を確認することが出来ます。

実際にやってみましょう。

スポンサーリンク
スポンサーリンク

Google Chrome「要素の検証」

chrome-要素の検証
▲要素を検証したいページで「右クリック」します。

chrome-要素の検証
▲「要素の検証」を押します。

chrome-要素の検証
▲すると、ご覧のような画面となります。左側には、HTMLタグ、右側にはスタイルシート(CSS)が表示されます。

chrome-要素の検証
▲今回は、簡単のため見出しタグ(h2タグ)のデザイン(色)を変更してみます。「Kindle paperwhiteの大きさ比較」と書かれている要素を見つけ出し、左の図のようにハイライトさせます。

chrome-要素の検証
▲変更前のh2タグの背景色は#20cですが、これを変更してみます。右側の#20c部分をクリックすることで編集画面になります。

chrome-要素の検証
▲#20cから#1BFにすると、見出しタグの背景色が変更できました。

「要素の検証」は微調整するのに最適

「要素の検証」は、デザインを微調整するのに最適です。

今回は、わかりやすいように色の変更を紹介しました。

ただ、paddingやmarginを微調整する際にその効果が発揮されます。

Chromeで開いているページで調整できるので、修正したhtmlファイルを再アップロードする必要がありません。

「これだ!」というデザインが決まったら、そのファイルを再アップロードすればいいので、一々アップロードする必要がない所が便利です。

デザインの修正には、要素の検証を利用するといいでしょう。

スポンサーリンク
スポンサーリンク

関連記事

  1. ブログ運営

    FC2ブログでコードを行番号つきで表示する方法

    ブログ記事内にコードを表示する時のデザインがいまいちだったので、見やす…

  2. ブログ運営

    毎日ブログを更新するモチベーションがどこから湧くのか

    ブログを始めてから1年と3ヶ月が経ちました。Macを購入してから、ブロ…

  3. ブログ運営

    Livedoor Readerの購読者数を確認する方法

    Google Readerが廃止されて、Feedlyが一応主流のRSS…

  4. Twitter

    ブログ運営

    「公式Twitterアプリでこの記事をつぶやく」ソーシャルボタンの作成&設置方法

    以前から、ブログ記事にはTwitterで共有できるためのソーシャルボタ…

  5. iphoneの文字入力

    ブログ運営

    iPhoneの文字入力で呼び出せるようにしておくと便利な記号たち

    iPhoneでブログを書いている時に多用する記号は決まっています。以下…

コメント

  1. この記事へのコメントはありません。

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

カテゴリー

  1. Poptile

    iPhoneアプリ

    iPhoneパズルゲームアプリ「Poptile」の遊び方・攻略法
  2. lamy-safari

    LAMY

    LAMY Safariの新色にグリーン(緑)が登場!!
  3. iPhoneアプリ

    Gunosyがアップデートでデザイン刷新&関連記事を表示出来るようにな…
  4. 電子書籍

    Kindleストアがオープン!安い&すぐ読める!これは電子書籍ブームが…
  5. powerpoint

    Office製品

    PowerPointで直方体図形(3D)を作成する方法
PAGE TOP