ブログ運営ノウハウ(集客/収益)

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

投稿日:2020-06-01 更新日:

ブログのCSSを使って理想のデザインに自由にカスタム。CSSの調べ方&調整方法

 

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

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

 

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

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

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

 

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

 

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

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

 

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

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

 

ブログで使われている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が調べられるということがわかりました!

 

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

 

 

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

WordPressの始め方

 

この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で稼ぐなら!
    【国内最速!超高性能&格安レンタルサーバー】

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

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

     

    まとめると、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
    ファイル更新

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

     

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

     

     

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

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

 

 

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

 

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

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

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

 

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

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

 

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

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

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

 

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

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

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

 

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

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

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

 

 

 

 

-ブログ運営ノウハウ(集客/収益)
-, , ,

Copyright© ブログ部 , 2020 AllRights Reserved.

【割引クーポン付】初心者でもたった30分でワードプレスを始める!当ブログ限定でサーバー代が割引に!
こちらをクリック
【限定割引】スマホだけでワードプレスを始める!
ここをタップ