WordPressの始め方を分かりやすく解説!こちらをクリック

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

  • URLをコピーしました!

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

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

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

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

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

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

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

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

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

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

目次

SEOに強くて、お洒落で、記事制作スピードも速いテーマ!
マクサンでも使っている超おすすめテーマ「SWELL」はこちら!

1976年生まれ。東京都出身。合同会社田舎暮らし代表。複数の業界にて20年近くWebマーケティングの仕事に携わる。2013年より副業でブログを開始。 複数のブログ・SNSを運営した経験を活かし、ブログやアフィリエ イトのノウハウを発信する当ブログを開設。またブロガーのためのオンラインサロン「マクサン」の共同オーナーを務める。フォロワー10万人を抱えるInstagram「ベランダ飯」も運営。借金地獄のどん底からブログ一本で這いあがり、月収300~400万円を稼げるように。2020年2月には累計収益が1億円を突破。著書に『マクサン式Webライティング実践スキル大全(マクサン本)』(大和書房)などがある。GMOのオウンドメディア「ワプ活」で全記事の監修も務める。本名は吉岡 智将

いや、俺なんてそんな、どこにでもいるただのマクリンですよ。 副業でガジェットサイト「マクリン」の運営を2017年5月に開始し、2019年12月に副業を株式会社makuriに法人化。2020年4月に合同会社レイテラスを設立し、コワーキングスペース「レイテラス」を開店。撮影スタジオ「レイテラススタジオ」もスタート。ブロガー向けオンラインサロン「マクサン」の共同オーナーをつとめ「マクサン本」の共著者。

※当ページの情報は執筆時点のものであり、最新の情報は各サービスの公式サイトよりご確認ください。
※当ページのリンクには広告が含まれる場合があります。

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

ブログのCSS、デザインのカスタマイズ

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

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

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

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

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

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

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

STEP
見たい部分を選択

カーソルでブログタイトル部分を選択します。

STEP
検証

そのまま右クリックして「検証」を押してみましょう。

STEP
ソースコードの表示

すると、右側に文字がびっしり表示された「ソースコード」が表示されます。

ソースコードをよく見てみると表示が2列に分かれていますよね。

左側にHTML、右側にCSSが表示されています。

左側のグレーにハイライトされている部分がさきほど選択したタイトルのHTML記述です。

右側にはこのタイトルに関わるすべてのCSSが表示されています。

STEP
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;
文字色のこと

を設定をしているのが、なんとなくわかると思います。

STEP
基本の文法

わかりやすくまとめるとCSSの記述は.クラス名{ コマンド;

というような文法で設定できるのですね!

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

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

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

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

WordPressの始め方

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

リアルタイムで見た目(デザイン)を変更することも可能です!

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

STEP
フォントサイズの変更

まずフォントサイズ(文字の大きさ)を変更してみましょう。

CSS表示の.site-name-text {font-size: 28px;}

の「28px」の部分をダブルクリックし「68px」に変更してください。

STEP
プレビュー表示

タイトルの文字が大きくなりましたね!

STEP
文字色の変更

つぎに文字の色を変更してみましょう。

CSS表示の

.site-name-text-link {color: ■#333;text-decoration: none;font-weight: normal;}

の黒い四角いマーク(■)の箇所をクリックして色を変えてみましょう。

STEP
プレビュー表示

文字色が赤く変わりましたね!

STEP
見た目の変更方法

まとめると、Chromeの検証パネル

.クラス名{ コマンド;}

と表示されているCSSの記述内容を変更すると、

ブログの見た目をリアルタイムで変更することができるのです。

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

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

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

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

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

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

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

STEP
設定したい部分の選択

まず、先ほどのChromeの検証パネルで、

タイトル下のシェアボタンのどれかを選択します。

STEP
検証

そのまま右クリック > 検証 を押します。

STEP
親階層のHTML

シェアボタンのHTMLの記述のひとつ上、親階層のHTMLを選択します。

STEP
CSSクラス記述の表示

CSS表示欄のプラスボタンアイコンを押します。

すると下記のように自動でCSSのクラスの記述が表示されます。

.sns-share-buttons.sns-buttons {}

STEP
コマンドを入力

{}の中にCSSのコマンドを入力してみましょう。

今回は非表示にするコマンドを入れてみます。

「d」と打つとコマンドの候補方法が現れるので

「display」を選択してEnterキーを押します。

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

STEP
記載の完了

.sns-share-buttons.sns-buttons {display: none;}

するとシェアボタンの表示が消えました!

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

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

※補足

.クラス名 {
display: none;
}

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

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

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

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

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

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

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

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

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

STEP
テーマエディタ

WordPressの管理画面を開き、外観 > テーマエディタ を選択。

STEP
スタイルシート

右のメニューからスタイルシートを選択。

STEP
コード入力

スタイルシートの中に、先ほど新しく作ったコードを入力します。

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

※補足

/コメント/でなんのカスタマイズかメモを入れておくと後で見返した時にわかりやすいです。

STEP
ファイル更新

最後に画面下にある「ファイルを更新」ボタンを押しましょう!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

コメントは日本語で入力してください。(スパム対策)

目次