CSSの場所を探してみよう～googleクローム編～

おはようございます。
昨日に引き続き今日はＣＳＳの場所を探す練習をしたいと思います。
今日はブログのタイトルを消す練習です。
色々なやり方や使用するプラウザでやり方違いますので今回は「google（グーグル）」のプラウザ「Chrome（クローム）」を使用します。

自分のパソコンに入ってない場合は下記から無料でダウンロードできるので使ってみてください。

自分のブログを「Chrome（クローム）」で開きます。
開いたらブログタイトルの上で右クリックしてみてください。
こんな画像が出てきます。

出てきた枠内の一番下の検証をクリック！
すると画面右横に文字だらけのこんな画面になります。

その右側部分の中で背景グレーになってる部分がありますよね。
これがブログタイトルの命令をしている場所になります。
このグレーの部分をもう少し掘り下げて調べてみます。

グレーの部分にマウスを乗せるとブログタイトル部分が薄い青色で指定されます。
そんな感じでマウスを少し上に移動させてみます。

グレーの1行上にマウスを持っていくと今度はブログのタイトル部分が横幅がブログの幅いっぱいに広がり青と緑色で指定されます。
更にCSSを2行上に持っていくと下記のようになります。

今度はブログのタイトルとブログの説明文が指定されました。
今回はブログのタイトルだけを消す練習なのでこれでは行き過ぎなのでブログタイトルだけを指定している元に戻ります。

ブログのタイトルに色々命令している場所がこれになりますので下の枠を見てください。

この部分にタイトルに対しての命令文が記載されてます。

.skinTitleArea {
margin: 0;
padding: 0;
font-size: 1em;
font-weight: 400;
}

細かいことは気にしないでブログのタイトルを消す命令文は「display:none;」とこの中に書いてあげたらブログのタイトルは消えますので下記のように記載します。

.skinTitleArea {
display:none;
}

元々書いてあったものは消して大丈夫です。

これをアメブロのCSS編集画面の一番下に記載して保存を押します。

これでブログを見るとブログのタイトルだけが消えてるのがわかりますか。

こんな感じでブログの変更したいところを指定してる場所を探して変更したい内容に書き換えればブログは変わってくれます。

今回は「display:none;」でブログのタイトルを消しましたが、書き方を変えれば文字の大きさや色・場所も自由に変更できます。
最初はなれないかも知れませんが、検証ボタンを押して調べるだけならブログは変更されませんので、ほかの方のブログで興味ある場所等もこの方法でどうやってるのかがわかります。

勉強がてら色々いじってる方のブログを検証してみるのも楽しいですよ。

以上ブログCSSの場所を探すやり方の基本編でした。

前の記事、レイヤーを理解しようも併せてお読みください。

[　屋号　]　デザイン・ラボ『画像屋』
[　担当　]　竹内
[　電話　]　090-6054-7129
[　時間　]　12時～24時年中無休
[　ホームページ　]　http://a-hp.net/

ワードプレス制作・アメブロカスタマイズ　/　デザイン・ラボ「画像屋」