MS Access Tips/Sample and VBA and Blog customize etc...

ChromeデベロッパーツールでCSS編集を楽しよう

タイトル画像

サイトやブログのデザインを修正するためにCSSを編集するのって、本当に面倒ですよね。ていうか、Chromeデベロッパーツールを知る前までは。Chromeデベロッパーツールを知ってからは、CSS編集が数倍は捗るようになりました。

FC2ブログのテンプレートのCSS編集で説明しますが、他のブログやサイトの場合でも同様に使えます。

難易度:

以前のCSS編集とデベロッパーツールでの編集

FC2ブログの場合だと、テンプレート管理画面で、CSSを編集して[更新]ボタンをクリック、テンプレートのプレビューをリロードして結果を確認。でも、たいていは思っていたのとちょっと違うので、また、CSS編集に戻って修正して更新、ブラウザをリロード、ということを繰り返すことになります。他のブログやサイトの場合も似たようなものでしょう。

ところが、デベロッパーツールを使うと、CSS編集とブラウザを行ったり来たりする必要がなくなるのです。CSSの修正がリアルタイムにブラウザに反映されるのです。思っている設定、数値を一発で決めることができます。これはもう無茶苦茶楽です。

ただ、一つの弱点は日本語されていないということです。最近は、IE(Edge)や FireFox も標準で同様のツールが付いていて、しかも日本語化されているので、そちらを使ってもいいでしょう。ただ、使ってみたのですが、やはり、Chromeデベロッパーツールの方が高機能かつ使いやすいようです(単にhatenaが慣れているだけかもしれませんが)

ツールを使ってみよう

とりあえず当ブログのCSS編集を題材に説明します。

変更したい要素の上で右クリックして[要素を検証]をクリックします。すると、デベロッパーツールがウィンドウ下部に開きます。ツールの上部の[Elements]ボタンが選択されていますが、これはElementsパネルが開いているということです。パネルの左側はHTML要素がツリー上に表示れて、クリックした要素が選択されています。右側はその要素に設定されいてるスタイルが表示されています。

HTMLのツリーは必要に応じて、閉じたり展開したりできます。また、要素の上にマウスカーソルを置くと、ページの方にその要素のボックスサイズ、padding, margin が色分けされて表示されます。

デベロッパーツールを開く

ページのあちこちを右クリックして要素の検証でどのような設定か確認してみてください。

フォントサイズなどの数値を変更する

タイトルのフォントサイズを変更してみましょう。

a要素が選択されていますが、そのスタイルにはfont-size はないので、 親のh1要素をクリックしてみます。スタイルをみるとフォントサイズが28pxに設定されているのが分かります。

そこをクリックすると入力ボックスに変身します。そこでキーボードからサイズを入力することができます。マウスのホイールを回すことで数値を増減されることもできます。あるいは、キーポードの↑↓キーでも増減されることができます。この増減によってページのタイトルのフォントサイズもリアルタイムに変化します。

元の設定に戻したい場合は、ESCキーを押下します。

ツールでフォントサイズの変更

色を変更する

タイトルの背景色を変更してみましょう。

h1要素の親の div要素(class="header-circle")を選択すると、CSS に background-color があります。そこの■をクリックするとカラーピッカーが開きます。そこで視覚的に色を変更できます。また、カラーピッカーが開いた状態でページの方へカーソルを移動するとその位置のカラーを取得することもできます。

これもリアルタイムに反映されますので、好みの色を簡単に設定できます。

ツールでカラーの変更

数値を0.1単位(または10単位)で変更する

本文のフォントサイズと行間を調整してみます。font-sizeを2ポイント上げて、line-heightを1.6emから0.2em下げてみます。

本文上で右クリック→要素を検証→CSS画面をスクロールしてfont-sizeが設定してある箇所を探します。body要素にありました。数値不文をクリックして↑キー2回押下で2px上げます。

body要素に line-height もありますので、数値をクリックします。1.6emですので、1単位では変化幅が大きすぎます。そういう場合は、ALTキーを押しながら、↑↓キーを操作すると0.1単位で増減します。ALTキーを押しながら、↓キー2回で1.4emになりました。

本文のフォントサイズと行間を調整

フォントサイズ、行間、段落間隔は読みやすさに非常に大きな影響を与えます。リアルタイムに変化を確認することができますので、最適な設定を素早く簡単に見つけることができます。

編集したCSSを保存する

要素の右上にCSSファイル名と行番号のリンクがあります。そこをクリックすると、CSSファイルの該当要素にジャンプできます。CSSファイルやJSファイルは、Sourcesタブで参照することができます。あるいは、プロパティまたは値をCtrl+クリックでSourcesのファイルの該当箇所にジャンプできます。

これで、font-sizeとline-heightが変更されているのが確認できます。

Sourcesのファイル上で右クリックしてSaveで保存できます。通常のWEBサイトなら保存してからアップロードします。FC2プログなどの場合は、Ctrl+A で全選択、Ctrl+Pでクリップボードにコピーして、テンプレート設定画面のCSS入力エリアで全選択(Ctrl+A)して貼り付け(Ctrl+V)して、更新することができます。

CSS編集をテンプレートに反映させる

まとめ

どうでしょうか。これなら、CSS編集でブログのデザインを簡単に変更できますね。CSSの知識がある程度必要ですが、分からなくても、「要素の検証」で設定を確認してみたり、変更してリアルタイムに変化を見ることで、CSSの各プロパティ設定の意味が実感できることで、理解が進みます。

FC2は豊富なテンプレートがありますが、そのまま使うのではなく、CSSを変更して自分ごのみのデザインを追求するのも楽しいですよ。

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/484-0e6386a8
該当の記事は見つかりませんでした。