脱カスタム初心者出来るかどうかの第一のハードルかもしれません。。。

CSSを自在に変更できるかどうか。

これは、つまり

chromeやIEなどのデベロッパーツール(開発者ツール)を使えるかどうか

ということになります。

bizvektorフォーラムでも、「初心者です。****を変更したいんですが、どうすれば?」といった質問をよく見ます。

「デベロッパーツールでちょっと見れば分かるのに・・・」ってレベルの内容。

そんな質問を減らすために、ちょっとやってみようかな~な記事です^^

デベロッパーツールの起動

chrome F12 または 右クリック「要素を検証」

IE F12 または 右クリック「要素の検査」

Firefox F12 または 右クリック「要素を調査」

私はchromeを使う事が多いので、chromeのデベロッパーツールで説明していきますが、他のブラウザでもほぼ同じ機能がありますし、操作性も似たようなモノです。

ご自身で、使いやすいモノをチョイスして下さいね。

デベロッパーツールを起動すると、こんな画面になります。

cap-038

デフォだと、下に表示されると思います。

このままでもイイですが、視界が悪い(表示サイトが狭くなる)ので、私はサイドに表示しています。

サイドに表示するには、×アイコンと設定アイコンの間、(赤矢印:マウスをあてれば”Dock to right”と表示されるヤツ)をクリック。

(サイト表示とデベロッパーツールの境界にマウスを持って行けば、幅の変更ができるので、見やすい幅に。)

cap-039

では、さくっとCSSを見てみましょう。

CSSを調べる

どういったCSSが効いているのか。

例えば、当サイトのTOPページ ブログタイトル部分を調べてみましょ。

まずは、虫眼鏡をクリック

次にブログタイトル部分をクリック

cap-041

 

すると、該当htmが反転表示され、右下のボックスモデル(縦横サイズ・マージンなどが図で表示される)と、その下に適用されているCSSが表示されます(オレンジ枠部分)。

左下には、有効になっているcssが、どこにどう記述されているのかという情報が出ます(ピンク枠部分)。

cap-042

これで、該当部分に適用されているCSS情報がわかりました。

では、変更してみましょう。

CSSを変更してみる

とりあえず、文字色を変えてみます。

ちなみに、ここでcssを変更しても、cssそのものが変更されるわけではありません。

あくまで、その画面で表示が変わる(適用される)だけですので、失敗しても本来のcssは無傷です。

リロードすれば、元に戻りますので恐れずイジって下さいね^^

右側のボックスモデルに表示されている color:rgb(30,115,190) の左にマウスをあてると虫眼鏡が表示されるのでクリック

cap-047

すると、colorでフィルターがかかり、該当箇所に適用されているcolorのcssだけが左側に表示されます。

cap-048

一番上の、color:#1e73be; が効いていることが分かります。

その下 color:#5ead3c; は打ち消されている(#5ead3cより#1e73beが優先されている)ことがわかります。

早速、文字色を変えてみましょう。

一番上の、color:#1e73be; の #1e73be をクリックすると反転され編集できるようになります。

cap-050

これを赤#ff0000に。

記事タイトルが、赤に変わりましたね^^

cap-053

これを子テーマcssなどに書き込まないと、実際には文字色は変わらないわけですが、

ここで、有効になっているのは、グレー文字ではなく黒文字部分の

cap-054

#content .infoList .infoListBox div.entryTxtBox h4.entryTitle a

なので、

#content .infoList .infoListBox div.entryTxtBox h4.entryTitle a { color:#ff0000; }

と、子テーマcssに書き込めば、それが有効になります。

という具合です。

ちなみに、グリグリっとマウスで選べば、コピペできます^^

 

ついでに、リンクa には付きものの hover についてです。

右上にある押しピンマークをクリックして下さい。

:active :hover
:focus :visited

と出てくるので、:hoverをチェックすれば、hoverで適用されるcssに変わります。

cap-056

 

こういう手順で、どのcssが有効で、どれを変更すれば効くのか表示確認しながらcss調整していきます。

cssを追加する

適当に余白部分をクリックして下さい。

cap-057

1行追加されますね。ここにcssを書き込みます。

例えば、text-decoration:line-through; として、打ち消し線を入れてみます。

入力補助機能があるので、ある程度打ち込むと表示されますよ。

cap-059cap-060

タイトルに打ち消し線が追加されました。

コレも実際に有効にするなら

#content .infoList .infoListBox div.entryTxtBox h4.entryTitle a { text-decoration:line-through; }

と、子テーマCSSに記述します。

cap-061

CSSの有効・無効(削除)

では、少し戻って今度は color:#1e73be; にマウスをあてると左側にチェックボックスが出ますので、OFFしてみましょう。

cap-051

すると、color:#1e73be; は無効になり、先ほどは無効になっていた下の color:#5ead3c; が有効になり、表示も変わります。

cap-052

cap-049

 

子テーマcssに書いてるのに効かない!なんて時、「そのcssが有効になっているのかどうか、それより優先されているcssがないかどうか」確認できます。

「表示が崩れたときに、どのcssが邪魔してるのか」なんてことの確認にも使います。

その他の情報

cssの右にcssファイル名が表示されています。

cap-062

これは、「そのcssがどのファイルの何行目に書かれているか」という情報です。

例えばこの部分、

002.css:443

これは、002.cssの443行目に書かれていますよってことで、コレをクリックすると、

cssファイルの表示に変わります。

cap-063

と、いう感じなんですが。。。正直に言えば、これは。。。

cssをパクる時に使います><;

パクるというと聞こえは悪いんですが、、、、でも、パクるだなw

記事タイトルの”丸裸”は、ココなんですねー^^;

もちろん、敬意を払い、真似さしてもらいます。ありがとうと感謝の気持ちでですよ^^b

 

最後に。。。

画像で説明するより、動画で説明した方が分かりやすいとは思うんですが、動画編集が面倒なのでw

デベロッパーツールには、他にもイロイロ機能がありますので、スキルに応じて勉強してみて下さい。

とりあえずは、超初級編「デベロッパーツールでcssを調整する」終了です。

続編は、たぶんありませんので、あしからず<(_ _)>