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

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

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

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

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

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

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

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

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

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

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

タップできる【目次】

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

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

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

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

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

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

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

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

STEP1
見たい部分を選択
カーソルでブログタイトル部分を選択します。
STEP2
検証
そのまま右クリックして「検証」を押してみましょう。
STEP3
ソースコードの表示
すると、右側に文字がびっしり表示された「ソースコード」が表示されます。

ソースコードをよく見てみると表示が2列に分かれていますよね。
左側にHTML、右側にCSSが表示されています。

左側のグレーにハイライトされている部分がさきほど選択したタイトルのHTML記述です。
右側にはこのタイトルに関わるすべてのCSSが表示されています。
STEP4
CSS記述の確認
HTMLは
<span class="site-name-text" itemprop="name about">Cocoonメソッド</span>
書かれているのに対し、
CSSは
.site-name-text {
font-size: 28px;
}
.site-name-text-link {
color: #333;
text-decoration: none;
font-weight: normal;
}
というように記述されています。

CSSの記述を読んでみると
font-size: 28px;
は文字サイズのこと
color: #333;
は文字色のこと
を設定をしているのが、なんとなくわかると思います。
STEP5
基本の文法
わかりやすくまとめるとCSSの記述は
.クラス名｛
　コマンド;
｝
というような文法で設定できるのですね！

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

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

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

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

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

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

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

STEP1
フォントサイズの変更
まずフォントサイズ（文字の大きさ）を変更してみましょう。
CSS表示の
.site-name-text {
font-size: 28px;
}
の「28px」の部分をダブルクリックし「68px」に変更してください。
STEP2
プレビュー表示

タイトルの文字が大きくなりましたね！
STEP3
文字色の変更
つぎに文字の色を変更してみましょう。
CSS表示の
.site-name-text-link {
color: ■#333;
text-decoration: none;
font-weight: normal;
}
の黒い四角いマーク（■）の箇所をクリックして色を変えてみましょう。
STEP4
プレビュー表示

文字色が赤く変わりましたね！
STEP5
見た目の変更方法

WordPressで稼ぐなら！
【国内最速！超高性能＆格安レンタルサーバー】
初心者なら迷わずコレ一択！高速＆高性能＆格安のレンタルサーバー
ConoHa WING 公式サイト
当サイトの限定特典500円OFF！
しかもコノハなら初期費用無料！
▼WordPress開設完全ガイド▼
パソコンで始める！スマホだけで始める！

まとめると、Chromeの検証パネルで
.クラス名｛
　コマンド;
｝
と表示されているCSSの記述内容を変更すると、
ブログの見た目をリアルタイムで変更することができるのです。

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

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

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

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

「スタイルシートリファレンス」

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

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

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

STEP1
設定したい部分の選択
まず、先ほどのChromeの検証パネルで、
タイトル下のシェアボタンのどれかを選択します。
STEP2
検証
そのまま右クリック＞検証 を押します。
STEP3
親階層のHTML
シェアボタンのHTMLの記述のひとつ上、親階層のHTMLを選択します。
STEP4
CSSクラス記述の表示
CSS表示欄のプラスボタンアイコンを押します。
すると下記のように自動でCSSのクラスの記述が表示されます。
.sns-share-buttons.sns-buttons {
}
STEP5
コマンドを入力
｛｝の中にCSSのコマンドを入力してみましょう。
今回は非表示にするコマンドを入れてみます。

「d」と打つとコマンドの候補方法が現れるので
「display」を選択してEnterキーを押します。

続いてパラメーター候補が表示されるので「none」を選びましょう。
STEP6
記載の完了

.sns-share-buttons.sns-buttons {
display: none;
}
するとシェアボタンの表示が消えました！

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

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

※補足

.クラス名 {
display: none;
}

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

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

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

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

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

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

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

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

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

STEP1
テーマエディタ
WordPressの管理画面を開き、外観＞テーマエディタ を選択。
STEP2
スタイルシート
右のメニューからスタイルシートを選択。
STEP3
タイトル3
スタイルシートの中に、先ほど新しく作ったコードを入力します。

/*タイトル下のシェアボタンを非表示*/
.sns-share-buttons.sns-buttons {
display: none;
}

※補足
/*コメント*/でなんのカスタマイズかメモを入れておくと後で見返した時にわかりやすいです。
STEP4
ファイル更新
最後に画面下にある「ファイルを更新」ボタンを押しましょう！

ブログを再び見てみると...

しっかりタイトル下のシェアボタンが非表示になっていますね。