グーグルの検証モード(デベロッパーツール)

検証画面を開く

グーグル(インターネット検索エンジン)の画面上で、右クリックします。
検証モードの画面

そうすると、画面の右側に、写真のような画面が開きます。
今回は、「ひがし茶屋街」のタイトルを、黒色から薄紫色に変更します。
1.画面の右上のところで、「ひがし茶屋街」のタイトルに該当する箇所に、カーソルを合わせます。
2.そうすると、左側の画面で、「ひがし茶屋街」のタイトルが反転します。
3.画面右下は、現在、設定されている項目の一覧が並んでいます。
.navbar-brand a{
color:#333;
}
と書かれている場所があります。ここでタイトルの色が設定されています。
検証モードの画面

目次ページの画面下にあるカスタムCSSに、下記をコピー&ペーストします。
#FF0099は、薄紫色の意味です。
.navbar-brand a {
color: #FF0099;
}

設定した色が変わった

プレビューしてみると、色が変わっているのが分かります。

あまり詳しくないので、説明不足になるかもしれませんが、下記簡単な説明です。
.navbar-brand a この部分が、「ひがし茶屋街」を設定している項目になります。
この項目に対して、色を変えたり、文字の大きさを変えたりします。セレクタと呼ばれます。
color: #FF0099; は、色を変えたり、文字を変えたりする部分です。プロパティと呼ばれます。
プロパティの前後に、{} が付きます。

文字の大きさを変える

次に、文字の大きさを変えてみます。font-sizeを50pxにしてみます。
font-size:50px; を追加しました。

.navbar-brand a{
color: #FF0099;
font-size:50px;
}

文字の大きさを変える

文字サイズが50pxと大きくなりました。同時に、画面右下の設定項目も、変わっています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です