はじめに
こんな人に役立つ記事
こんにちは。ランドゥです。この記事はこんな人の役に立つよ。
- カッコいい/かわいいサイトの装飾を知りたい！
- 自分のブログの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のファイルを指定するよ。
僕の場合は「Cocoon Child」の「stylesheet」がそれにあたる。
さっきの .header-small { opacity: 0.9; } の0.9を0.5にして「ファイルを更新」をクリック。
これでヘッダーがスクロールされた時の不透明度が50%になったはず。
Webページを開いて確認してみるとほら、反映されているね！😀
⚠注意点
※ソースコードに詳しくない方は、あらかじめメモ帳などにCSSファイルのデータをコピー＆ペーストしておくことをオススメします。
万が一消してしまった際、元の装飾が分からなくなってしまうからです。
おわりに
僕のヘッダーの参考サイト
みんな、参考になったかな？
この記事では「検証」と「更新」の方法をメインに説明しました。
他の気に入ったサイトの色やレイアウト等を調べて、自分のサイトデザインに活用したい、という際にも使える便利な方法ですね。
その一方で、CSSのコード自体を知りたい読者もいらっしゃるかと思われます。
拙サイト「エゾユキブログ」のヘッダーをカスタマイズする際に参考にしたブログは、下記からご覧になれます。ぜひ読んでみてください。🙃
（文責・ランドゥ）
コメント