【STORK(ストーク)】デザインをちょっとおしゃれに!影をつける方法

どうも、あらやんです。

今回はWordPress用テーマ「STORK(ストーク)」でデザインをちょっとおしゃれにする方法として、メイン領域に影をつけてちょっと浮き出た感じに見せる方法を説明します。

デザインが大幅に変わる訳ではありませんが、ちょっとしたこだわりを見せられるポイントだと思うので気になった方はやってみて下さいね。

 

影をつけるための準備

まずはこれから行うカスタマイズの前準備として子テーマの導入が必要になりますので、子テーマを導入していない場合は下記の記事を参考にして導入を済ませておいてくださいね。

【STORK(ストーク)】子テーマを導入してカスタマイズの準備を行う方法

2018.01.15

 

影をつける方法

それでは早速カスタマイズを行っていきます。

まずはダッシュボード画面左の「外観」より「カスタマイズ」をクリックし、「追加CSS」に以下のCSSを貼り付けて下さい。

@media only screen and (min-width: 768px) {
#inner-content,
#breadcrumb,
#inner-header,
#footer-top .inner,
.footer .inner,
#custom_header{
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
}

これで下の画像の様に影をつけることができます。

微妙なんですが違いが分かりますかね。

 

影をつける場所の指定方法

さきほどのCSSをもう一度見直していただきたいのですが、#から始まる5つの項目があるのがお分かりいただけるでしょうか。

#inner-content,
#breadcrumb,
#inner-header,
#footer-top .inner,
.footer .inner,
#custom_header

この部分ですね。この5つの項目が影をつける場所を指定しています。つまり、

  1. #inner-content:メインコンテンツ部分
  2. #breadcrumb:パンくずリスト部分
  3. #inner-header:ヘッダー部分
  4. #footer-top .inner,:フッター部分
    .footer .inner
  5. #custom_header:トップページメインヘッダー

このようになっています。

なので、もしメインコンテンツ部分だけに影をつけたいなーと思ったら、

@media only screen and (min-width: 768px) {
#inner-content{
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
}

このようにすればOKです。

ちょっとした変化ですがこだわりのある方はやってみて下さいね。

カスタマイズ記事まとめ

他のSTORK(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ

あらやん公式メルマガはこちら

大切な人と幸せに過ごす自由なライフスタイルを創り上げるための無料メルマガです。
幸せに満ちた自由なライフスタイルを創造する方法を無料のメール講座で配信しています。

・自由なライフスタイルを創り上げるための無料メール講座
・月収100万円の価値を作り出す副業スタートノウハウ
・真の自由を手に入れるためのマインドセットレポート(PDF20ページ分)
・メルマガバックナンバー
・ブログアクセスアップのためのメールコンテンツ

等を無料プレゼント中!


おすすめWordPress用テーマ「STORK」
特典企画付きレビューはこちら



あらやん愛用のWordPress用テーマ「STORK」のレビューを公開しています。

STORKは非常に高性能かつシンプルでおしゃれなテーマで、
どの有料テーマを使おうかお悩みのあなたに間違いなくおすすめできます。

特別なオリジナル特典企画も紹介しているので
STORKに興味をお持ちであればぜひご覧ください。