Chrome」の検証機能を利用して反映したいCSSを調査したり、変更後の見た目をリアルタイムでプレビューしたり、それを実際にWordPressの管理画面から設定する方法です。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。イトのノウハウを発信する当ブログを開設。ブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全』(大和書房)などがある。マクリンいや、俺なんてそんな、どこにでもいるただのマクリンですよ。副業でガジェットサイト「マクリン」の運営を開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめる。Chrome」を使用します。Chromeで自分のブログを開いてください。※他のサイトのCSSを見てみたい方は、他のサイトでもOKです。本記事ではWordPressのテストブログ(テーマはCocoon)をお見せしつつ、デザインの変更を実践していきたいと思います。こちらが今回使用するテストブログ「Cocoonメソッド」です。ブログのタイトル名部分に使われているCSSを調査してみます。STEP見たい部分を選択カーソルでブログタイトル部分を選択します。STEP検証そのまま右クリックして「検証」を押してみましょう。STEPソースコードの表示すると、右側に文字がびっしり表示された「ソースコード」が表示されます。ソースコードをよく見てみると表示が2列に分かれていますよね。左側にHTML、右側にCSSが表示されています。左側のグレーにハイライトされている部分がさきほど選択したタイトルのHTML記述です。右側にはこのタイトルに関わるすべてのCSSが表示されています。normal;}というように記述されています。#333;は文字色のことを設定をしているのが、なんとなくわかると思います。検証」をするとその部分に関するHTMLとCSSが調べられるということがわかりました!次は実際にブログの見た目を変更(変更後のプレビューを表示)してみます。リアルタイムでブログの見た目を変更このChromeの検証パネルはHTMLやCSSを調べるだけでなくリアルタイムで見た目(デザイン)を変更することも可能です!正確にいうと変更した際にどうなるかをプレビューで見ることができるってことです。STEPフォントサイズの変更まずフォントサイズ(文字の大きさ)を変更してみましょう。28px;}の「28px」の部分をダブルクリックし「68px」に変更してください。STEPプレビュー表示タイトルの文字が大きくなりましたね!STEP文字色の変更つぎに文字の色を変更してみましょう。normal;}の黒い四角いマーク(■)の箇所をクリックして色を変えてみましょう。コマンド;}と表示されているCSSの記述内容を変更すると、ブログの見た目をリアルタイムで変更することができるのです。他にも余白やフォント変更など、CSSにさまざまなコマンド(命令)を記述することで、デザイン変更した際の検証(プレビュー)を見ることができます。これは自分のブログだけではなく、他人のサイトでも行うことができます。コマンドに関しては下記のサイトが参考になるはずです。HTMLタグ・スタイルシート・特殊文字等の早見表CSSを新しく記述することもここまではすでにあるCSS記述の変更方法を紹介しましたが本章では新たに1からCSSを記載してみます。STEP設定したい部分の選択まず、先ほどのChromeの検証パネルで、タイトル下のシェアボタンのどれかを選択します。STEP親階層のHTMLシェアボタンのHTMLの記述のひとつ上、親階層のHTMLを選択します。STEPCSSクラス記述の表示CSS表示欄のプラスボタンアイコンを押します。すると下記のように自動でCSSのクラスの記述が表示されます。{}STEPコマンドを入力{}の中にCSSのコマンドを入力してみましょう。今回は非表示にするコマンドを入れてみます。「d」と打つとコマンドの候補方法が現れるので「display」を選択してEnterキーを押します。続いてパラメーター候補が表示されるので「none」を選びましょう。none;}の記述は表示を消したい時によく使うコマンドです。更新すると設定が消えてしまいます。実際にブログのデザイン変更を反映させるためには、WordPressのしかるべき場所にCSSに変更についての記述を行なう必要があります。多くの人はWordPress内のカスタマイズの追加CSSの欄に書きがちですが、ちゃんとCSSを管理をしていくなら下記の方法がおすすめです。STEPスタイルシート右のメニューからスタイルシートを選択。STEPコード入力スタイルシートの中に、先ほど新しく作ったコードを入力します。none;}※補足/コメント/でなんのカスタマイズかメモを入れておくと後で見返した時にわかりやすいです。最後に画面下にある「ファイルを更新」ボタンを押しましょう!ブログを再び見てみると...しっかりタイトル下のシェアボタンが非表示になっていますね。今回は、ブログのデザインをカスタマイズする際に便利なChromeの検証機能を紹介しました。反映する手順としてぜひ参考にしてみてください。Chromeの検証機能は、HTMLやCSSを調べることもできますし、リアルタイムで表示の変更検証(プレビュー)をすることもできます。この方法を活用することで、あなたのブログ、あなたのサイトを自分好みの理想のデザインにカスタマイズできるようになります。今回ご紹介した方法以外にもさまざまなブログのカスタマイズ方法、おすすめのChrome拡張機能、便利グッズなどを紹介しています。一緒にあなたの理想のウェブサイトを作りましょう!当社では、カスタマイズからデザインまでトータルでWeb制作が可能です。名前メールサイト上に表示された文字を入力してください。カースト制度】日本人を年収・職業で12階級に仕分けてみた。