「ワードプレスのデザインを少し修正したい！」
「WEBの知識ないけどデザインを簡単に修正する方法はないの？」
サイト運営ではデザインや外観は非常に重要な要素ですが、少し修正するだけでもコードの知識がなければ実際問題修正が難しい。ということありますよね？
・デザイナーに頼むほどではないし、頼んだら時間がかかる。
・できれば自分でサクッと変更したい！
そんなあなたに、WEBデザイナーから学んだ「Google Chrome ディベロッパーツール」で修正するやり方を伝授したいと思います。
この方法を使えば、「サイトでここを修正したい」と感じたらサクッと変更できてしまいますよ。
しかも修正前後を確認しながらできるので、時間も非常に削減できます。
※ディベロッパーツール（開発者モード）を知らない人、使ったことない人向けの記事です。
目次
ワードプレスのデザイン（CSS）をテストしながら簡単に変更する方法
私がデザインの修正を行うときに必ず利用しているのが「Google Chrome ディベロッパーツール（別名：開発者モード）」です。
ディベロッパーツールとは、WEBデザイナーがデザイン修正をする際にCSSやHTMLを実際のコードを触る前にテストできる環境のことになります。
・Macであれば、「option+command+I」か「shift+command+c」
・文字サイズの拡大「command+ +」
・文字サイズの縮小「command+ -」
・文字サイズのリセット「command+0」
Windowsであれば、「F12」を押せばディベロッパーツール（開発者モード）にすることができます。
機能の説明を簡単にしますね。
ディベロッパーツールの簡単な機能説明
まずはじめに機能を簡単に説明します。
よく使うボタンは下記の２つのボタンです。
２．表示形式をPC版とスマホ版に切り替える際に利用するボタン
まずはこの二つのボタンを抑えておけば大丈夫です。
デザイン確認ボタンの使い方
使い方は簡単で、まずはボタンをクリックします。
その次に、デザインを変更したい箇所までカーソルを持っていきます。
変更したい箇所をクリックすると、そのデザインを定義しているCSSが表示されますので、その部分の変更したい箇所を修正してみて思い通りになるかどうかを確認。
その後、実際のワードプレスの対象コードを修正し確定したらデザインの修正は完了です。
PCとスマホの切り替えボタン
ボタンを押すと、PC表示からスマホ表示に切り替わります。
実際のスマホを確認しなくてもPC上である程度表示のテストができるので便利です。
今の時代、スマホからアクセスする人が大半なので、PCでサクッとスマホ表示の確認ができるのは非常に便利ですね。
ディベロッパーツールを使えば、テストしながらデザイン修正が可能
ディベロッパーツール（開発者モード）のいいところは、デザイン修正がテストしながら行えるところです。
デザイン修正の知識がないと（ディベロッパーツールを知る前の私）、いきなり修正すべきCSSやHTMLのコードを直に修正して、本番環境で修正したものが正しく反映しているかを確認する。ということを平気でやっています。
これで一発で修正が完了すればいいですが、一度修正して確定したコードは基本的に元に戻すことができません。また、変なところを修正してしまった場合表示が崩れて元に戻せない、というリスクもあります。
コードを触っていて画面が真っ白になってしまうというのは、ワードプレスに慣れてない頃によくやりがちが失敗ですが、こうなってからパニックにならないようにぜひ今回紹介したディベロッパーツール（開発者モード）を活用するようにしましょう。
ディベロッパーツールであれば、修正したCSSが実際にサイト上でどのように表示されるのかを確認でき、意図した修正ができたらそのコードに変更すればいいので時間短縮にもなりますし表示崩れの心配がないのがいいです。
テストしたらCSSを実際に修正する
対象のCSSが格納されている場所を示しているのが赤枠部分になります。
私の場合は、賢威というテンプレートを使用しているので、base.cssという所に対象のデザインを定義しているCSSが記載されているというのがわかります。
ワードプレスの管理画面サイドバーにある、「外観」-「テーマの編集」と進み、対象の格納先から修正したいCSSを検索で探し修正しましょう。
場所を探す際は、CSSをコピーして検索すると見つけやすいのでおすすめです。
CSSを編集する際の注意点
上記の変更でカラーや幅の調整などは可能ですが、根本的な骨組みの変更などは基本的に難しいです。あくまでもテキストサイズの大きさや色み、枠線の調整、などの見た目のデザイン部分を変更する方法と考えてください。
サイト全体の変更を希望する場合は、クラウドワークス
などでWEBデザイナーに依頼する方がいいかと思います。
私もバナーの作成やロゴの作成などクラウドワークスなどを利用することが多くありますが、特にデザイン関係はかなりの低コストで請け負ってくれるので非常に重宝しています。
値段が安くてもクオリティーが高い方もいるのでかなりいいですね。
まとめ：ワードプレスのデザインをテストしながら簡単に変更する方法
ワードプレスのデザイン変更をする方法について解説しました。
結論としては、ディベロッパーツール（開発者モード）を利用しましょう。ということですね。
WEBデザイナーからするとディベロッパーツールは常識なんですが、意外とご自身でサイト運営している方からすると、「え！そんな方法があったの！？」とびっくりされたのではないかと思います。
何を隠そう、私も最初知ったときはびっくりしましたし、もっと早く知りたかった！と思いました。
もう一度お伝えすると、ディベロッパーツール（開発者モード）を表示するショートカットキーはこちらです。
・文字サイズの拡大「command+ +」
・文字サイズの縮小「command+ -」
・文字サイズのリセット「command+0」
・Windowsの場合「F12」
ディベロッパーツールを活用してデザインを洗練させて人気サイトにしていきましょう！
新宮秀也
最新記事 by 新宮秀也 (全て見る)
- ネット副業の詐欺の手口と3つの対策を解説！当てはまったら即辞めてください！ - 2020年1月8日
- フリーランス必見の税金対策完全版！たった3つのことをしておくだけで大丈夫！ - 2020年1月8日
- 【完全保存版】ネットでできる副業のおすすめ15選！あなたの適正とマッチするものが必ず見つかります！ - 2020年1月8日
コメント