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

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

無料のメルマガに登録して頂くとメルマガ会員限定のメンバーズサイトに無料でご招待しています。

メルマガやメンバーズサイトでは

  • 自由なライフスタイルを実現するための具体的な方法
  • 理想を現実にするための思考法・マインドセット
  • より成果を出すための作業のマネジメント

などなど、自由なライフスタイルを実現するための様々な情報を発信していきます。

あなたも自由なライフスタイルを実現し、家族や恋人、友人などの大切な人とニコニコ笑顔で過ごしていけるようなそんな人生を歩んでいきませんか?もしそんな人生に興味や憧れがあるのなら、ぜひこのメルマガに登録して下さいね。

あなたが理想のライフスタイルを実現できるように私も頑張って情報を発信していきます!