WordPressでCSSの反映を確認しながら編集する方法


CSS編集方法についての前置き

「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から
変更すると思うんですけど、これってぶっつけ本番ですよね。

そもそもどこをどう触ればどう変わるのかよく分からないと思います。

実際にリアルタイムで反映を確認しながら編集ができればいいのに・・・
って、きっと誰もが思うはず!

というわけで、それを叶える方法です。

Google Chromeのデベロッパーツールを使う

Google Chromeというのはブラウザの種類です。

ブラウザ自体は他にもIEとかFirefoxとかありますが、
Chromeのデベロッパーツールは元から備わっている機能なので
非常に便利で重宝します。

Google Chromeのダウンロードはこちらから。

このツールを使いますと、ブラウザの画面上で
サイトを確認しながらCSSやHTMLの編集ができます。

もちろん変更したものが実際にアップロードされるわけではないので
他の方がサイトを見ても何も変わりません。

あくまで擬似的な編集です。

ちなみに、ブラウザにFirefoxをご利用の方は
アドオン「Firebug」を導入していただくと
デベロッパーツールと同じような機能が使えます。

デベロッパーツールの使い方

Google Chromeをインストールしたら、
さっそくブラウザでWEBサイトを開いてみましょう。

そうしましたら次、サイトの画面上のどこでもかまわないのですが
「右クリック」→「要素を検証」をクリックしてください。

今回は分かりやすくサイトのロゴ(タイトル)部分で試してみます。

WordPressでCSSを実際に確認しながら編集する方法

画面の下側にコードがずらーっと並んでいます。
左側が「HTML」、右側が「CSS」です。

どういうことかといいますと、「要素を検証」をクリックした部分を
構成する要素がこんな風に表示されているわけなんですね。

例えばHTML部分ではイメージ画像を表示しているコードが
反転表示されています。

WordPressでCSSを実際に確認しながら編集する方法

その辺り一帯のHTMLを見てみますと、
画像のコードは<a>タグで囲まれ、サイトのURLを指定しています。
さらにそれを<p>タグで囲み、class名に”sitename”を指定していることが分かります。

<p class="sitename">
  <a href="https://wp.myafi.net/">
    <img src="https://wp.myafi.net/wp-content/themes/stinger3ver20140327-child/images/WPnavi-logo.png"> 
  </a>
</p>

HTML部分をそれぞれクリックして反転させてみると、
その該当部分のデザインを指定しているCSSが
右側に表示されるようになってます。

<p class=”sitename”>をクリックした時のCSSはこんな感じ。

WordPressでCSSを実際に確認しながら編集する方法

「style.css:239」は「CSSファイルの239行目」という意味。

ここにカーソルを合わせてみると
このようにスタイルシートが格納されている場所が表示されます。

WordPressでCSSを実際に確認しながら編集する方法

例えば「margin-bottom: 10px;」とありますが、
この数値をダブルクリックすると編集できます。
好きな数値に変更してみて擬似編集を試してください。

で、「style.css:239」をクリックしてみると、
左側にCSSのコードが一覧でずらりと表示されます。

WordPressでCSSを実際に確認しながら編集する方法

ここでも好き放題CSSを書き換えることができます。

▼「margin-bottom: 100px;」にしてみると・・・
WordPressでCSSを実際に確認しながら編集する方法
ロゴ画像の下の余白が広がりました。

で、こんな感じで「要素を検証」→「CSSの編集」を繰り返して
気に入った形に仕上がったらそのまますべてコピーしてしまって
「管理画面」→「テーマ」→「テーマ編集」→「スタイルシート」に
貼り付けるとCSSの更新が完了です。

それまでは一切サイトに反映されませんので
安心してカスタマイズの練習ができますね。

ちなみにHTMLも編集できる

これまではCSSの編集方法をお伝えしましたが
一応HTMLの方も編集が可能です。

あまり使わないと思うんですけど一応。

「要素を検証」で左側にHTMLが表示されましたら、
HTMLコードの上で右クリック→「Edit as HTML」を選択します。

WordPressでCSSを実際に確認しながら編集する方法

で、こんな風にテキストエリアみたいなものが表示されるので

WordPressでCSSを実際に確認しながら編集する方法

ここから編集できます。

あとがき!

一度デベロッパーツールを使うと
見ずに編集するなんてもはや無謀なことに気付きます(笑)

この方法で編集を繰り返していると
CSSの仕組みもだんだん分かってきます。

もう前には戻れなくなると思います。
ぜひ試してみてくださいね~。

Chromeは動作も軽いですしメインブラウザとしてもおすすめです。


こんな記事も書きました!

WordPressをカスタマイズする前に子テーマを作っておく

子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...

MORE

名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。

mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...

MORE

ローディング・読み込み中の画像を簡単に作成できるツール

ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...

MORE

商用サイトで使えるフリー素材サイトまとめ

アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...

MORE

コピペで使えるCSSデザイン枠テンプレート

どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...

MORE

CORE(TCD027)でトップページの新着記事一覧にページナビをつける

先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...

MORE

コピペで使える固定ソーシャルボタンBOX

WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...

MORE

MacやiPhoneのスクショはめ込み画像を作る

そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...

MORE

CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン

こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...

MORE

無料で簡単にロゴを作れるツール「LOGASTER」が斬新!

Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...

MORE

Message

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

flower