不思議ブログ運営WordPressGoogleCocoonSimplicity2お役立ちLife【Simplicity2】テーマに影(box-shadow)で立体感をカスタマイズTwitterFacebookはてブPocketLINEPinterest2018.05.21スポンサーリンクWordPress無料テーマ『Simplicity2』のカスタマイズ記事です。現在このブログは、「Simplicity2」の後継テーマ『Cocoon』を使用しています。いままでは、フラットなデザインで、なるべくシンプルにしてきたつもりでしたがCSSの「box-shadow」を使って、ちょっとだけ《立体感》や《ふわっと感》をだしてみたら、ブログの印象がだいぶ変わりました一番気に入っているのは、サイドバー全体にいれた枠線とドロップシャドーですね。変更するだけで、カンタンに使えます。CSSさいごにスポンサーリンクラインや枠に「box-shadow」で影をつけるちょくちょくSimplicity2をカスタマイズしているので、記事を書いた時のイメージ画像を貼っておきます。変更するだけで、印象がだいぶ変わっておもしろかったです。サンプル上下左右の方向を「0px」にすることで全体に「10px」ぼかし、「ブラック」の影を透明度「0.8」で指定しています。右方向に「20px」下方向に「10px」ぼかし「5px」、「レッド」の影を透明度「0.5」で指定しています。左方向に「-30px」上方向に「-10px」ぼかし「1px」、カラーコード「#999999」で指定しています。カンマ「,」で区切ると2種類の影を指定することができます。プチまとめ少しむずかしく感じるかもしれませんが、基本的には【border-color】や【background-color】の「#○○○○○○」カラーコードを変更するだけで使えるCSSになっています。CSSグローバルナビ全体の色は「外観」→「カスタマイズ」→「色」→「グローバルナビ色」から変更できます。コードは「上につける」「下につける」「上下につける」の3つに分けてあります。ヘッダー画像などを使用している場合は、下だけにつけると良いかもしれません。線をつけたり、線の色を変更する必要がない場合は、《border》の行を削除して下さい。スキンで指定されている枠線のカラーを変更したり、枠線を非表示にすることもできます。記事本文の背景色を変更することもできます。CSS枠線を表示したり、背景色を設定することもできます。CSSインデックスページに表示される『一覧リスト』の、エントリーカードに影や枠線を表示します。CSSフッターの色は「外観」→「カスタマイズ」→「色」→「フッター色」から変更できます。上の部分に影(box-shadow)を入れると、立体感が出て重なり合っているイメージにできます。}さいごにこのブログは背景色が白なので、影(box-shadow)が少し控えめかもしれません。使用している背景色に合わせて、影の色・ボカシで、広がり具合を調整すると、メリハリがつきイイ立体感がでると思います。リストの間に境界線のようなシンプル区切り線や、マウスホバー時に《ふんわり》と浮き上がるアクションを入れてみました。CSSコピペだけで簡単に表示でき見た目もスッキリ。リスト最後の下線を非表示にすることも可能です。初心者の私にもできるSimplicityの使い方やコピペするだけの簡単CSSカスタマイズ方法一覧【まとめ記事】です。したがって行動すると潜在意識が変化して運気もUP2019.05.05『Cocoon』SNSボタン/ソーシャルボタンのカスタマイズ(コピペ)2019.04.252019.05.01天国の猫達とネコ部屋で再会し至福のひと時。YouTube等の動画サイトを含め固く禁じます。したがって行動すると潜在意識が変化して運気もUP2019.05.05『Cocoon』SNSボタン/ソーシャルボタンのカスタマイズ(コピペ)2019.04.252019.05.01天国の猫達とネコ部屋で再会し至福のひと時。