今回はCSS（スタイルシート）を使って、
あなたのブログを理想のデザインに＆自由自在にカスタムする方法を解説します！
具体的にいうと「Google Chrome」の検証機能を利用して
反映したいCSSを調査したり、変更後の見た目をリアルタイムでプレビューしたり、
それを実際にWordPressの管理画面から設定する方法です。
「ここの文字色やフォントサイズを変更したい！」
「このブログみたいにカスタムしたいんだけどな…」
「デザインを変更したいんだけど、どうやればいいんだろう？」
…みたいな感じで、好みのデザイン変更やカスタム方法をネットで検索しても、
なかなかピンポイントで見つからないことってありますよね？
そこで本記事では、CSSの調べ方や変更後のデザインをプレビューする方法を
キャプチャ画像を使いつつ解説いたします！
ブログで使われているCSSを調べる方法
今回ご紹介する方法は前提条件として、WEBブラウザは「Google Chrome」を使用します。
まずはGoogle Chromeで自分のブログを開いてください。
※他のサイトのCSSを見てみたい方は、他のサイトでもOKです。
本記事ではWordPressのテストブログ（テーマはCocoon）をお見せしつつ、
デザインの変更を実践していきたいと思います。
こちらが今回使用するテストブログ「Cocoonメソッド」です。
まずはブログのタイトル名部分に使われているCSSを調査してみます。
カーソルでブログタイトル部分を選択します。
そのまま右クリックして「検証」を押してみましょう。
すると、右側に文字がびっしり表示された「ソースコード」が表示されます。
ソースコードをよく見てみると表示が2列に分かれていますよね。
左側にHTML、右側にCSSが表示されています。
左側のグレーにハイライトされている部分がさきほど選択したタイトルのHTML記述です。
右側にはこのタイトルに関わるすべての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;
は文字色のこと
を設定をしているのが、なんとなくわかると思います。
わかりやすくまとめるとCSSの記述は.クラス名｛ コマンド;｝
というような文法で設定できるのですね！
以上のように「調べたい場所を選択して右クリック ＞ 検証」をすると
その部分に関するHTMLとCSSが調べられるということがわかりました！
次は実際にブログの見た目を変更（変更後のプレビューを表示）してみます。
リアルタイムでブログの見た目を変更
このChromeの検証パネルはHTMLやCSSを調べるだけでなく
リアルタイムで見た目（デザイン）を変更することも可能です！
正確にいうと変更した際にどうなるかをプレビューで見ることができるってことです。
まずフォントサイズ（文字の大きさ）を変更してみましょう。
CSS表示の.site-name-text {font-size: 28px;}
の「28px」の部分をダブルクリックし「68px」に変更してください。
タイトルの文字が大きくなりましたね！
つぎに文字の色を変更してみましょう。
CSS表示の
.site-name-text-link {color: ■#333;text-decoration: none;font-weight: normal;}
の黒い四角いマーク（■）の箇所をクリックして色を変えてみましょう。
文字色が赤く変わりましたね！
まとめると、Chromeの検証パネルで
.クラス名｛ コマンド;｝
と表示されているCSSの記述内容を変更すると、
ブログの見た目をリアルタイムで変更することができるのです。
他にも余白やフォント変更など、CSSにさまざまなコマンド（命令）を記述することで、
デザイン変更した際の検証（プレビュー）を見ることができます。
これは自分のブログだけではなく、他人のサイトでも行うことができます。
また、コマンドに関しては下記のサイトが参考になるはずです。
CSSを新しく記述することも
ここまではすでにあるCSS記述の変更方法を紹介しましたが
本章では新たに1からCSSを記載してみます。
まず、先ほどのChromeの検証パネルで、
タイトル下のシェアボタンのどれかを選択します。
そのまま右クリック ＞ 検証 を押します。
シェアボタンのHTMLの記述のひとつ上、親階層のHTMLを選択します。
CSS表示欄のプラスボタンアイコンを押します。
すると下記のように自動でCSSのクラスの記述が表示されます。
.sns-share-buttons.sns-buttons {}
｛｝の中にCSSのコマンドを入力してみましょう。
今回は非表示にするコマンドを入れてみます。
「d」と打つとコマンドの候補方法が現れるので
「display」を選択してEnterキーを押します。
続いてパラメーター候補が表示されるので「none」を選びましょう。
.sns-share-buttons.sns-buttons {display: none;}
するとシェアボタンの表示が消えました！
以上で、CSSを調べて、コマンドを入力して、
自分のブログの表示をカスタマイズ（の検証、プレビュー）を行うことができました！
※補足
.クラス名 {display: none;}
の記述は表示を消したい時によく使うコマンドです。覚えておきましょう！
もちろん検証で変更しただけだとあくまで仮の表示変更ですので、
更新すると設定が消えてしまいます。
実際にブログのデザイン変更を反映させるためには、
WordPressのしかるべき場所にCSSに変更についての記述を行なう必要があります。
WordPressにCSS追記するおすすめの方法
CSSのカスタマイズをする場合、
多くの人はWordPress内のカスタマイズの追加CSSの欄に書きがちですが、
ちゃんとCSSを管理をしていくなら下記の方法がおすすめです。
WordPressの管理画面を開き、外観 ＞ テーマエディタ を選択。
右のメニューからスタイルシートを選択。
スタイルシートの中に、先ほど新しく作ったコードを入力します。
/*タイトル下のシェアボタンを非表示*/.sns-share-buttons.sns-buttons {display: none;}
※補足
/コメント/でなんのカスタマイズかメモを入れておくと後で見返した時にわかりやすいです。
最後に画面下にある「ファイルを更新」ボタンを押しましょう！
ブログを再び見てみると…
しっかりタイトル下のシェアボタンが非表示になっていますね。
これで、実際にあなたのブログにCSSを反映させることができました！
自分好みの理想のブログに！CSSの調べ方＆設定方法
今回は、ブログのデザインをカスタマイズする際に便利な
Chromeの検証機能を紹介しました。
CSSの調査 ⇒ プレビュー ⇒ 反映する手順としてぜひ参考にしてみてください。
Chromeの検証機能は、HTMLやCSSを調べることもできますし、
リアルタイムで表示の変更検証（プレビュー）をすることもできます。
この方法を活用することで、あなたのブログ、あなたのサイトを
自分好みの理想のデザインにカスタマイズできるようになります。
ぜひぜひ試してみてください。
今回ご紹介した方法以外にも
さまざまなブログのカスタマイズ方法、おすすめのChrome拡張機能、便利グッズなどを紹介しています。
ぜひ下記のページをチェックしてみてください！
以上、CGデザイナー・CGブロガーのすいみんがお届けしました！
収益＆アクセスを激増させるツール紹介
ブログ＆アフィリエイトの収益、SEO集客、アクセス流入を改善させる、
筆者おすすめのツールを紹介します。
SEOに強い記事を作れるツール！
「収益がなかなか発生しない…」
「検索順位が上がらず、アクセスも少ない…」
このようなお悩みの原因の99%は、記事の書き方がダメだから。
そしてその記事の品質は、記事を書き始める前の調査・準備の段階でほぼすべてが決まってしまいます。
そんなあなたにおすすめのツールが『 事前準備シート』。
事前準備シートは、下記のような記事作成に必要なあらゆる要素を1枚のエクセルシートにまとめたツールです。
- キーワード調査
- 検索結果ページの調査
- 競合サイトの調査
- ペルソナ（中心的ターゲット像）の設定
- 検索意図の調査
- 仮タイトルの候補案を作成
- 記事構成（見出し構成）を作成
これらの事前調査をしておくことで記事の質は格段に向上し、
アクセスや収益を上げやすい記事、検索エンジンに評価されやすい記事を作ることができます。
ブログで累計1億円の確定収益を上げた筆者がふだんから利用している自作ツールです。
長年にわたってカスタムを続けた自信作。一度購入すればずっと使うことができます。
下記から1,500円で購入できますので、ぜひご利用ください。
「売れる記事テンプレート」が収益UP！
ブログやアフィリエイトで商品を売るためには、
売れるための話の進め方・記事の書き方があります。
トップ営業マンが使う「セールストーク」のように、
ブログやアフィリエイトにも「セールスライティング」が存在するのです。
私サンツォがふだんからよく利用している5つの記事テンプレートをnoteにまとめましたので、
ぜひ下記からご確認ください。
お悩み相談＆コンサルティング実施中！
- ブログやアフィでなかなか結果が出ない
- このままでいいのか心配になった
- 記事の書き方はこれでいいのかな
- 分野やサイト設計で迷っている
…などで不安を感じたり、悩んでいる方は、ぜひ私サンツォにご相談ください。
チャットやオンラインMTGにて、お悩み相談やコンサルティングを受けつけています。
有料にはなりますが、悩んで立ち止まっていたり、
間違った方法を続けていても時間と手間のムダになりますので、ぜひ一度ご相談ください。
以下からお申し込みいただけます。
超高速＆格安レンタルサーバーが限定500円OFF！
国内最速！超高性能＆格安レンタルサーバーの「ConoHa WING」。
今ならキャンペーン中につき月額640円～で利用することができます。しかも初期費用は無料！
しかも当「ブログ部」なら、さらに500円OFFになる特典付き！くわしくは下記の記事をご参照ください。
WordPressのカスタム・引越し・問題解決なら！
もしWordPressに関することで困ったことがあったら「サイト引越し屋さん」に相談しよう！
WordPressからWordPressへの引越し、ドメイン移管、テーマ変更。無料ブログからWordPressへの引越し。
WordPressのカスタムやサイト高速化、セキュリティ対策など、あらゆる問題・お悩みを解決してくれるサービスです！
サンツォ僕もいつもお世話になっているよ！
相談は無料なので、まずは問い合わせしてみよう！
＼ WordPressで困ったことがあったら！ ／
コメント