bingo!CMS v1.7 マニュアルサイト

完成イメージサンプル

流体シェイプ とは、波形などに代表される、"滑らかな曲線でつくられた形状"のことで、デザイン的には、柔らかく優しい印象を与える効果があります。

本Tipsでは、2つの無料ツールとbingo!CMS1.7.より搭載の『カスタム v17』というユニットを使い、サンプルのような流体シェイプを作成する方法をご紹介します。

なお、本Tipsで紹介する無料ツールはbingo!CMSではない第三者が運営しています。
必ず事前に各利用規約を確認し、了承のうえご使用ください。

まずは、先程のサンプルのうち、グレー系（#ededed）の波の部分を作成します。

ここで使用するのは『Custom Shape Dividers』（外部サイト）という、三角形や曲線など、様々な形状の境界線を作成できるツールです。

ツールにアクセスすると、白いボックスの中に、様々な設定が並んでいるのがおわかりいただけると思います。
流体シェイプの境界線を作る場合は、『Shapes』の中の『Waves』を選びます。

その他、色や幅・高さを調整し、雲のアイコンのダウンロードボタンをクリックします。

『Get Code』という画面が表示されるので、HTMLとCSSをそれぞれコピーしメモしておきます。

SVGもダウンロードできますが、今回はこちらは使用しません。

続いて、サンプルの境界線に重なって設置されている、流体シェイプのパーツを作成します。

使用するのは『Blobs』（外部サイト）という、バーをスライドさせて任意のシェイプを作成するツールです。

『Changes』をクリックするとランダムで形状を変化させられる他、塗りつぶしやグラデーション、枠線のみなどのバリエーションがあります。

好みのシェイプができたら、『Changes』の左隣にあるコードボタンをクリックします。

コード画面が表示されるので、右上の『Download』をクリックし、SVGファイルをダウンロードしておきます。

これで、流体シェイプの用意は完了です。

流体シェイプの準備ができたので、bingo!CMSに実装します。

まずは、bingo!CMSのページ編集画面に入り、コンテナモードへ移行します。

コンテナをドラッグ&ドロップでページに配置します。
※ページを新規作成した場合は、あらかじめコンテナが1つ設置されているのでそちらをご使用ください。

コンテナの編集画面を開き、任意の背景色を設定して保存します。
先程のサンプルでは、ピンク系（#ffaad4）を設定しました。

次に、コンテナモードからユニットモードへ移行し、画面右上のCSS/JSをクリックします。

『CSS・JS設定』が開いたら、『Custom Shape Dividers』でコピーしておいたCSSを貼り付け、『保存』をクリックします。
このとき、CSSをstyleタグで囲むのを忘れないようにしてください。

bingo!CMS1.7.2以上をご利用で、スマートフォンでも表示する場合は、記述した内容をコピーして『スマートフォン表示』に貼り付けます。

画面を保存し、右上の × をクリックして『CSS・JS設定』を閉じます。

続いて、先程背景色を設定したコンテナに『カスタム v17』を設置し、ユニットの編集画面を開きます。

『ひな型選択』という画面が表示された場合は、『ひな型選択』の右上にある × をクリックし、ポップアップを閉じてください。

画面左のメニューから『1列＋2列』のカラムを選択し、各パーツのアイコンを以下のように各カラムへドラッグ&ドロップします。

• 上段の1列カラムに『テキスト1』
• 下段の左カラムに『画像1』
• 下段の右カラムに『タイトル1』と『テキスト2』

『テキスト1』には、『Custom Shape Dividers』でコピーしておいたHTMLを以下に従い貼り付けます。

• テキストエディタを使用していない：HTMLをそのまま貼り付け
• テキストエディタを使用している：ソースボタンをクリックしポップアップにHTMLを貼り付け→OKをクリック

『画像1』には、『Blobs』でダウンロードしておいたSVGを設定します。
画像の設定方法についてご不明な点は、下記マニュアルをご参照ください。
参照：素材ファイルを追加する

『タイトル1』と『テキスト2』は、任意に設定します。
このサンプルでは、『タイトル1』のフォントサイズを10em、ウェイトを太字にしました。

ユニットを保存すると、このようなレイアウトになります。

カスタムユニットにパーツを設定しただけでは、流体シェイプ同士が重なったデザインになりません。

そのため、ネガティブマージンで配置を調整します。

再度ユニットの編集画面を開き、『画像1』の下部にある『余白』のマージンにネガティブマージンを設定します。
このサンプルでは、マージンの『上』と『右』に-800pxと指定しました。

その他、『タイトル1』や『テキスト2』のマージンを調整してから、ユニットの編集画面を保存します。

流体シェイプを使ったデザインが完成しました。

ネガティブマージンについては、こちらのTipsもご参照ください。
参照： カスタムユニットでネガティブマージンを設定する方法

調整前のサンプル

調整後のサンプル

注意点として、このデザインはレスポンシブではありません。
スマートフォンでも表示する場合は、別途調整が必要なのでお気をつけください。

スマートフォンの調整については、こちらのチュートリアルもご参照ください。
参照：チュートリアル｜(6)スマートフォン向けに調整しよう