賢威7-サイト枠の全体に影shadowをつける

テーマテンプレートは賢威7のスタンダード版です。

 

あまりカスタマイズせずに、使っていこうかと思っていたのですが、やはり気に入った設定方法などが見つかると試したくなり、ついつい時間を浪費してしまいますね。

楽しい時間でもあるんですが・・・。

 

ソースコードの貼り付けのみで変更できます。

濃淡や太さなどは、数値を変更して気に入った値にしてください。

 

コードの右上にマウスポインタを当てると反応します。

図の部分でクリックコピーできます。

トップページ、コンテンツ、サイドバー枠に影

 

base.cssに追記していくのですが・・・・。

ダッシュボード→外観→カスタマイズ→追記CSSに追記していく方法でもOK。

base.cssに書き込んでいく場合。

ダッシュボード→外観→テーマ編集→base.css

最下段の赤枠あたりの段落にソースコードを追記して変更していきます。

賢威7トップページ枠の影付けソースコード

 

 

/*○○○*/の「○○○」部分は分かりやすい好きなタイトルに。

/*⇔*/この中に/*タイトル*/を書き込んでください。

あとあと、数値の変更や削除するときなどの目安となるように。

 

 

ソースコードの「#A9A9A9;」は色のカラーコード

色を変えたい方は「WEB色見本原色大辞典」を参考に変更してください。

 

数値の部分は、お好みの数値に変更してください。

影の濃淡や、太さなどの調整ができます。

 

変更前

変更後

 

次は、コンテンツの影の追記。

賢威7メインコンテンツ枠への影付けソースコード

 

賢威7サイドバー枠への影付けソースコード

 

サイト全体に影の設定はできたのですが、サイドバーが見栄え悪くなってしまいました。

 

こんな感じに

悩みに悩んで、いろいろ変更方法を試したのですがなかなかうまくいかず、試行錯誤。

結果、タイトル周りの設定を参考に乗り切ることが出来ました。

 

これが正解なのかは、疑問の余地はあるのですが、見栄え的には問題なく落ち着いたので追記。

背景のカラーによっては満足いかない結果になるかも?(試してません (^_^))

 

追記後

スペースができ、圧迫感がなくなりました。

 

スペースの調整は「margin」の「30px」値を変更し調整。

 

タイトルのフォントもやや大きくしてます。

font-sizeの数値1.525emがタイトルフォントの変更サイズ値です。

 

 

カスタム作業を終えて

スムーズにカスタマイズできれば満足な結果と納得も出来るんですが、たまに予定にない結果となることもたびたび起きますよね。

その納得のいかない不具合?の解決に頭を悩ますことたびたび。

 

詳しいHTMLの知識など持ち合わせていません。

今回はなんとか自己解決して、納得できたケースでした。

 

カスタマイズに時間をかけるなら、記事制作に時間をかけようという意見も多くなってきました。

もっともだと思う反面、やはりどこかオリジナリティを出したいとも思います。