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

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

 

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

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

 

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

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

 

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

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

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

 

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

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

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

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

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

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

 

 

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

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

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

 

 

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

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

 

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

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

 

変更前

変更後

 

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

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

 

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

 

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

 

こんな感じに

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

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

 

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

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

 

追記後

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

 

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

 

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

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

 

 

カスタム作業を終えて

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

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

 

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

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

 

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

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