カスタムCSS編集でbox-shadowエフェクトをかける方法

box-shadowの完成イメージ

bingo!CMSでCSSを記述する方法はいくつかありますが、本TipsではカスタムCSS編集という機能を使ってご説明します。

こちらのサンプルは、カスタムCSS編集にbox-shadowのCSSを記述し、画像v17というユニットにclassを設定して実装しています。

box-shadowを実装する

1. カスタムCSS編集にCSSを記述する

  • bingo!CMS管理画面にログインし、ページ上部の黒いツールバーより、デザイン管理 / カスタムCSS編集 をクリックします。
  • 入力欄に任意のCSSを記述して、保存 をクリックします。
    このTipsでは、下記のbox-shadowエフェクト プリセットを記述しました。
     

    ※プリセットについては後述します。
/*box-shadowエフェクト プリセット*/
.box-shadow-effect01 {
  margin: 20px;
  box-shadow: 0px 2px 20px rgba(0,0,0,0.9);
}
.box-shadow-effect02 {
  margin: 20px;
  box-shadow: 0 12px 10px -6px rgba(0,0,0,.9);
}
.box-shadow-effect03 {
    margin: 20px;
    position:relative;
}
.box-shadow-effect03:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*影を入れる*/
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9),
    inset 0 0 100px rgba(0, 0, 0, 0.2);
}

2. コンテナまたはユニットにclassを記述する

  • CSSを呼び出す際は、コンテナやユニットの編集画面にある入力欄に直接classを設定します。
    このTipsでは下記を記述しました。
     

※classの" . "は除いてください。

box-shadow-effect02

実装のポイント

仕組みと構造

bingo!CMSは、基本的にコンテナやユニットのボックス(表示領域)の外側にはCSSを記述できません。
仮にbox-shadowを記述した場合、記述部分が隠れてしまいます。
ただし、表示領域内にmarginを取り、その余白部分にCSSを記述する方法であれば、実装可能です。
本Tipsでご紹介するCSSは、ユニットの上下左右に20pxの余白を持たせています。

カスタムCSS編集とは

bingo!CMS1.7.2より搭載の機能です。
ここに記述したCSSは /css/custom.css という領域に保存され、基本的にサイト全体に反映されます。
スキンのCSSファイルに直接記述するのとは異なり、スキン変更による影響が無いのが大きな特徴です。
あらかじめclass属性を付与しておけば、いつでもCSSを呼び出せます。

box-shadowエフェクト プリセットとは

カスタムCSS編集画面に貼り付けて保存してください。
このTipsでは、全部で3種類のbox-shadowエフェクトをご用意しました。
任意のコンテナまたはユニットにclass属性を付与すれば、すぐにbox-shadowエフェクトを実装できます。
※エフェクトによりCSSの調整が必要な場合があります。
また、制作中のサイトデザインに合わせて自由に調整し、オリジナルのプリセットを作成いただけます。
 

■ ご注意

権限が担当者の場合、管理画面にカスタムCSS編集は表示されません。
詳細は下記をご参照ください。
bingo!CMSにおける管理者と担当者の違いについて

box-shadowエフェクトのサンプル

ボックスの周りに陰をつける

box-shadow-effect01

.box-shadow-effect01 {
  margin: 20px;
  box-shadow: 0px 2px 20px rgba(0,0,0,0.9);
}

ボックスの下側に陰をつける

box-shadow-effect02

.box-shadow-effect02 {
  margin: 20px;
  box-shadow: 0 12px 10px -6px rgba(0,0,0,.9);
}

ボックスの内側に陰をつける

box-shadow-effect03

.box-shadow-effect03 {
    margin: 20px;
    position:relative;
}
.box-shadow-effect03:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*影を入れる*/
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.9),
    inset 0 0 100px rgba(0, 0, 0, 0.2);
}

デザインTips - 写真風に加工する

box-shadowエフェクトと画像ユニットの組み合わせで、壁に写真を貼り付けたかのようなデザインを実装する方法をご紹介します。
※カスタムCSS編集に『box-shadowエフェクト プリセット』が保存されていることが前提となるTipsです。
任意のコンテナに 画像v17 をドラッグ&ドロップで配置し、ユニット編集画面に入ります。
下記を参考に設定を行います。
  1. 任意の画像を選択します。
     ※4:6など実際の写真と同じ比率の画像を使うとよりそれらしく見えます。
  2. デザインオプションの 詳細設定 をクリックし、画面を切り替えます。
  3. ボーダーのプルダウンを solid(実線)、サイズを 10px と入力します。
     ※サイズは任意で調整してください。
  4. カラー をクリックし、カラーパネルから白(#ffffff)を選択します。
  5. 任意の class を入力します。
     ※ここでは、本Tipsより box-shadow-effect02 を入力しました。
  6. 保存をクリックします。
サンプルのように画像の周りに白枠、画像下に陰が表示されれば成功です。
あとは任意でコンテナ幅の調整や背景画像を設定してください。
※上記のサンプルでは、コンテナに背景画像を設定し、box-shadow-effect03 を設定して内側に陰をつけています。

その他のTips

ページトップ