▶ 限定500円割引付き!WordPressの始め方はコチラ

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

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

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

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

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

収益&アクセスを激増させるツール紹介

ブログ&アフィリエイトの収益SEO集客アクセス流入を改善させる、

筆者おすすめのツールを紹介します。

SEOに強い記事を作れるツール!

エクセル、事前準備シート

収益がなかなか発生しない…」
検索順位が上がらず、アクセスも少ない…」

このようなお悩みの原因の99%は、記事の書き方がダメだから。

そしてその記事の品質は、記事を書き始める前の調査・準備の段階でほぼすべてが決まってしまいます。

そんなあなたにおすすめのツールが『 事前準備シート』。

事前準備シートは、下記のような記事作成に必要なあらゆる要素を1枚のエクセルシートにまとめたツールです。

  • キーワード調査
  • 検索結果ページの調査
  • 競合サイトの調査
  • ペルソナ(中心的ターゲット像)の設定
  • 検索意図の調査
  • 仮タイトルの候補案を作成
  • 記事構成(見出し構成)を作成

これらの事前調査をしておくことで記事の質は格段に向上し、

アクセスや収益を上げやすい記事、検索エンジンに評価されやすい記事を作ることができます。

ブログで累計1億円の確定収益を上げた筆者がふだんから利用している自作ツールです。

長年にわたってカスタムを続けた自信作。一度購入すればずっと使うことができます。

下記から1,500円で購入できますので、ぜひご利用ください。

「売れる記事テンプレート」が収益UP!

ブログ記事を書いている、ノートパソコンで作業中

ブログやアフィリエイトで商品を売るためには、

売れるための話の進め方・記事の書き方があります。

トップ営業マンが使う「セールストーク」のように、

ブログやアフィリエイトにも「セールスライティング」が存在するのです。

私サンツォがふだんからよく利用している5つの記事テンプレートをnoteにまとめましたので、

ぜひ下記からご確認ください。

お悩み相談&コンサルティング実施中!

マーケティング、分析03
  • ブログやアフィでなかなか結果が出ない
  • このままでいいのか心配になった
  • 記事の書き方はこれでいいのかな
  • 分野やサイト設計で迷っている

…などで不安を感じたり、悩んでいる方は、ぜひ私サンツォにご相談ください。

チャットやオンラインMTGにて、お悩み相談コンサルティングを受けつけています。

有料にはなりますが、悩んで立ち止まっていたり、

間違った方法を続けていても時間と手間のムダになりますので、ぜひ一度ご相談ください。

以下からお申し込みいただけます。

超高速&格安レンタルサーバーが限定500円OFF!

国内最速!超高性能&格安レンタルサーバーの「ConoHa WING」。

今ならキャンペーン中につき月額640円~で利用することができます。しかも初期費用は無料

しかも当「ブログ部」なら、さらに500円OFFになる特典付き!くわしくは下記の記事をご参照ください。

WordPressのカスタム・引越し・問題解決なら!

もしWordPressに関することで困ったことがあったら「サイト引越し屋さん」に相談しよう

WordPressからWordPressへの引越し、ドメイン移管、テーマ変更。無料ブログからWordPressへの引越し。

WordPressのカスタムやサイト高速化、セキュリティ対策など、あらゆる問題・お悩みを解決してくれるサービスです!

サンツォのアイコン画像サンツォ

僕もいつもお世話になっているよ!
相談は無料なので、まずは問い合わせしてみよう!

\ WordPressで困ったことがあったら! /

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる