Google Chromeの「要素を検証」機能を使うと、Webデザインがずいぶん楽になります。
Google Chrome 「要素を検証」でリアルタイムCSS編集
Google Chromeで適当な文章を選択します。
そして右クリックして出てくるポップアップメニューで「要素を検証」を選びましょう。
すると、その選択した文章に関するHTMLおよびCSSが下部に表示されます。
ここのCSS部分が編集できるんですよね (スクリーンショットの赤枠で囲んだ部分)。
そして、編集するなり画面に反映されるので、リアルタイムにCSS編集→画面確認という作業ができます！
これがWebデザインをするときにめちゃくちゃ便利！
文章だけだとわかりづらいと思いますので、この操作を動画で解説しました。
動画を観ていただくと、どういうことかわかりましたかね。
HTMLやCSSの学習にも使える
もちろん、HTMLやCSSの知識が前提になってきますが、このようにしてリアルタイムに編集→画面確認ができるので、HTMLやCSSの学習にも使えます。
ぜひお手元にHTMLやCSSのリファレンスを用意して、いろいろいじくってみてください。
編集したら、サーバに反映すること
なお、Google Chromeで編集しているのは、ローカルにダウンロードしてきたデータになります。
なので、CSSを編集して満足したら、その編集結果をサーバのCSSファイルに反映しなければなりません。
WordPressで言えば、テーマによりますが、おそらくstyle.cssというファイルを編集することになります。
どのCSSファイルを編集しているかは、「要素を検証」で出てきた右下の部分 (上のスクリーンショットの赤枠で囲んだ部分)に表示されていますので、そちらを参考にしてください。
ここでは、具体的にどこのどのファイルのどの部分を編集すればよい、という説明ができないので、適宜実施してくださいね。
おわりに
これまでサイトの見栄えを編集する作業をするときは、
CSSファイルを編集 → ファイルを保存 → ブラウザでページの更新
といった作業をしていました。
これがブログになると結構厄介で、ローカルに構築したブログ環境をいじるか、本番環境をいきなりいじるかという感じだったんですよね。
私の場合は使っているサーバのキャッシュ機能の影響もあり、CSSの編集は一層手間でした。
このGoogle Chromeの「要素を検証」機能を使えば、その辺の作業が、ローカルでお試し感覚でできます。
しかもCSSを編集するとリアルタイムに画面表示も変わるので、とても作業が楽ちんです。
めちゃくちゃ便利ですね。
あなたのブログやホームページのデザインを編集する際、ぜひこの機能を使ってみてください。
