ウェブ制作のクラウドビジネスをはじめよう！

bingo!CMSニュースレター

配信：2020年1月15日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像（ニュースレタートップ用）

カスタムCSS編集で！楽ちんbox-shadow

こんにちは！ bingo!CMS 広報担当の鈴木です。
 
サイト制作の際、デザインを実現するためCSSの記述は欠かせませんが、皆さま、bingo!CMS1.7.2から搭載の『カスタムCSS編集』は活用していらっしゃいますか？
 
本日は、カスタムCSS編集の使い方と、コピペで使えるbox-shadowエフェクトのプリセットをご紹介します！
 
 

カスタムCSS編集 とは？
カスタムCSS編集画面のサンプル画像

bingo!CMS管理画面にログインし、画面上部の黒いツールバーから、デザイン管理 / カスタムCSS編集 の順にクリックすると編集画面が開きます。
 
ここに記述したCSSは /css/custom.css という領域に保存され、基本的にサイト全体に反映されます。
 
スキンのCSSファイルに直接記述するのとは異なり、スキン変更による影響が無いのが大きな特徴です！
 
CSSにclassをつけておけば、いつでもCSSを呼び出せます。
 
ユニット編集画面のclass入力欄イメージ

CSSを呼び出す際は、コンテナやユニットに直接classを設定します。
 
bingo!CMSの場合、ほとんどすべてのコンテナまたはユニットの編集画面にclassの入力欄が備わっているので、" . "を除いて保存するだけで設定完了です！
 
ちなみに、ユニットによっては、隣にアンカーメニュー用テキスト入力欄がある場合がありますが、間違ってそちらに設定しないようご注意ください。
私はしょっちゅう間違えます。
 
 

コピペで！box-shadowのエフェクトプリセットを公開中
プリセットを応用し画像ユニットを写真風に加工したサンプル

マニュアルサイトにて、box-shadowに関するTipsを公開しました！
Tips：カスタムCSS編集でbox-shadowエフェクトをかける方法
 
このTipsでは、様々なデザインのbox-shadowエフェクトをプリセットとして公開しています。
カスタムCSS編集にコピペして自由にお使いください。
classを当てればいつでもbox-shadowを呼び出せるので、とっても便利ですよ！
 
また、これを元に独自のプリセットを作るのもおすすめです。
 
さらに、クラウドプラットフォームをご利用のかたであれば、サイトを複製するとカスタムCSSに記述した内容も複製されますので、サイト間でデザインに統一感を持たせたいときにとても重宝します。
 
ぜひお試しください。
 
 
それでは！
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ