Facebook
RSS Feed
May 27, 2014

これ1つだけ覚えておくとWPテーマカスタマイズが劇的に捗るGoogle Chromeデベロッパーツールの使い方

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

WordPressのテンプレートを導入して、自分好みにカスタマイズしてる時、
「あれ?ここのサイズってどうなってるの?」
「ここの色を変えたい時はCSSのどこを触ればいいの?」
みたいなことを思いますよね。

そんな時に、これ1つだけ覚えておけばカスタマイズが劇的に捗るというのが、
Google Chromeデベロッパーツールの虫眼鏡。

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

使い方は超簡単。

表示>開発/管理>デベロッパーツール

画面上部のメニューからデベロッパーツールを表示させます。
すると下の方になにやらコードが書かれたウィンドウが出て来ますので、
一番左の虫眼鏡ボタンをクリックします。

musimegane

そのまま、サイト内の確認したい部分をクリックすれば、
そこのHTMLコードが下にバコン!と表示されます。右側がCSSです。
CSSを好きな感じに書き換えてみると、それがすぐにサイト上に反映されるので、
こう変わるのかー!というのが簡単に確認できます。

CSSのどこを修正したらいいですか?ってよく聞かれるので、
とりあえずこれさえ知ってれば、全て解決。

CSSを全く知らない人は、スタイルシートリファレンスなんかを見ながら作業すると超簡単です。

Posted in WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト