脱カスタム初心者出来るかどうかの第一のハードルかもしれません。。。
CSSを自在に変更できるかどうか。
これは、つまり
chromeやIEなどのデベロッパーツール（開発者ツール）を使えるかどうか
ということになります。
bizvektorフォーラムでも、「初心者です。＊＊＊＊を変更したいんですが、どうすれば？」といった質問をよく見ます。
「デベロッパーツールでちょっと見れば分かるのに・・・」ってレベルの内容。
そんな質問を減らすために、ちょっとやってみようかな～な記事です^^
デベロッパーツールの起動
chrome F12 または 右クリック「要素を検証」
IE F12 または 右クリック「要素の検査」
Firefox F12 または 右クリック「要素を調査」
私はchromeを使う事が多いので、chromeのデベロッパーツールで説明していきますが、他のブラウザでもほぼ同じ機能がありますし、操作性も似たようなモノです。
ご自身で、使いやすいモノをチョイスして下さいね。
デベロッパーツールを起動すると、こんな画面になります。
デフォだと、下に表示されると思います。
このままでもイイですが、視界が悪い（表示サイトが狭くなる）ので、私はサイドに表示しています。
サイドに表示するには、×アイコンと設定アイコンの間、（赤矢印：マウスをあてれば”Dock to right”と表示されるヤツ）をクリック。
（サイト表示とデベロッパーツールの境界にマウスを持って行けば、幅の変更ができるので、見やすい幅に。）
では、さくっとCSSを見てみましょう。
CSSを調べる
どういったCSSが効いているのか。
例えば、当サイトのTOPページ ブログタイトル部分を調べてみましょ。
まずは、虫眼鏡をクリック
次にブログタイトル部分をクリック
すると、該当htmが反転表示され、右下のボックスモデル（縦横サイズ・マージンなどが図で表示される）と、その下に適用されているCSSが表示されます（オレンジ枠部分）。
左下には、有効になっているcssが、どこにどう記述されているのかという情報が出ます（ピンク枠部分）。
これで、該当部分に適用されているCSS情報がわかりました。
では、変更してみましょう。
CSSを変更してみる
とりあえず、文字色を変えてみます。
ちなみに、ここでcssを変更しても、cssそのものが変更されるわけではありません。
あくまで、その画面で表示が変わる（適用される）だけですので、失敗しても本来のcssは無傷です。
リロードすれば、元に戻りますので恐れずイジって下さいね^^
右側のボックスモデルに表示されている color:rgb(30,115,190) の左にマウスをあてると虫眼鏡が表示されるのでクリック
すると、colorでフィルターがかかり、該当箇所に適用されているcolorのcssだけが左側に表示されます。
一番上の、color:#1e73be; が効いていることが分かります。
その下 color:#5ead3c; は打ち消されている（#5ead3cより#1e73beが優先されている）ことがわかります。
早速、文字色を変えてみましょう。
一番上の、color:#1e73be; の #1e73be をクリックすると反転され編集できるようになります。
これを赤#ff0000に。
記事タイトルが、赤に変わりましたね^^
これを子テーマcssなどに書き込まないと、実際には文字色は変わらないわけですが、
ここで、有効になっているのは、グレー文字ではなく黒文字部分の
#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に変わります。
こういう手順で、どのcssが有効で、どれを変更すれば効くのか表示確認しながらcss調整していきます。
cssを追加する
適当に余白部分をクリックして下さい。
1行追加されますね。ここにcssを書き込みます。
例えば、text-decoration:line-through; として、打ち消し線を入れてみます。
入力補助機能があるので、ある程度打ち込むと表示されますよ。
タイトルに打ち消し線が追加されました。
コレも実際に有効にするなら
#content .infoList .infoListBox div.entryTxtBox h4.entryTitle a { text-decoration:line-through; }
と、子テーマCSSに記述します。
CSSの有効・無効（削除）
では、少し戻って今度は color:#1e73be; にマウスをあてると左側にチェックボックスが出ますので、OFFしてみましょう。
すると、color:#1e73be; は無効になり、先ほどは無効になっていた下の color:#5ead3c; が有効になり、表示も変わります。
子テーマcssに書いてるのに効かない！なんて時、「そのcssが有効になっているのかどうか、それより優先されているcssがないかどうか」確認できます。
「表示が崩れたときに、どのcssが邪魔してるのか」なんてことの確認にも使います。
その他の情報
cssの右にcssファイル名が表示されています。
これは、「そのcssがどのファイルの何行目に書かれているか」という情報です。
例えばこの部分、
002.css:443
これは、002.cssの443行目に書かれていますよってことで、コレをクリックすると、
cssファイルの表示に変わります。
と、いう感じなんですが。。。正直に言えば、これは。。。
cssをパクる時に使います＞＜；
パクるというと聞こえは悪いんですが、、、、でも、パクるだなｗ
記事タイトルの”丸裸”は、ココなんですねー^^;
もちろん、敬意を払い、真似さしてもらいます。ありがとうと感謝の気持ちでですよ^^b
最後に。。。
画像で説明するより、動画で説明した方が分かりやすいとは思うんですが、動画編集が面倒なのでｗ
デベロッパーツールには、他にもイロイロ機能がありますので、スキルに応じて勉強してみて下さい。
とりあえずは、超初級編「デベロッパーツールでcssを調整する」終了です。
続編は、たぶんありませんので、あしからず<(_ _)>
