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