まず、カスタマイズしたい箇所の情報を確認しよう
はじめに検証ツールを使用して、カスタマイズしたい箇所の【id名】、【class名】を確認しました。
WordPressのテーマカスタマイズから追加CSSを記載するための下準備です。
【id】の場合は、追加CSSのセレクタに【#】
【class】の場合は、追加CSSのセレクタに【.】
を付ける！
カスタマイズ内容
メニュー下部に影を付ける
トップページのメニューに影を付ける
#menu-top {
box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.2); /* 影の調整 */
}
トップページ以外のメニューに影を付ける
#header-container {
box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); /* 影の調整 */
}
【box-shadow】を使用して、メニューの下側にだけ影を付けることに挑戦しました。【box-shadow】の詳しい説明は記事下部の参考サイトをご覧ください。
【トップページ】と、【トップページ以外】でメニューの構成が異なり、見えてほしくない影を隠すために値を調整しました。
フッターの色を変える
#footer {
background-color: #F3EEDD;
overflow-x: clip;
margin-top: 0;
}
フッターの色を薄いグレーからクリーム色に変更しました。あたたかな優しいイメージのサイトデザインにしたかったためです。
参考サイト
【CSS】一方向にのみ影を付ける方法
ウェブデザインにおいて、box-shadowプロパティを使用して要素に影を付けることは一般的ですが、影を一方向にのみ表示したい場合があります。この記事では、CSSのbox-shadowプロパティを活用...
codingls.com
子テーマについて
子テーマについての解説は下記リンクから。
※Cocoonの場合、スキンを利用中に子テーマでカスタマイズを行おうとすると、スキンの適用が外れてしまうので注意。
WordPress「親テーマ・子テーマ」とは？使い方,カスタマイズ,後から作成する方法も解説！【10分でわかる】
そもそもWordPress「テーマ」とは？ wordpressには「テーマ」という概念が存在します。 テーマとは、wordpressサイト全体の「デザイン」や「 ...
kitsunecode.net
コメント