個別の画像を追加する
一枚の写真は千の言葉に匹敵します。Web 2.0において、画像と動画は情報を魅力的に伝えるための最も重要な媒体です。この記事では、ウェブサイトにあらゆる種類の画像を追加する方法をご紹介します。
個々の画像を追加する方法
Section titled “個々の画像を追加する方法”個々の画像は様々な方法で埋め込むことができます。ここにリストされている各要素とセクションテンプレートにはそれぞれ特定の目的があり、以下のサブセクションで説明します。
- 画像要素
- ロゴ要素
- SVG要素
- アイコン要素
セクションテンプレートや要素を追加するには、左側のサイドバーのカテゴリをクリックするだけです。表示されるコンテンツパネルをスクロールすると、利用可能なすべてのオプションが表示されます。
下の画像では、次に説明する要素のメニューの場所がわかります。
画像要素には、特定の位置に表示される画像を1つだけ含めることができます。この要素は、コンテナやセクションテンプレートなどの他の要素にネストすることで、特定のデザインを実現できます。ウェブサイトエディターで画像が表示される場所であればどこでも、編集やフォーマットの変更が可能です。
この要素は、ベクターグラフィックを除くあらゆるタイプの画像に使用できます。ウェブサイトエディターは、一般的な画像形式をすべてサポートしています。ただし、ウェブサイトで使用する場合は、.jpg、.png、または.gifファイルの使用をお勧めします。これらの形式にはそれぞれ長所と短所があり、用途に応じて考慮する必要があります。
JPGファイルは通常、ファイルサイズが最も大きいですが、利用可能な色スペクトルの点では最高品質です。ただし、画像が圧縮されている場合、ロスレス圧縮ではないため、表示に見苦しい影響が出る可能性があります。
PNGファイルは透明な背景をサポートします。PNGファイルは圧縮しても画質の劣化が少なく、インターネット上で好まれる画像形式です。
GIFファイルは、ストップモーション映画のようなアニメーションを作成できるという点で、上記の2つの形式に比べて優れています。ファイルサイズが小さい代わりに、256色という限られた色域しか使用できません。そのため、GIF画像は不自然に見えることが多いですが、似顔絵、漫画風のプレゼンテーション、インフォグラフィックなどに使用できます。.gifファイルは透明な背景も使用できます。
ウェブサイトエディタでは、独自のCDN（コンテンツ配信ネットワーク）サービスによって、画像が自動的に必要な解像度にスケーリング・圧縮されます。画像は、表示サイズに基づいて必要な解像度で配信されます。レスポンシブと遅延読み込みはオプション機能です。
画像要素は、他の要素と同様に、次のように Web サイトに追加できます。
- 左側のサイドバーの 「要素」 カテゴリをクリックします
- 画像 を探し 、マウスの左ボタンを押しながら、画像要素をウェブサイト上の好きな場所にドラッグします。
この要素の画像を選択するには:
- 左側のメニューの「画像」の下に表示されるダミー画像をクリックすると、アップロードする画像を選択できるダイアログボックスが開きます。
エディターで画像をクリックし、鉛筆アイコンをクリックして画像を交換することもできます。
ロゴ要素は画像要素の特殊なバリエーションです。ロゴ要素内の画像を変更すると、ウェブサイト全体とすべてのサブページの画像を変更するかどうかが自動的に確認されるため、単一の企業または製品のロゴにのみ使用することをお勧めします。これにより、企業または製品のCI（コーポレートアイデンティティ）が変更された場合に時間を節約できます。
ロゴの追加に関する詳細情報は、Webサイトのロゴの追加に関する記事をご覧ください。
SVG要素は、SVG形式のベクターグラフィックを表示するために使用できます。ベクターグラフィックは画質を損なうことなく拡大・縮小でき、ファイルサイズも小さいため、レスポンシブなウェブサイトに最適です。
アイコン要素
Section titled “アイコン要素”アイコン要素はSVG要素の特殊な形式で、ウェブサイトエディターに含まれる最も人気のあるアイコンライブラリのアイコンを表示できます。キーワード検索を使用すると、ファイルをアップロードすることなく、リストから目的のアイコンを選択できます。
この要素を使用すると、次のライブラリのアイコンを利用できます。
- アイコンフォント
- イオニコン
- FontAwesomeブランド
- FontAwesome Regular
- FontAwesome Solid
- FontAwesome ライト
上記に記載されていないライブラリが必要な場合は、自分で追加し、カスタム コードを使用して対応するアイコンを挿入することもできます。
セクションテンプレート
Section titled “セクションテンプレート”セクションテンプレートは、独自のデザイン仕様を持つ様々な要素の組み合わせを表します。セクションテンプレートは作業の効率化を図り、デザインプロセスをスピードアップします。ウェブサイトエディターには、画像を表示するための幅広いセクションテンプレートが用意されています。セクションテンプレートは、ギャラリーのように複数の画像を一度に表示する際に重要な役割を果たしますが、個々の画像にもいくつかの利点があります。セクションテンプレートの使い方については、セクションテンプレートの使用に関する記事をご覧ください。
テキストボックス付き画像 セクションテンプレートは、左サイドバーの 「コンテンツ」 カテゴリからご利用いただけます 。要素と同様に、セクションテンプレートはウェブサイト上のお好みの位置にドラッグ＆ドロップするだけで配置できます。
