スタイルシート（CSS）で
カスタマイズしたいとき…そこで付いてるコードをどうやって見つけるのか？
そんなお話です。
ページに関連づけるより、単独で上げたほうがいいと思い載せてみました。
2つのやりかたを上げます。
一つは開発者ツールで調査する、
もう一つはソースを表示してコードを見つける、、です。
ここでは、
はてなブログのidを非表示にする…を例えにしたいと思います。
はてなブログのidは、
記事の下とプロフィール欄の…ハンドルネーム横に表示されており。
まずはサイト上で、
カスタマイズしたい辺りの上…この場合idにマウスを置き、右クリックします。
ブラウザはEdgeを利用してますんで、ご了承ください。
一覧の中の、
開発者ツールで調査する、をクリックすると
サイトの右半分に、
こんな感じでツールが開きます。
右上を拡大してます。
このブルーでリンクホバーされてる上の部分、、
コードが4つ、横並びで並んでるトコ…
ここにマウスを置いてみると、
該当するidに反応すると思います。
例えばこの図だと、
idやハンドルネーム含めエリア全体のコードなのを示し ⇩
idとハンドルネームのコード ⇩
idだけのコード ⇩
というように、
コードごと反映して付いてくのがわかります。
ハンドルネームとidとも非表示にしたいとき…
おそらくはこのコードだろう~w
ってことで記述するとこんな感じに。
デザイン ⇨ カスタマイズ ⇨
一番下にある{ }デザインCSSをクリックして入力。
/* 記事idを非表示 */
span.author.vcard {
display: none;
}
変更を保存するをクリック。
ページを見て、ネームとidが非表示になってたらOK👌
という感じで、
コードにするソースを見つけていく…って流れです。
も一つidのあるとこ…
サイドバーにあるプロフィール欄です。
ここは右側にあるので、
ツールも右にバーンと出て😅見たい部分が隠れてしまう。
な・の・で、
開発者ツールを立ち上げる前に、
ページ全体を縮小表示してみてください。
コントロールCtrlキーを押しながら、
マウスのホイールで画面を縮小し。
それから右クリックで、
開発者ツールを上げてみてください。
画面が小さくなっちゃいますが、
隠れず右クリックでツールが反応すると思います。
開発者ツールの真ん中で、
スケールが左右に広げられるので、ページが見えるよう縮小するでもOKです。
プロフィールに付いてるidは、
記事とまた違うコードがついてますね。
たぶんコレ！
ってのにCSS設定してみてください。
ここではこのコードで非表示にできてます。
/* サイド・プロフィールのidを非表示 */
a.hatena-id-link {
display: none;
}
もう一つのやりかたは、
ソースの表示で該当部分を探る方法です。
どちらか適したほうでされると良いかと。
サイト上の、厳密にココ！
って場所でなくともOK。大まかにその近辺で右クリックし、
ページのソース表示を選ぶと、
サイトページのソースが開きます。
ページの並び順に上から載っており、
カスタマイズしたい該当の場所まで追って探す感じです。
複雑なソース構成になってるかもしれませんが、ここでは記事本文と右サイドの部分を探せば当たりがつくかと。
ソースはページの表示通りに並ぶので、
ここでの例ではヘッダー ⇨ 本文 ⇨ 右サイドバー ⇨ フッター
みたく、
アバウトにいうとそんな順序でソースが並びます。
左サイドバーの場合は、
ヘッダーの次が左サイド ⇨ 本文の順となる。
そんな感じでコードのあるトコを探していきます。
この場合は記事の下にあるidなので、
このあたりが怪しいw ⇩
見ると、
開発者ツールで出てきたのと同じclass指定が見つかりますね。
<span class="author vcard">
プロフィール欄のidソースも、
開発者ツールで出てきたのと同じclass指定が見つかります ⇩
<a href="*****" class="hatena-id-link">
ソースで見るほうが、
わかりやすいかもしれません😁
ちなみにプロフィールのidは、
はてなブログの設定で非表示にすることできるのです。
デザイン ⇨ カスタマイズから入って
サイドバー ⇨
プロフィールの編集をクリック。
設定項目から✓点を外し、
適用するを押し保存すればOKです。
さらに変更を保存するのクリックまでお忘れなく…
このどちらかの方法で…
どのサイトやブログでも、これで行き当たれると思います。
複数のクラス指定があったりして、
CSSが反応しないときがあるものの、、、
やってみればどれかに反応するはず…😆
頑張ってカスタマイズしてみてくださいまし🎶
コメント