features｜features

features_017

サイトやサービスへのリンクとして並べるバナーを想定したブロック。「ブロック設定＞カラム背景と余白」から各カラムの背景画像を指定できるようになったので、変更も簡単になりました。

features_016

角丸に設定した大きな画像に見出し・説明を表示した説明のためのブロック。カテゴリーなどの表示に「リスト：マークなし」を使い、角丸の枠線で囲われて横並びに並ぶように設定してあります。

features_015

BiNDupのテンプレート「Site Box vol.47#1 PADOLE inc.」のトップページにあるSERVICE（事業紹介）のブロックを抜き出して作成しました。

features_014

カラム全体にリンク設定したブロック。
リンクのマウスオーバーで元とは異なる色にするために、リンクをHTMLのaタグで入力するなど特殊な方法となっています。
リスト：ニュース式を使いアイコンと文字を横並びにしています。

features_013

カラム全体にリンク設定したブロック。
リンクのマウスオーバーで元とは異なる色にするために、リンクをHTMLのaタグで入力するなど特殊な方法となっています。

features_012

美容室のメニューなどで使えそうな画像をグラデーション処理したデザイン。
画像の差し替えはSiGN上で簡単に可能です。画像に重ねてあるグラデーションの色変更もSiGN上で可能です。

features_011

スタッフなどの紹介を写真、SNSリンクと数行の文字でシンプルに並べるデザイン。
CSSで画像が円形になるように設定し、アクセントとしてカラム背景の白から上にはみ出すように設定しています。

features_010

特徴やフローを横に並べるブロックで数字の表示に工夫
数字はリードに設定しCSSで調整しています。また、数字の次の英語、日本語見出しについては数字の位置に重なるように設定しているため、数字と文字が重なったときの可読性を確保できる色の設定もCSSでできるようにしています。

features_009

３つの特徴をそれぞれ箇条書きで表したい時に使えそうなブロック。
小見出しをCSSで画像に重ね、箇条書きはリストにしFont Awesomeによるアイコンを付けています
トップページの目立つ場所ではBiNDで普通のリストにするとシンプルな黒丸で地味な印象になりがちなので、ブロック内にFont Awesomeのstyleを入れてあります。

features_008

READ MOREの縦位置を揃えるためのBlockDesign
カラム内本文の文字数によって縦位置がずれがちなカラムの下にリンクボタンを設置するレイアウトで、リンクボタンの縦位置が揃うようにCSSで設定したBlockDesignです。
リンクをリードとして設定し、リードに対してCSSでpositionを指定しています。

features_007

パソコンでは目次ブロックで横に並ぶカラムで、背景色と角丸を設定デザイン。リンクはカラム全体に設定しています。マウスオーバー時、カラム全体に半透明の色がつく設定。
スマホでは画像が幅いっぱいのレイアウトと、画像が自動的に正方形にトリミングされて左フロートになるレイアウト（features_007a）の２つを用意しています。

features_006

パソコンでは目次ブロックで横に並ぶカラム間にラインを引いたデザイン。リンクはカラム全体に設定しています。マウスオーバー時、カラム全体に半透明の色がつく設定。
スマホでは画像が幅いっぱいのレイアウトと、画像が自動的に正方形にトリミングされて左フロートになるレイアウト（features_006a）の２つを用意しています。

features_005

パソコンでは目次ブロックで横に並ぶカラムをラインで囲ったデザイン。リンクはカラム全体に設定しています。マウスオーバー時、カラム全体に半透明の色がつく設定。
スマホでは画像が幅いっぱいのレイアウトと、画像が自動的に正方形にトリミングされて左フロートになるレイアウト（features_005a）の２つを用意しています。

features_004

パソコンでは目次ブロックで横に並ぶブロックで、CSSで画像を丸く、枠線ありに処理しまた画像に、マウスオーバーでズームのアクションを設定。
背景色が画像の途中までになるパターン（features_004a）と、SVGで背景色を設定した円弧に合わせて画像が配置されるパターン（features_004b）を用意しています。