デジタルステージが販売している、ホームページ作成ソフトBiND。
過去にグッドデザイン賞を受賞したこともある、テンプレートベースのweb制作ソフトです。
ページ内のブロックを並べ替えると言った簡単な操作で、webの知識がない方でも気軽にホームページが作れる点が特徴で、価格もパッケージ版、クラウド版とお手頃な料金設定。
今回はBiNDの必須ブロックでもある、ビルボード(メインビジュアル)の高さを変更する手順をご紹介します。
ビルボードの高さはCSSで変更可能
htmlやCSSの知識がある方は容易かとは思いますが、そうでない方にはやや難ありな操作手順。
ただ、慣れてしまえばとても簡単です。
今回はテンプレート、THOMSONを例に進めます。
THOMSONのテンプレはデフォルトだとビルボードの高さが600pxになっているので、この高さをCSSで変更します。
ビルボードのブロックエディタ編集画面を開き、CSSのタブを開く↙
共有CSSの項目はブロックビルボードCSSを選択し、右下の+アイコンをクリック↙
「ブロック自体」の項目を選択し、右の+アイコンをクリックすると各種CSSの項目が出てきます↙
ここまで丁寧に表示してくれると、CSSの知識がなくとも簡単に設定できそうな気もしますね。
下記、height(高さ)の数値を変更する事でビルボードの高さが変更されます。
数値の項目をクリックし、お好みの高さを入れ調整してみましょう。変更後は適用ボタンのクリックも忘れずに。
pxの項目をクリックすることで、数値の単位を➡%に変更することも可能です。
ビルボードの高さをブラウザの高さに揃える
ビルボードの高さを、表示するブラウザの高さに合わせて100％表示することも可能です。
最近けっこう目にする、全画面表示に近いメインビジュアルとかですね。
手順としてしては2通りあり、1つは先にご紹介したCSSでの高さ変更の数値項目に「100vh」と記入する方法↙
もう１つの方法は、プロパティのページ設定画面でビルボードの歯車アイコンをクリックし↙
「ウィンドウの高さ100％に合わせる」の項目にチェックをいれる方法です。
どちらの方法でもウィンドウの高さに沿ったインパクトのあるメインビジュアルが表示できますので、プレビュー画面で変更後の違いもしっかり確認しながら作成してみましょう。
お試しあれ。
コメントはこちら