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

2016-10-12-16-09-18どうも、novaです。

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


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

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


こういう感じの枠に
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-03-0-12-55



こんな感じに影をつけていきます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-03-0-14-29


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


まずはCSSの編集画面へ

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


賢威7のテーマの編集カスタマイズ

賢威7カスタマイズテーマの編集

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

賢威7base.css

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

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-02-23-14-09

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




こんな感じですね(目立つようにあえて選択した状態です)
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-03-0-15-55

最後に【ファイルを更新】をポチッとすることをお忘れなく。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-02-23-17-47
ではWebサイトから確認してみましょう。


変更前

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-03-0-12-55


変更後

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-10-03-0-14-29

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


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


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



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


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


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


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


nova


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

[ 賢威7のサイドバー枠に影をつける方法 ]賢威72016/10/03 00:19