制作プラス

web制作や映像制作に関する知識のアウトプット

【BiND】ビルボードの高さを変更する方法

【BiND】ビルボードの高さを変更する方法

デジタルステージが販売している、ホームページ作成ソフトBiND。
過去にグッドデザイン賞を受賞したこともある、テンプレートベースのweb制作ソフトです。

BiND10の詳細

ページ内のブロックを並べ替えると言った簡単な操作で、webの知識がない方でも気軽にホームページが作れる点が特徴で、価格もパッケージ版、クラウド版とお手頃な料金設定

今回はBiNDの必須ブロックでもある、ビルボード(メインビジュアル)の高さを変更する手順をご紹介します。

スポンサー リンク

ビルボードの高さはCSSで変更可能

htmlやCSSの知識がある方は容易かとは思いますが、そうでない方にはやや難ありな操作手順。
ただ、慣れてしまえばとても簡単です。

今回はテンプレート、THOMSONを例に進めます。

THOMSONのテンプレはデフォルトだとビルボードの高さが600pxになっているので、この高さをCSSで変更します。

ビルボードのブロックエディタ編集画面を開き、CSSのタブを開く
共有CSSの項目はブロックビルボードCSSを選択し、右下の+アイコンをクリック↙

BiND ビルボード CSS

「ブロック自体」の項目を選択し、右の+アイコンをクリックすると各種CSSの項目が出てきます↙
ここまで丁寧に表示してくれると、CSSの知識がなくとも簡単に設定できそうな気もしますね。

BiND ビルボード 高さ

下記、height(高さ)の数値を変更する事でビルボードの高さが変更されます。
数値の項目をクリックし、お好みの高さを入れ調整してみましょう。変更後は適用ボタンのクリックも忘れずに。

BiND ビルボード 高さ

pxの項目をクリックすることで、数値の単位を➡%に変更することも可能です。

ビルボードの高さをブラウザの高さに揃える

ビルボードの高さを、表示するブラウザの高さに合わせて100%表示することも可能です。
最近けっこう目にする、全画面表示に近いメインビジュアルとかですね。
手順としてしては2通りあり、1つは先にご紹介したCSSでの高さ変更の数値項目に「100vh」と記入する方法↙

BiND 100vh

もう1つの方法は、プロパティのページ設定画面でビルボードの歯車アイコンをクリックし

ビルボード ウィンドウの高さ100%

「ウィンドウの高さ100%に合わせる」の項目にチェックをいれる方法です。

ウィンドウの高さ100%に合わせる

どちらの方法でもウィンドウの高さに沿ったインパクトのあるメインビジュアルが表示できますので、プレビュー画面で変更後の違いもしっかり確認しながら作成してみましょう。

お試しあれ。

プロフィール

kazu
新潟県越後湯沢出身
WEBデザイン・映像制作の記事を中心に日々学んだ事を記事としてアウトプットしております。
web/映像/紙媒体/デザイン全般

コメントはこちら

*
*
* (公開されません)

CAPTCHA


スポンサーリンク
Return Top