エーアイティ研究所 Webサイトを作成する上で、情報をより伝えやすくするために文章の他に画像を使うことがあるかと思います。
ビーバービルダーには、元から備わっている「画像」モジュールといった機能があり、画像を編集してWebサイト
をより、魅力的に見せることができます。
今回は「画像」モジュールの編集、操作方法について、分かりやすく解説していきたいと思います。
※ビーバービルダーについてもっと詳しく知りたい方は、こちらをご覧ください。
画像モジュールを挿入
固定ページよりビーバービルダー編集画面を開き、「画像」モジュールを
ドラックアンドドロップで入れ込んでいきます。
画像の入れ込み設定
1.画像の入れ込み方法として、「メディアファイル」、「URL」と２つあります。
今回は、「メディアファイル」から画像を選びます。
「メディアファイル」を選択後、「画像を選択」をクリックしてください。
2.画像を選択するためのウィンドウが開かれます。
「メディアライブラリ」は既にアップロードをした写真の一覧を選択できるウィンドウです。
新たに画像を読み込むためには「ファイルをアップロード」タブを選択します。
今回は新たに画像をアップロードするので、「ファイルをアップロード」タブより「ファイルを選択」をクリックします。
※画像に関しては、各自、適切な画像をアップロードしておいてください。
3.画像をアップロード後、「メディアライブラリ」に表示されます。
本記事では、「チェックマーク」が付いた画像をアップロードしましたので、対象の画像を選択しましたら
「画像を選択」をクリックします。
4.「画像を選択」後、この様に画像を挿入できます。
他の画像に変更する場合、「編集」を、今ある画像を削除する場合は「削除」をクリックします。
画像の一般編集
【画像情報 – 表示方法】
画像の情報をテキストとして表示させるための設定を行います。
画像情報といってもイメージが湧かないかもしれないので、詳しくご説明いたします。
1.まず、「Show title attribute on mouse hover」（以降、「Show title …」と表記いたします）の選択欄を
「はい」にします。
その後、「キャプション」のタブを開き「キャプションを表示」の欄よりいくつか項目がありますが、今回は、
「マウスオーバー時」を選択します。
2.画像選択ウィンドウより対象の画像を選択すると、右側の欄に記入欄がいくつかあるかと思います。
この一覧が画像の情報となります。
この記入欄の中から「タイトル」、「キャプション」の欄に適切な情報を入力していきます。
「タイトル」、「キャプション」の欄を入力することで、１の手順で設定した機能が動作するようになります。
3.画像情報を入力後、一旦、編集を保存してプレビュー画面に切り替えます。
その状態でカーソルを画像に当てると、掲載画像のように文字が浮かび上がってくるかと思います。
【画像リンク設定】
画像のリンク設定にいくつかありますが、本記事では「URL」、「ライトボックス」について詳しくご説明いたします。
【URL】
画像をクリックすると、リンク先のウェブページに遷移することが出来るように設定できます。
「リンクURL」の入力欄に適切なURLを入力をし、「選択」をクリックすることで機能します。
【ライトボックス】
画像のライトボックスとは、ウェブページ上で画像をクリックすると、画像がポップアップ表示（浮かび上がるように）されるようになります。
ポップアップ表示された画像は、暗くなった背景の上に浮き出るように表示されるため、ウェブページ上のコンテンツとの干渉を最小限に抑えることができます。
画像のスタイル編集
続いて画像のスタイル編集についての説明となります。
【画像の切り抜き】
スタイル機能の１つとして画像の「切り抜き」が出来ます。
いくつかの切り抜き項目があるので、適切な切り抜きを選びます。
【画像の幅切り替え】
スタイルの「幅」の設定では、記入欄に数字を入れるか、つまみを左右に動かすことで画像の幅を変更することが出来ます。
【画像のボーダー設定 – 一般】
画像を囲む枠線である、「ボーダー」を設定できます。
本記事は、スタイルを「Solid」（直線）色を黒、太さを上下左右それぞれ５pxに設定しました。
スタイルの選択欄については以下の機能となっております。
- デフォルト（なし）
- なし
- Solid（直線）
- Dashed（破線）
- Dotted（点線）
- Double（２本線）
【画像のボーダー設定 – Radius & Shadow】
【Radius】
「Radius」（丸み）では、画像の枠線に丸みを変更できる設定を行えます。
「上、下、左、右」それぞれ、個別に値を変更することもできます。
【Shadow】
「Radius」（丸み）では、画像の枠線に丸みを変更できる設定を行えます。
「上、下、左、右」それぞれ、個別に値を変更することもできます。
【Caption Typography】
この設定は先ほど説明したCaptionテキストを編集するための項目となります。
テキスト編集については詳しく説明した記事があるので、そちらからご覧ください。
編集設定を行った後、プレビュー画面で画像にカーソルを合わせるとテキストのスタイルが変わっていることが分かります。
まとめ
ビーバービルダーの画像の編集方法についてこのコラムでは説明してきました。
画像を用いることで、ユーザーにとって見やすいWebページになります。
もし、編集操作について不明点があればこちらの記事が参考になるかと思うので是非、ご活用ください。