賢威７のサイドバー枠に影をつける方法

どうも、novaです。

今回は賢威７のサイドバー枠に影をつける方法ということでお伝えしていきます。

今回のカスタマイズは・・・

今回のカスタマイズしていくことは以下の作業になります。


こういう感じの枠に


↓

こんな感じに影をつけていきます。



では頑張っていきましょう。

まずはCSSの編集画面へ

まずはWordPress管理画面の【外観】→【テーマの編集】へと進みます。






次に画面の右端から【base.css】を開きます。



この【base.css】の、ずらっと並ぶ文字列の下までいきましょう。



ここに以下のHTMLコードを入力してください。

こんな感じですね（目立つようにあえて選択した状態です）


最後に【ファイルを更新】をポチッとすることをお忘れなく。

ではWebサイトから確認してみましょう。

変更前

↓

変更後

しっかりと影が付いています！


HTMLコードには変更しやすいように、何がどの値になるのかを書き込んでおきましたので、色々と変更して試して見てください。


/*メインコンテンツ　枠線　コンテンツ幅*/＝HTMLコードの種類を書いています。
/*線の太さ、色*/＝線の太さや、色を変更できます。
/*影の大きさ、位置*/＝影の大きさや影の位置を変更します。
/*ウィジェットの幅*/＝ウィジェットの幅を調節します。
/*ウィジェット枠同士の間隔*/＝ウィジェット同士の間隔を調整します。


最初のうちは極端に値を大きくすることで、
どのように変化が起きるかがわかってきます。


そんな感じでいじっているうちに、CSSにも少しづつ慣れてきます。


今回は「賢威７のサイドバー枠に影をつける方法」ということでお伝えしました。
上手くいきましたでしょうか？


では最後までありがとうございました。


nova


こちらに「賢威7カスタマイズまとめページ」を作成したので、宜しければご利用ください。
→【賢威７】カスタマイズ解体新書