【ブログのCSS】理想のデザインに自由にカスタム！CSSの調べ方＆調整方法

今回はCSS（スタイルシート）を使って、

あなたのブログを理想のデザインに＆自由自在にカスタムする方法を解説します！

具体的にいうと「Google Chrome」の検証機能を利用して

反映したいCSSを調査したり、変更後の見た目をリアルタイムでプレビューしたり、

それを実際にWordPressの管理画面から設定する方法です。

「ここの文字色やフォントサイズを変更したい！」
「このブログみたいにカスタムしたいんだけどな…」
「デザインを変更したいんだけど、どうやればいいんだろう？」

…みたいな感じで、好みのデザイン変更やカスタム方法をネットで検索しても、

なかなかピンポイントで見つからないことってありますよね？

そこで本記事では、CSSの調べ方や変更後のデザインをプレビューする方法を

キャプチャ画像を使いつつ解説いたします！

ブログで使われているCSSを調べる方法

今回ご紹介する方法は前提条件として、WEBブラウザは「Google Chrome」を使用します。

まずはGoogle Chromeで自分のブログを開いてください。

※他のサイトのCSSを見てみたい方は、他のサイトでもOKです。

本記事ではWordPressのテストブログ（テーマはCocoon）をお見せしつつ、

デザインの変更を実践していきたいと思います。

こちらが今回使用するテストブログ「Cocoonメソッド」です。

まずはブログのタイトル名部分に使われているCSSを調査してみます。

以上のように「調べたい場所を選択して右クリック ＞ 検証」をすると

その部分に関するHTMLとCSSが調べられるということがわかりました！

次は実際にブログの見た目を変更（変更後のプレビューを表示）してみます。

リアルタイムでブログの見た目を変更

このChromeの検証パネルはHTMLやCSSを調べるだけでなく

リアルタイムで見た目（デザイン）を変更することも可能です！

正確にいうと変更した際にどうなるかをプレビューで見ることができるってことです。

他にも余白やフォント変更など、CSSにさまざまなコマンド（命令）を記述することで、

デザイン変更した際の検証（プレビュー）を見ることができます。

これは自分のブログだけではなく、他人のサイトでも行うことができます。

また、コマンドに関しては下記のサイトが参考になるはずです。

CSSを新しく記述することも

ここまではすでにあるCSS記述の変更方法を紹介しましたが

本章では新たに1からCSSを記載してみます。

以上で、CSSを調べて、コマンドを入力して、

自分のブログの表示をカスタマイズ（の検証、プレビュー）を行うことができました！

※補足

.クラス名 {
display: none;
}

の記述は表示を消したい時によく使うコマンドです。覚えておきましょう！

もちろん検証で変更しただけだとあくまで仮の表示変更ですので、

更新すると設定が消えてしまいます。

実際にブログのデザイン変更を反映させるためには、

WordPressのしかるべき場所にCSSに変更についての記述を行なう必要があります。

WordPressにCSS追記するおすすめの方法

CSSのカスタマイズをする場合、

多くの人はWordPress内のカスタマイズの追加CSSの欄に書きがちですが、

ちゃんとCSSを管理をしていくなら下記の方法がおすすめです。

これで、実際にあなたのブログにCSSを反映させることができました！

自分好みの理想のブログに！CSSの調べ方＆設定方法

今回は、ブログのデザインをカスタマイズする際に便利な

Chromeの検証機能を紹介しました。

CSSの調査 ⇒ プレビュー ⇒ 反映する手順としてぜひ参考にしてみてください。

Chromeの検証機能は、HTMLやCSSを調べることもできますし、

リアルタイムで表示の変更検証（プレビュー）をすることもできます。

この方法を活用することで、あなたのブログ、あなたのサイトを

自分好みの理想のデザインにカスタマイズできるようになります。

ぜひぜひ試してみてください。

今回ご紹介した方法以外にも

さまざまなブログのカスタマイズ方法、おすすめのChrome拡張機能、便利グッズなどを紹介しています。

ぜひ下記のページをチェックしてみてください！

以上、CGデザイナー・CGブロガーのすいみんがお届けしました！