WordPressにはユーザーが自由にサイトの見た目を変更するために、「追加CSS」という機能がついています。
ですがどのようにしてサイトのスタイルを調べてらいいのかわからないという人も多いはず。
そこでブラウザ上で、Webサイトのスタイルを調べる方法をお伝えします。
デベロッパツールでスタイルを確認
サイトのスタイルを確認するには、ブラウザに標準でついているデベロッパーツール(開発ツール)を使用します。
次の手順で表示してください。
デベロッパツールの開き方・表示位置の変更
Google Chrome
(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。
(2) 表示されたメニューから、「検証」をクリックします。
(3) 「・・・(縦)」をクリックして表示されるメニューの「Dock side」で、表示する位置を好みの場所へ変更します。
Firefox
(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。
(2) 表示されたメニューから、「要素を調査」をクリックします。
(3) 「・・・」をクリックして表示されるメニュー内の「下側に表示」「右側に表示」「左側に表示」「ウィンドウ分割」から、表示する位置を選択します。
Microsoft Edge
(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。
(2) 表示されたメニューから、「要素の調査」をクリックします。
(3) 右端の二つのアイコンでデベロッパツールの表示位置を変更できます。右から2番目が固定解除。3番目が位置の変更です。
Safari
(1) 開きたい要素(見出しなど)の上で、マウスボタンの右を押します。
(2) 表示されたメニューから、「要素の調査」をクリックします。
(3) 左端の二つのアイコンでデベロッパツールの表示位置を変更できます。左から2番目が固定解除。3番目が位置の変更です。
デベロッパツールの画面
デベロッパツールはブラウザによってデザインが異なりますが、内容は同じです。
ここではGoogle Chromeのデベロッパツールを例として、説明します。
❶ WebサイトのHTMLエリア
サイトを構成するHTMLコードが表示されるエリアです。
▶マークをクリックすることで、要素の開閉ができます。
マウスのクリックで要素を選択できます。
❷ 選択されている要素のスタイルエリア
❶で選択されている要素のスタイルが表示されるエリアです。
エリア内のスタイルを変更することで、直接ブラウザの表示を変更することができます。
デベロッパツールでCSSに慣れよう
初めてWebサイトのスタイル(css)を見た人は、とても難しい設定がされていると感じると思います。
とりあえず、いろいろ値を変更してみてください。
ここで変更したスタイルはどこにも保存されないので、表示がぐちゃぐちゃになっても何の問題もありません。
気にせず好きなようにやってしまってください。
しばらくすると、スタイルはそれほど難しいものではないと思うようになりますよ。
■Googleで他サイト検索
■僕がおススメするアフィリエイト教材
■マーケティング施策ツール