WordPressでCSSの反映を確認しながら編集する方法
CSS編集方法についての前置き
「管理画面」→「外観」→「テーマ編集」→「スタイルシート」から
変更すると思うんですけど、これってぶっつけ本番ですよね。
そもそもどこをどう触ればどう変わるのかよく分からないと思います。
実際にリアルタイムで反映を確認しながら編集ができればいいのに・・・
って、きっと誰もが思うはず!
というわけで、それを叶える方法です。
Google Chromeのデベロッパーツールを使う
Google Chromeというのはブラウザの種類です。
ブラウザ自体は他にもIEとかFirefoxとかありますが、
Chromeのデベロッパーツールは元から備わっている機能なので
非常に便利で重宝します。
このツールを使いますと、ブラウザの画面上で
サイトを確認しながらCSSやHTMLの編集ができます。
もちろん変更したものが実際にアップロードされるわけではないので
他の方がサイトを見ても何も変わりません。
あくまで擬似的な編集です。
ちなみに、ブラウザにFirefoxをご利用の方は
アドオン「Firebug」を導入していただくと
デベロッパーツールと同じような機能が使えます。
デベロッパーツールの使い方
Google Chromeをインストールしたら、
さっそくブラウザでWEBサイトを開いてみましょう。
そうしましたら次、サイトの画面上のどこでもかまわないのですが
「右クリック」→「要素を検証」をクリックしてください。
今回は分かりやすくサイトのロゴ(タイトル)部分で試してみます。
画面の下側にコードがずらーっと並んでいます。
左側が「HTML」、右側が「CSS」です。
どういうことかといいますと、「要素を検証」をクリックした部分を
構成する要素がこんな風に表示されているわけなんですね。
例えばHTML部分ではイメージ画像を表示しているコードが
反転表示されています。
その辺り一帯の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はこんな感じ。
「style.css:239」は「CSSファイルの239行目」という意味。
ここにカーソルを合わせてみると
このようにスタイルシートが格納されている場所が表示されます。
例えば「margin-bottom: 10px;」とありますが、
この数値をダブルクリックすると編集できます。
好きな数値に変更してみて擬似編集を試してください。
で、「style.css:239」をクリックしてみると、
左側にCSSのコードが一覧でずらりと表示されます。
ここでも好き放題CSSを書き換えることができます。
▼「margin-bottom: 100px;」にしてみると・・・
ロゴ画像の下の余白が広がりました。
で、こんな感じで「要素を検証」→「CSSの編集」を繰り返して
気に入った形に仕上がったらそのまますべてコピーしてしまって
「管理画面」→「テーマ」→「テーマ編集」→「スタイルシート」に
貼り付けるとCSSの更新が完了です。
それまでは一切サイトに反映されませんので
安心してカスタマイズの練習ができますね。
ちなみにHTMLも編集できる
これまではCSSの編集方法をお伝えしましたが
一応HTMLの方も編集が可能です。
あまり使わないと思うんですけど一応。
「要素を検証」で左側にHTMLが表示されましたら、
HTMLコードの上で右クリック→「Edit as HTML」を選択します。
で、こんな風にテキストエリアみたいなものが表示されるので
ここから編集できます。
あとがき!
一度デベロッパーツールを使うと
見ずに編集するなんてもはや無謀なことに気付きます(笑)
この方法で編集を繰り返していると
CSSの仕組みもだんだん分かってきます。
もう前には戻れなくなると思います。
ぜひ試してみてくださいね~。
Chromeは動作も軽いですしメインブラウザとしてもおすすめです。
こんな記事も書きました!
-
-
WordPressをカスタマイズする前に子テーマを作っておく
子テーマについての前置き WordPressはほとんどの方が既存のテーマから お好みのものを選ん...
-
-
名刺代わりのサイトを思いっきしリニューアルしてみた件!カスタマイズTIPS色々書きました。
mayuの活動なんかをまとめただけの俗に言う自己紹介サイトがありまして、 ちょっとお手すきになった...
-
-
ローディング・読み込み中の画像を簡単に作成できるツール
ページを読み込みする時などに使う「ローディング画像」は ジェネレーターで簡単に作成することができま...
-
-
商用サイトで使えるフリー素材サイトまとめ
アイコンや壁紙を設定したりアイキャッチ画像を用意したり・・・ と、WEBサイトを作る時に欠かせない...
-
-
コピペで使えるCSSデザイン枠テンプレート
どシンプルなものからちょっと凝ったものまで、 CSSでスタイリングしたデザイン枠のテンプレートです...
-
-
CORE(TCD027)でトップページの新着記事一覧にページナビをつける
先日導入したCORE(TCD027)テーマについてのカスタマイズ記事でございます。 トップペー...
-
-
コピペで使える固定ソーシャルボタンBOX
WordPressでスクロール時も固定表示されるソーシャルボタンを 簡単に設置するためのテンプレー...
-
-
MacやiPhoneのスクショはめ込み画像を作る
そうそう、こんな画像ってたまに必要なときがありますよね!笑 これ、わざわざ画像を合わせ...
-
-
CSSでテーブル使わずに簡単レスポンシブ!下線だけ引いて横並びデザイン
こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。 デザインは、下...
-
-
無料で簡単にロゴを作れるツール「LOGASTER」が斬新!
Webサイトを作るときって、ただのテキストタイトルを表示するよりも独自のロゴがあれば締まるのにな~っ...