最近、アメブロのcssの、どこどこを、どうこうしたいのですが、どうしたらいいの？
という質問を受けていて、参考になればと思い、どうやって調べているのかを書いておく。
他人のブログのhtml構造、cssがどう設定されているか、そのIDでログインしてなどという方法ではなく、実際に表示されたページから探っていく方法です。
私はGoogle Chromeを使っているので、Chromeのインスペクターを使います。
昨今のブラウザであれば、インスペクター機能は搭載されているかと思いますが、おそらく使い勝手は違うことでしょう。
インスペクター自体はCtrl + Shift + Jで起動出来るのだが、調べたい部分がわかっているならば、話しは別である。
まず、どの部分を調べたいのか。
例えば、アメブロのサイドバーなどに必ず存在する[＋フォロー]の色を変えたいとする。
そこを右クリックして、検証(I)を選択する。
DevToolsが開いて、マウスポインタがあたっていたところの情報にフォーカスが当たります。
これをやらずに、インスペクターを開いたら、htmlのツリー構造を探っていくという面倒なルートを辿りますｗ。
上ペインのElementsタブには、htmlタグのツリー構造が表示される。
ここで、そのタグのclass名などを調べたり、タグの親子関係を調べたり出来る。
下ペインのStylesタブには、上ペインのcssの設定が表示される。
どのcssファイルの何行目に、どういったcss設定がされているのか。
例えば、ここをダイナミックに変更したりも出来る。
使用しないようにチェックを外したり、
値を変更したり、
新たに設定を追加したりして、
実際のページがどうなるのかを確認出来る。
また、下ペインの右ペインには、margin、paddingなどの実際の値などを視覚的に確認でき、
更にはマウスポインタを当てることで、実際のページのどこなのかまで解る。
便利なツールではあるが、
htmlにはどんなタグがあるのか、
cssには、どんな設定があるのか、
それぞれ、どんな役割をしているのか、
どんな設定を出来るのか、
そういった基本的なことを当然知らなければ、
いくらツールがよく出来ていてもちんぷんかんぷんであろう。
フォローボタンなので、htmlのaタグが関わっているのは、インスペクターを使わずとも解る。
そのaタグのclass名が判れば、そのclassに対してcssを設定すれば良い。
後はどんな設定をしなければならないのか。
そこが問題なのだろう。
ではでは
PS：因みに、自分は面倒くさがりなので、CSSカスタム可能デザインを使ってないのです。
一般的に考えると、そんだけ知識があるなら、カスタマイズすればよいのに…
と思われることだろう。
確かに、そうなんだけれども、凝り性な性格なので、始めるとトコトンまでやって、なかなか完成しないというか、結局納得しないままでずっといることになる。
そういう性格を知っていてか、既存のデザインで済まして、飽きたら変更するという感じにしています。
記事において、細かな設定を変更したりということはやってますねｗ。
htmlの知識は、1995年ごろからで、すべて独学です。
その頃、ネットワークOSのN社に居たのもラッキーだったのかもしれません。
その後、H社に行って、いくつかの部署を転々とするのだが、ウェブ系の業務に一度は付くはずだったのですが、転部する直前に部署自体が無くなったので、本格的な仕事でhtmlやcssをいじることはやらず仕舞いです。
ただ、どの業務にいても、業務の一部として、その知識でウェブページを作ったりはしましたけどね。
もし、そのまま仕事としてウェブに携わっていたらどうなっていたのかは解らない。
仕事と趣味を一緒にするというのは、良いのか悪いかのも解らない。
おそらく仕事だったら、趣味にはしなかったかもしれませんね。
子どものころ、絵を書くこと、物を作ることが好きだったけど、絵は書いちゃ居ないし、リアルな物を作っては居ない。
バーチャルには絵を書いたり、物を作ったりはしているのにね。
さて、今とっかかり中の自作パズルゲームを完成させないとな。
ではでは