
賢威7-サイト枠の全体に影shadowをつける
テーマテンプレートは賢威7のスタンダード版です。
あまりカスタマイズせずに、使っていこうかと思っていたのですが、やはり気に入った設定方法などが見つかると試したくなり、ついつい時間を浪費してしまいますね。
楽しい時間でもあるんですが・・・。
ソースコードの貼り付けのみで変更できます。
濃淡や太さなどは、数値を変更して気に入った値にしてください。
コードの右上にマウスポインタを当てると反応します。
図の部分でクリックコピーできます。
トップページ、コンテンツ、サイドバー枠に影
base.cssに追記していくのですが・・・・。
ダッシュボード→外観→カスタマイズ→追記CSSに追記していく方法でもOK。
base.cssに書き込んでいく場合。
ダッシュボード→外観→テーマ編集→base.css
最下段の赤枠あたりの段落にソースコードを追記して変更していきます。
賢威7トップページ枠の影付けソースコード
1 2 3 4 5 6 |
/*トップページに影*/ .section-wrap { border: solid 1.5px #A9A9A9; box-shadow: 6px 6px 10px rgba(0,0,0,0.4); border-radius: 5px; } |
/*○○○*/の「○○○」部分は分かりやすい好きなタイトルに。
/*⇔*/この中に/*タイトル*/を書き込んでください。
あとあと、数値の変更や削除するときなどの目安となるように。
ソースコードの「#A9A9A9;」は色のカラーコード
色を変えたい方は「WEB色見本原色大辞典」を参考に変更してください。
数値の部分は、お好みの数値に変更してください。
影の濃淡や、太さなどの調整ができます。
変更前
変更後
次は、コンテンツの影の追記。
賢威7メインコンテンツ枠への影付けソースコード
1 2 3 4 5 6 7 8 |
/*メインコンテンツに影*/ .main-contents,.post { border: solid 1.5px #A9A9A9; box-shadow: 6px 6px 10px rgba(0,0,0,0.4); padding: 40px; margin-bottom: 1.0em; border-radius: 5px; } |
賢威7サイドバー枠への影付けソースコード
1 2 3 4 5 6 7 8 |
/*サイドバーウイジェットに影*/ .widget-conts,.post { border: solid 1.5px #A9A9A9; box-shadow: 6px 6px 10px rgba(0,0,0,0.4); padding: 0.5em; margin-bottom: 1.0em; border-radius: 5px; } |
サイト全体に影の設定はできたのですが、サイドバーが見栄え悪くなってしまいました。
こんな感じに
悩みに悩んで、いろいろ変更方法を試したのですがなかなかうまくいかず、試行錯誤。
結果、タイトル周りの設定を参考に乗り切ることが出来ました。
これが正解なのかは、疑問の余地はあるのですが、見栄え的には問題なく落ち着いたので追記。
背景のカラーによっては満足いかない結果になるかも?(試してません (^_^))
1 2 3 4 5 6 7 8 9 |
/*サイドバータイトルフォントサイズスペース他*/ .sub-conts .section-wrap .section-in .section-title, .sub-conts .section-wrap .article-header .section-title{ margin: 30px -10px 20px; padding: 0 0 11px; border-bottom: 1px solid #ccc; font-weight: normal; font-size: 1.525em; } |
追記後
スペースができ、圧迫感がなくなりました。
スペースの調整は「margin」の「30px」値を変更し調整。
タイトルのフォントもやや大きくしてます。
font-sizeの数値1.525emがタイトルフォントの変更サイズ値です。
カスタム作業を終えて
スムーズにカスタマイズできれば満足な結果と納得も出来るんですが、たまに予定にない結果となることもたびたび起きますよね。
その納得のいかない不具合?の解決に頭を悩ますことたびたび。
詳しいHTMLの知識など持ち合わせていません。
今回はなんとか自己解決して、納得できたケースでした。
カスタマイズに時間をかけるなら、記事制作に時間をかけようという意見も多くなってきました。
もっともだと思う反面、やはりどこかオリジナリティを出したいとも思います。