【Chrome検証】テーマのカスタマイズ検討に便利な最強機能!

スポンサーリンク
スポンサーリンク
スポンサーリンク

はじめに

はじめに

こんな人に役立つ記事

ランドゥ
ランドゥ

こんにちは。ランドゥです。この記事はこんな人の役に立つよ。

  • カッコいい/かわいいサイトの装飾を知りたい!
  • 自分のブログのCSSをコーディングでカスタマイズしてみたい!
  • Webページのデザインを勉強中!

テーマをカスタマイズする

WordPressのは僕も使わせていただいている「Cocoon」のようなテーマがあって便利です。その一方で例えば、「ヘッダーを透明にする」などワンランク上のカスタマイズをしたいと思ったことはありませんか?

今回はカスタマイズをテスト的に検討する便利な機能と、それを元に実際にCSSのコードを更新する方法について画像付きで丁寧に解説したいと思います。

僕のこのWebサイトの装飾もこの方法で、自分らしくカスタマイズしています。その際参考にしたCSSコードもご紹介しますので最後までお読みいただければ幸いです。🙃

ランドゥ
ランドゥ

それではさっそく、説明していくよ!

Chrome検証機能を使う

知りたい箇所を調べる

「検証」を開く

「検証」を開く
ランドゥ
ランドゥ

装飾が知りたいWebページを開いたら、

まずマウスで右クリック、その後「検証」を押してみて。

ソースコードを見る

ソースコードを見る
ランドゥ
ランドゥ

すると、画面右にこんなウィンドウが現れるよ。

画像の赤枠で囲ったところを選択してみて。

ソースコードを見る
ランドゥ
ランドゥ

カーソルを置くだけでその部分のソースコードが表示されるようになるよ。

上半分にHTML、下半分に適用さているCSSが表示されるんだ。

カスタマイズを検討する

カスタマイズを検討する
ランドゥ
ランドゥ

今回はヘッダーの不透明度を検討してみる。

僕のWebサイトはスクロールすると、ヘッダーが半透明になるんだけど、それがCSSのコードで表されている。

opacity: 0.9 ;というのは不透明度を90%にするということだよ。

カスタマイズを検討する
ランドゥ
ランドゥ

このチェックボックスでコードを適用外にすることができる。

ほら、ヘッダーが透き通っていないよね。デフォルトの不透明度(1.0)になっている。

カスタマイズを検討する
ランドゥ
ランドゥ

逆に、値を変更することも出来るよ。

0.9→0.5にすると、不透明度は50%になって、明らかにヘッダーが透き通っているのが分かるでしょ。

実際のページには反映されない

実際のページには反映されない
ランドゥ
ランドゥ

そして、ここで行った検討はサーバ上には反映されないよ。

「再読み込み」すると元に戻るから安心して。

実際にテーマを編集する

テーマエディタを利用する

テーマエディタを開く

テーマエディタを開く
ランドゥ
ランドゥ

次に、自分のウェブサイトを実際にカスタマイズしていくよ。

ダッシュボードから、外観 → 「テーマエディター」を開いてみて。

style.cssを編集する

style.cssを編集する
ランドゥ
ランドゥ

使っている子テーマstyle.cssのファイルを指定するよ。

僕の場合は「Cocoon Child」「stylesheet」がそれにあたる。

ランドゥ
ランドゥ

さっきの .header-small { opacity: 0.9; }0.90.5にして「ファイルを更新」をクリック。

これでヘッダーがスクロールされた時の不透明度が50%になったはず。

style.cssを編集する
ランドゥ
ランドゥ

Webページを開いて確認してみるとほら、反映されているね!😀

⚠注意点

※ソースコードに詳しくない方は、あらかじめメモ帳などにCSSファイルのデータをコピー&ペーストしておくことをオススメします。

万が一消してしまった際、元の装飾が分からなくなってしまうからです。

おわりに

おわりに

僕のヘッダーの参考サイト

ランドゥ
ランドゥ

みんな、参考になったかな?

この記事では「検証」「更新」の方法をメインに説明しました。

他の気に入ったサイトの色やレイアウト等を調べて、自分のサイトデザインに活用したい、という際にも使える便利な方法ですね。

その一方で、CSSのコード自体を知りたい読者もいらっしゃるかと思われます。

拙サイト「エゾユキブログ」ヘッダーをカスタマイズする際に参考にしたブログは、下記からご覧になれます。ぜひ読んでみてください。🙃

【Cocoon】ヘッダーメニューをオシャレに!上部に固定追従!
Cocoonカスタマイズ!ヘッダーとメニューをオシャレにカスタマイズします。オシャレなだけでなく利便性も上げるためにヘッダーを固定し追尾するようにしました。コピペで簡単にできるようになってますのでぜひチャレンジしてみてください!

(文責・ランドゥ)

コメント