どうも、ケイジです!
賢威7でコンテンツ部分に枠と若干の影を付けるカスタマイズ方法を説明していきます。このカスタマイズは背景色も白くしたいし、コンテンツ部分も白にしたいという時に枠線があると非常に分かりやすいし、ここまでがコンテンツですよって感じに分かりやすく見た目もかなり恰好良く決まります。

枠と影があるとコンテンツが強調される

賢威7でコンテンツ部分に枠と影を付ける方法メイン

枠があるとコンテンツ部分が引き締まって見える印象があります。さらにコンテンツがこの範囲だとはっきりと分かるので強調されてとても見やすいという印象を僕は受けます。個人的には枠が合った方がサイトの見栄えがすごく恰好良く見えますね。背景色とコンテンツ部分が同色の場合や近い色の場合は特に差が感じられることと思いますのでおすすめのカスタマイズです。

では、早速、賢威7でコンテンツ部分の枠を表示するカスタマイズ方法を説明していきたいと思います。

 

 

賢威7で枠と影をコンテンツ部分に付ける変更方法

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

賢威7でコンテンツ部分に枠をつける方法1

枠および影をつけるソース

.main-contents,.post {

border: solid 1.5px #A9A9A9;
box-shadow: 6px 6px 12px rgba(0,0,0,0.4);
padding: 0.5em;
margin-bottom: 1.0em;
border-radius: 5px;
}

上記画像の赤枠部分に上記のソースを全コピーして貼り付けてください。上記画像の箇所はダッシュボード→外観→テーマ編集→base.css内の一番下となります。影をもっと濃くしたり、枠をもっと太くしたい場合は上記ソースの数字を変更することができますので、必要に応じて微調整してみてください。

 

 

グローバルメニューの色カスタマイズ前と後の変化

賢威7-デフォルト時

賢威7でコンテンツ部分に枠を付ける前

 

枠と影をコンテンツ部分に付けた後

賢威7でコンテンツ部分に枠をつけた後

分かりにくいかもしれませんが、上記が賢威7のデフォルト状態で枠線や影がない状態です。比べてみると枠線があったほうがコンテンツが強調されているように感じませんか?本記事に書いてあるソースを挿入するだけでこのようにカスタマイズできるので簡単に設定することができますし、僕の好きなカスタマイズ方法の1つとなっています。

 

しかし、このままではコンテンツ部分だけに枠線と影がついている状態なのでサイドバーがかなり寂しい感じになってしまっています。コンテンツ部分に枠と影を付けるのであれば、一緒にサイドバーにも付けたほうがよりバランスが取れたものになると思います。下記リンクからご参照ください。

賢威7でサイドバーに枠と影を付ける方法

 

 

まとめ

以上が賢威7で枠線と影を付けるカスタマイズ方法でした。僕は以前枠があるのとないのとではこんなに印象が違うものかと関心した記憶があります。サイト背景色とコンテンツ部分の配色が似ていればより効果を感じますし、そうじゃなくても立体的に見えることから強調されてコンテンツ部分に目がいきやすくなるように感じます。参考にしてみてください。

 

賢威7カスタマイズ一覧まとめ記事へ