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”を指定していることが分かります。

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は動作も軽いですしメインブラウザとしてもおすすめです。

  • このエントリーをはてなブックマークに追加

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

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

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

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

記事を読む

photo

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

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

記事を読む

wpnavi

ページ遷移時のフェード効果を実装するjQuery

リンクをクリックした時にページが滑らか~にフェードしながら遷移する方法です。 今回新たに作成し...

記事を読む

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

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

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

記事を読む

mow (1)

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

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

記事を読む

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

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

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

記事を読む

無料ロゴ作成ツールLOGASTER

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

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

記事を読む

48b97e5b81bd7c026e0e173652618f53_m

WordPressにヘッダー画像機能(カスタムヘッダー)がない場合の作り方

カスタマイズサポートにてヘッダー画像の導入方法を尋ねられることが多々あるので 設定手順を公開してお...

記事を読む

wpnavi

CSSでヘッダーの真ん中に吹き出しっぽい三角をつけてみた

アメブロからWordPressへと個人ブログを移すにあたって「どんなデザインでサイトを作ろうかなー」...

記事を読む

mayu-official-site

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

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

記事を読む

Message

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

  • IMG_1137_100x130

    // mayu
    次世代型Web資産形成プロジェクト
    代表
    mayu official site
    Facebook

    mayu的思考やどうでもいいことをたまにつぶやいてます。
    お気軽にフォローしてみてくださいね!

  • WordPress Theme Park フリーWEB素材 Re:vre
flower