人気ブログランキング | 話題のタグを見る

choromeのブラウザで簡単にCSSの名前を知る

choromeの検証機能を使おう

CSSを触る時に、どれがどれやらよくわからない。。。
読みにくい英語のテキストの羅列を読むのは結構大変ですよね。
そこでさくっとクラス名を見ることのできるツールを紹介します。
用意するのはchoromeのブラウザだけ。

choromeのブラウザで簡単にCSSの名前を知る_a0342241_13364778.png

まずは自分のブログをchoromeで開いてから右クリック!(もしくはこのブログでも!)
そして一番下の「検証」をクリックしましょう。

choromeのブラウザで簡単にCSSの名前を知る_a0342241_13380130.png

そうすると、右側もしくは下側に何か出てきます。
これがページのソースになります。
上部がElementになっていることを確認してから、その中に書いてある色のついたコードを適当に触ってみましょう。

choromeのブラウザで簡単にCSSの名前を知る_a0342241_13402552.png

触っていくと、左側のページで反応する箇所があるはずです。例えば上記で言う所の
<p class="postdate-wrap">...</p>
となっている箇所を触ると、左側のページの上下の線がついている日付の箇所の色が変わります。

これは単純にリンクしている箇所ということです。

なのでこの場所のクラス名は「postdate-wrap」になります。
この場所のデザインをいじりたい場合は、スキンデザインのCSSの編集画面で上記の名称を検索してみるときっと同じ名前のものがあるはずです。

CSSをchoromeで直接変更してみよう

CSSを書き換える時、どんな風になるのか、エキサイトのページを更新するまでわかりませんよね。
ですがCSSをさわっていておかしくなってしまった、というのはよくあること・・・
choromeの検証なら、画面上でリアルタイムにCSSをチェックすることができます。

choromeのブラウザで簡単にCSSの名前を知る_a0342241_13470129.png

先ほどのCSSで今度は<h2 class="post-title">...</h2>という箇所を見てみましょう。
Elementの下にStyleと書かれたタブがあります。
上記の赤枠で記したクラス名「post-title」の部分。ここがCSSです。
今「post-title」には

font-size: 18px; font-weight: bold;

というCSSが入っています。
この18pxと書かれたところをクリックすると編集ができるようになるので、
試しに40pxと入れてみましょう。

choromeのブラウザで簡単にCSSの名前を知る_a0342241_13573927.png

すると、右側のテキストが大きくなりました!
これはCSSのフォントサイズを18から40pxに変更したためです。
同様にfont-weight: bold;の右側のチェックボックスを外してみるとフォントが細くなるはずです。
ここで変更したCSSは特に保存されませんので、あくまでも検証でうまくいくか使ってみるのが良いでしょう。
うまくいったら、実際にエキサイトブログのデザインスキンのCSS編集で実際に変更してみるのが近道です。

直接記述することもできる

choromeの検証機能では、もともと書いてあるもの以外にも直接記述することも可能です。
先ほどのクラス名「post-title」のCSSの } の右横あたりをクリックすると新たに記述するようなカーソルに変化するはず。
そこへ背景の設定をする「background: red;」と書いてみましょう。
そうすると左側のタイトルの背景が赤くなるはず。

choromeのブラウザで簡単にCSSの名前を知る_a0342241_14063284.png

こんな感じでCSSの練習がてらいろんなことを試してみると良いですね!
リアルタイムで反映するので、うまく反映しない時は、書く場所が間違っていたり、他の要素に影響している可能性があるので
根気強く該当箇所を探してみましょう。


by exblog-tips | 2015-12-25 14:10 | お役立ち

エキサイトブログをとことん使い倒すブログです。こんなことできないかな?をゆるっと募集中!


by エキブロまん