【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(ストーク)カスタマイズ記事をお探しの方はこちらからどうぞ


無料会員制のメールコミュニティへご招待しています

無料で参加できるメールコミュニティ、その名も「ニコニコスマイルコミュニティ」にご招待しています。

このコミュニティではブログでお伝えしきれなかった内容やコミュニティ参加者限定のコンテンツをプレゼントしています。ネットビジネスでお金を稼ぐ力を身に付け、自由なライフスタイルを実現して大切な人とニコニコ笑顔で暮らしていけるような人生を創造していきたいのなら、あなたも無料のコミュニティに参加して仲間になりませんか?