カスタマイズ

デベロッパーツールとSafari開発の使い方【必見WordPress編集のコツ】

こんにちは。ミタロウです。

 

皆さんWordPressサイトのHTMLやCSSのカスタマイズをする時にGoogle Chromeの「デベロッパーツール」 やSafariの「開発 Webインスペクタ」は使っていますか?

文字のサイズや色を変えたり、フッターのコピーライト、エラーの修正、余白やヘッダーなどをカスタマイズしたいなと思っても、

 

どうやったらいいか分からない。
編集したいコードがどれか分からない。
エラーの場所のコードが分からない。

 

こんな経験ありませんか?

 

デベロッパーツール、Webインスペクタはこういった悩みを一発で解決してくれます。

・デベロッパーツール、Webインスペクタを使う事で編集したい場所のコードがどれかすぐに確認する事が出来ます。

・同一画面上でhtmlやcssなどの編集が反映されるので、リアルタイムで編集結果を確認する事も出来ます。

 

ですので何度も、

【編集→アップロード→確認→修正。。。】

といった事をする必要がありません。

気になるサイト、憧れているサイトのソースコードも見れちゃうので、丸々コピーは良くないですが、デザイン・レイアウトの参考にする事も出来ますよ。

 

WordPressやHTMLのサイトを編集する場合、必須ではありませんが、使い方を知っていれば大幅に作業時間の短縮ができます。

また、初心者の方であればソースコードの仕組みなども、いじりながらなんとなく理解出来るようになってくると思いますので、是非読んで、実際にやってみてもらいたい超オススメの内容となっています。

 

デベロッパーツールと、Safari開発 Webインスペクタの使い方を覚えれば、自分で細かなカスタマイズも出来るようになりますよ。

 

 

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

Google Chromeをインストールしていない方はダウンロードして下さい。

Google Chrome

MacでSafariをお使いの方は下で説明するSafari開発の使い方でほぼ同じ事が出来るのでそっちでも大丈夫です。

 

既にお持ちの方はGoogle Chromeを開き、編集したいページにアクセスして下さい。

 

・画面右上の縦に並んだ「…アイコン」をクリックし「デベロッパーツール」をクリックしてデベロッパーツールを起動させて下さい。

もしくは以下のショートカットキーでもデベロッパーツールを起動出来ます。

・Windowsなら「F12」

・Macなら「command + Option + I」

 

デベロッパーツール

 ↓

デベロッパーツール起動

以下のような画面になると思います。

 

・画面左下の青い枠の所は「HTML」のコード。

・画面右下の緑の枠の所は「CSS」のコードが見れます。

 

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

ポイント

文章はHTMLで編集。

文字の色やサイズ、余白やレイアウトなどはCSSで編集します。

 

 

HTML側の左上の「矢印アイコン」をクリックして下さい。

 

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

・次にコードを見たい場所にカーソルを合わせて下さい。

するとカーソルを合わせた場所の「HTML」と「CSS」が表示されます。

※吹き出しにはその場所のタグやコードが表示されます。画像だとh1.entry-titleですね。

 

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

・HTMLやCSSのコードをダブルクリックすると、直接編集可能です。

リアルタイムに反映してくれるので、希望のレイアウトになるように試してみて下さい。

 

デベロッパーツールでカスタマイズ

メモ

あくまでGoogle Chrome上で一時的に編集されるだけですので、ここで色々いじったからと言って、サイトが本当に編集されるわけではありません。

再読み込みすれば元に戻ります。

 

・CSSのコードの横のチェックボックスのチェックを外すとコードの適応が外されるので、そのコードがどんなコードかを確認する事も出来ますね。

 

デベロッパーツールでCSS編集

 ↓

デベロッパーツールでCSS編集結果

 

デベロッパーツールでのレスポンシブデザイン確認方法

・「Elements」の横にあるアイコンをクリックすると、スマホやiPadなどでの見え方(レイアウト)も確認する事が出来ます。

ドロップダウンメニューから確認したい媒体を選択、もしくは「Responsive」にして直接、縦横のサイズを入力する事も可能です。

 

デベロッパーツールでレイアウト確認

 

デベロッパーツールでのエラーの確認方法

・CSSでエラーがある時は、三角形の「!」がコードの隣に表示されます。

※横線(打ち消し線)は何かしらの理由でそのCSSが適応されていないという意味ですので、必ずしもエラー、間違いとは限りません。他の指定が優先されていて、それが正解な事もありますので。

 

デベロッパーツールでエラーの確認

この場合はmarginの数値が記載されていないエラーなので、「margin: 1px;」などと数字を入れてあげれば直ります。

また数値を変更すると、リアルタイムでレイアウトも反映されるので、気に入るレイアウトになるよう編集して下さい。

 

・読み込みエラーなどがある時は、「Console」タブをクリックすると、エラーメッセージが表示されます。

 

デベロッパーツールでエラーの確認「Console」

デベロッパーツールで確認したらサーバーにアップロード

デベロッパーツールでコードやレイアウトを確認したら、実際にサーバーにあるファイルを直接編集しなくては、サイトのカスタマイズは反映されません。

・HTMLのサイトであればFTPソフトを使い、ダウンロードしてからアップロード、もしくはサーバーのファイルマネージャーから直接編集しちゃいます。

 

・WordPressの場合は、管理画面の「外観」→「テーマエディター」から編集出来るので楽ですね!

 

WordPressのテーマエディター

【CSS】スタイルシート (style.css) を編集する事が多いと思いますが、子テーマをお使いの場合、子テーマの【CSS】を編集しましょう。

子テーマにコードがない場合は、親テーマの編集したい箇所のコードを子テーマにコピペして、子テーマで編集して下さい。

 

コードを探す時はページ内検索でコードのある場所を探しましょう。

Windowsの場合は「Ctrl + F」

Macなら「command + F」です。

 

WordpressのCSSでコード検索

・コードを編集して、「ファイルを更新」をクリックすれば、編集完了です!

 

WordPressのCSS更新

実際にサイトを開いて正しく反映されているか確認してみましょう。

反映されない場合はキャッシュが原因かもしれませんので、スーパーリロードかキャッシュの削除をしてもう一度確認してみて下さい。

スーパーリロードとキャッシュ削除のやり方

 

 

・簡単なものなら追加CSSでコードを追加するだけでも大丈夫ですよ。

追加CSSとstyle.cssで大きな違いはありませんが、style.cssの方が管理がしやすいので、なるべく子テーマのstyle.cssで編集する事をオススメします。

 

「管理画面」→「外観」→「カスタマイズ」→「追加CSS」

 

Wordpressの追加CSS

 

Safari開発の使い方

MacでいつもSafariを使っている人は、Google ChromeのデベロッパーツールでなくてもSafariの開発メニュー(Webインスペクタ)で同様の事が出来ます。

 

ただ、設定をしないと開発メニューはデフォルトだとありません。

・まずSafariを開き、Safariの「環境設定」をクリック。

 

Safariの環境設定

・「詳細」タブをクリックし、一番下にある「メニューバーに"開発"メニューを表示」にチェックを入れて下さい。

 

Safariの環境設定で開発メニューを追加

これでSafariのメニューに「開発」が追加されたと思います。

 

 

・コードを見たい、もしくは編集したいページにアクセスし、画面上にある「開発」メニューをクリック。

続いて「Webインスペクタを表示」をクリックして下さい。(スクショの都合で接続になっていますが気にしないで下さい。)

「ページのソースを表示」でも大丈夫です。

Safariの開発メニュー

・Google Chromeのデベロッパーツールと同じく

 

左側が「HTML」

右側が「CSS」となっています。

CSSのコードが表示されない場合は、CSS側のボックスの左上の「スタイル」をクリックして下さい。

 

SafariのWebインスペクタ

・以下の画像の「赤い矢印の所のアイコン」をクリックして下さい。(音楽のcodaマークに似てるやつです。)

・続いて編集したい場所にカーソルを合わせて下さい。

 

SafariのWebインスペクタの使い方

するとカーソルを合わせた場所の「HTML」と「CSS」が表示されます。

カーソルを合わせた場所の吹き出しにはタグやコードが表示されます。

 

この辺はGoogle Chromeのデベロッパーツールとほぼ同じですよね。

 

・HTMLやCSSのコードをダブルクリックすると、同じく直接編集が出来ます。

もちろんリアルタイムで反映されますので、ここでカスタマイズ、レイアウトの確認が出来ます。

 

SafariのWebインスペクタで編集のやり方

-CSS-

SafariのWebインスペクタでCSS編集のやり方

SafariのWebインスペクタでCSS編集結果

メモ

デベロッパーツールと同じく、Safari上で一時的に編集されるだけですので、ここで色々いじったからと言って、サイトが本当に編集されるわけではありません。

再読み込みすれば元に戻ります。

 

・CSSのコード、タグにエラーがある場合、三角形の「!」がコードの右側に表示されます。

※横線(打ち消し線)はデベロッパーツールの時と同じく何かしらの理由でそのCSSが適応せれていないという意味です。エラーとは限りませんのでご安心を。

 

Safariの開発メニューのCSS編集

この場合、pxに数値がないのが原因なので「margin-top: 0px;」などのように数字を入れてあげればエラーが消えると思います。

 

・また、コードの横にあるチェックボックスのチェックを外すと適応が外れます。

これでやりたいカスタマイズがどのコード、タグなのかを確認する事も出来ますね。

 

 

・Webインスペクタの左上、赤枠の所をクリックすると、インスペクタの配置が変わります。

(下側から横側になったり、別ウインドウになったりします。)

 

SafariのWebインスペクタ使い方

・「タイムライン」タブをクリックするとページの読み込み速度の確認なども出来ます。

 

Safari開発でのレスポンシブデザイン確認方法

・「開発メニュー」から「レスポンシブ・デザイン・モードにする」をクリックするとスマホやiPadなどのレイアウトも確認する事が出来ます。(スクショの都合でレスポンシブ・デザイン・モードを終了となっていますが気にしないで下さい。)

 

Safariの開発メニューでレスポンシブデザイン確認方法

 

Safari開発でのエラー確認方法

・Webインスペクタの「コンソール」タブをクリックし、その下にある「エラー」をクリックして下さい。

エラーがある場合は、ここにエラーメッセージが表示されます。

 

Safari開発でのエラー確認方法

 

Safari開発で確認したらサーバーにアップロード

Safariの開発(Webインスペクタ)で編集確認をしただけではサイトは編集されません。

実際のサイト編集は、この記事の上に戻りデベロッパーツールで確認したらサーバーにアップロードを見ながらやってみて下さい。

 

やり方、手順は全く同じです。

 

 

希望通りの編集は出来ましたか?

デベロッパーツール、Safariの開発 Webインスペクタの使い方を覚えると、サイトの編集がウンと楽になりますよね!

 

是非これからも有効的に使って下さい。

 

今日はここまで。

-カスタマイズ
-

© 2020 mitanote