webgonia

WordPressでCSSをカスタマイズするなら知っておきたい確認方法

WordPressでCSSをカスタマイズするなら知っておきたい確認方法

ブログのCSSを確認してみよう

ブログを運営していく上でユーザーが見やすいようにCSSで装飾していくのですが、他ブログのデザインがどうなっているのか気になる時ありますよね。そんな時にプラウザ上で確認でき、さらには編集も出来てしまうツールがGoogle Chromeにあるので紹介します。

Google Chromeで要素の検証

この記事ではGoogle Chromeをブラウザで使用していることを前提で話を進めていくので、まだ導入していなのであれば他の記事で紹介しているので導入しましょう。

ブラウザGoogle Chrome(グーグルクローム)の設定方法

確認したいサイトをGoogle Chromeで開いたらコードを見たい箇所を右クリックし「要素の検証」を選択してください。

“要素の検証”を選択すると左側にHTML,右側にCSSが表示されてサイトのデザインがコードで表示されてCSSを編集することも出来ます。
CSSを追加する時は挿入したい箇所をクリックするとテキストモードになるので入力するとページに反映されます。すでに記述してあるCSSを解除したい場合はコードの横にあるボックスのチェックを外すとページから解除されます。
確認の為にfont-sizeを13pxから18pxに変更して適用されているか確認してみましょう。
font-sizeが5px大きくしただけで見た目の印象が変わりましたね。
次に、自サイトで要素の検証からCSSを簡単に記述する方法を見て行きましょう。

CSSにコピペするだけ

要素の検証からCSSへの記述はコピーしてペーストするだけの簡単な作業なので、是非覚えておいてください。先程変更したコードをマウスでドラッグして囲ったらコピーしましましょう。

CSSスタイルエディッターの使い方はCSSの基礎知識で紹介しているので参考にしてください。

WordPress(ワードプレス)|CSSの基礎知識

そのまま”CSSスタイルエディッター”を開きコピーしたコードをペーストしたら「スタイルシートを保存」するだけで変更が保存されます。
通常であれば編集作業はCSSを記述した後プレビューで確認して気に入らなければ、また手直しをして繰り返す作業が続いていきなかなか前に進んでいきません。しかし、この方法でCSS編集をすることによってプラウザ上でデザインが出来てしまっているのでコピー&ペ―ストだけで作業が完了します。

CSSを編集する時は”要素の検証”から変更してコピー&ペーストを確実に覚えておいてください。


これだけは知っておきたいブログのCSSを確認する方法は以上になります。

最後までお読みいただきありがとうございます。

Return Top