今回はWordPressの人気無料テーマのLuxeritas（ルクセリタス）のコンテンツ領域の枠線に影を付けて立体的にするカスタムCSSの追加について紹介します。
ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。
Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。
詳しくはルクセリタス公式ページより。
デフォルトのコンテンツ領域は下記の様にシンプルな枠線のみが付いている状態です。
これを今回のCSSの追加で下記の様な凹凸のある様な立体的なデザインに変更します。ここに好きな色を付けたり、形を変えたりすればもっとデザインの幅が広がるかと思います。
コンテンツ領域の枠線全てに影を付ける方法
結論から言うと下記のCSSで先ほどの「編集後」のデザインが可能です。
#head-band {
box-shadow: 2px 2px 4px #ddd;
}
.grid {
box-shadow: 2px 2px 4px #ddd;
}
#nav {
box-shadow: 2px 2px 4px #ddd;
}
#side {
box-shadow: 2px 2px 4px #ddd;
}
上記のCSSは、プロパティと値が全て共通なので下記の様にまとめて記述してもOKです。
#head-band, #nav, #side, .grid {
box-shadow: 2px 2px 4px #ddd;
}解説
| .grid | メインコンテンツ |
| #head-band | ヘッダー |
| #nav | グローバルナビゲーションメニュー |
| #side | サイドバー |
「grid」クラス全体、「head-band」「nav」「side」id全体に「box-shadow」で影を付けているだけです。
※Luxeritas→カスタマイズ外観→コンテンツ領域とサイドバーでコンテンツ領域の枠線を付ける事が出来ます。ここの枠線の右下に影が出来る様に編集しています。（グロナビとヘッダーはデフォルトで付いています。）
以上「【ルクセリタス】コンテンツ領域の枠線全てに影を付ける方法」でした。
今回は非常にシンプルな編集のみの紹介でしたが、「grid」クラス、「head-band」「nav」「side」idを使えば様々デザインにカスタム出来る様になるかと思います。
