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

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

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

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

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

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

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

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

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

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

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

目次

ブログで使われている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にさまざまなコマンド(命令)を記述することで、

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

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

 

WordPressで稼ぐなら!
【国内最速!超高性能&格安レンタルサーバー】

初心者なら迷わずコレ一択!高速&高性能&格安のレンタルサーバー

当サイトの限定特典500円OFF
しかもコノハなら初期費用無料

 

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

あわせて読みたい
スタイルシートリファレンス(目的別)HTMLタグ・スタイルシート・特殊文字等の早見表

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ブロガーのすいみんがお届けしました!

WordPressを始めるなら!
【国内最速!超高性能&格安レンタルサーバー】

当サイト限定特典500円OFF!
しかもコノハなら初期費用無料!

 

 

 

 

コメント

コメントする

CAPTCHA


目次
閉じる