ファンクションキー「F12」
ソースコードを書くときに多用するのが「F12」キー。
F12キーのFは「ファンクションキー」とも呼ばれていて特定の機能を実行するためのボタンです。
このクラス名なんだっけ…
ソースコードが機能しない…
このようなトラブルを「F12」でソースコードを確認することで解決に導くことができます。
クラス名、ID名を確認する手順
まず、全体のソースコードを開いてみましょう。
- 自分のウェブサイトを開く
- ファンクションキー「F12」を押す
以上の操作で全体のソースコードを見ることができます。
右上側に全体のソースコード、右下に関連するスタイルシートの内容等が表示されています。
クラス名、ID名を確認する手順は以下の通りです。
- クラス名、ID名を確認したい画像、タイトル、見出しを右クリック
- コンテキストメニューの中の「検証」をクリック
以上でクラス名、ID名を確認することができます。
実際に試してみると…
例えば、ブログのタイトルロゴのソースコードを見る場合は、
この画像を右クリックし、コンテキストメニューの「検証」を押します。
タイトルロゴの要素へと自動的に移動し、該当するソースコードがハイライトされます。
これで、class（クラス名）、ID（アイディ名）を判別することができます。
上のクラス名が<sample>とするならば、
.sample{
/*ここにソースコードを書く*/
}このようにスタイルシートでは<img>を装飾することができます。
また、<img>にクラスが無かったとしても、<img>が納められた一つ前の要素を見てみましょう。
一つ前の要素にはクラスが付いている場合があります。
分かりやすいように上下関係を示すために左右に段落が付いています。
<img>にクラスが付いていなくても、一つ、二つ上の<〇〇>クラス、または、<〇〇>IDの中に入った<img>クラスというように指定することで目的の要素を装飾することができます。
.site-name-text img{
/*ここにソースコードを書く*/
}ファンクションキー「F12」を利用することでクラス名、ID名が直ぐに分かるので便利です。
要素のスタイルシートを知る方法
元々、Word Pressのテーマは完成された状態で配布されています。
つまり、要素をカスタマイズする場合は、元々のスタイルシートの内容と合わせてカスタマイズする必要があります。同じソースコードを書いてしまっても無駄なので元々、適用されたソースコードと照らし合わせて編集していきます。
そのためには、カスタマイズする予定の要素のスタイルシートを確認する必要があります。
例えば、ブログタイトルロゴのソースコードを確認したい場合には、
この画像を右クリックし、コンテキストメニューの「検証」を押します。
タイトルロゴの要素へと自動的に移動し、該当するソースコードがハイライトされます。
ハイライトを確認したら、以下の場所を見てみましょう。
丁度、右下に当たる部分に該当する要素のソースコードが表示されます。
手順としては、
- ソースコードを見たい要素を右クリック
- コンテキストメニューの「検証」をクリック
- 右下の囲い内にある「Styles」内にソースコードが表示
こんな感じで該当する要素のソースコードを見ることができます。
ファンクションキー「F12」キーを使ってみよう！
ファンクションキーの中でも「F12」キーは使用する機会が多いため、ソースコードの編集には欠かせません。Word Pressでは人の作成したテーマを借りて運営することも多いと思います。
元々のテーマをカスタマイズせず、そのまま利用しても良いと思います。ただ、自分のWebサイトなので自分なりにカスタマイズして楽しみたい方もいると思います。
もしも、Word Pressのテーマをカスタマイズしたい方は、クラス名、ID名を素早く知ることができるファンクションキー「F12」を活用してみてはいかがでしょうか。
コメント