FunMaker[ファンメイカー]のコンテンツで使用できる要素「画像」について解説しています。「画像」要素では画像を左に回り込ませるなど画像のレイアウトを配置できる他、ギャラリー機能やスライドショー表示など豊富な表示方法をご用意しています。
設定項目
「画像」要素で設定できる内容は「表示方法」で選んだ項目によって異なりますので、「表示方法」ごとに見ていきます。「表示方法」には「1枚の画像」、「スライドショー」、「複数枚の画像」の三種類があります。1枚の画像
「1枚の画像」は通常の記事中に挿し絵として画像を入れるために利用されます。![画像(1枚) - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/db68c8869aec8a07770ab37a12d33ad9-1.png)
- 表示サイズ
- 中(300px ✕ 225px)、大(640px ✕ 480px)、特大(1240px ✕ 930px)から選択できます。サイドバーなしの状態で特大が横幅いっぱいになるサイズです。
- 表示形式
- 表示形式を変えることで画像の形が変形します。四隅を丸くすることで柔らかい印象を与えることが出来ます。
- 回り込み
- 左や右に回り込ませるレイアウトを選択することで画像を回り込ませることができます。これを利用することで文章の右に画像を表示するレイアウトを取ることができます。回り込みをしたくない要素には「回り込み解除」にチェックを入れましょう。
- 表示画像
- 表示する画像の設定をします。詳細は下の項をご覧ください。
- 画像
- 「クリックで選択・変更」を押し、画像を選択もしくはアップロードします。
- 画像の説明
- 画像を説明するキャプションとして画像の下に表示されます。
- 代替テキスト
- 画像の読み込みができなかった時に表示されるテキストです。必須項目ではありませんが検索エンジンに伝えられる項目ですので画像の内容を簡潔に入力しましょう。
- URL
- 画像を押したときに遷移するリンク先です。バナーなど押してもらうことを目的とする画像を利用するときに設定します。
ホームページでの表示
![画像(1枚)表示 - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/1fa4f70d9198cbd5877d1fcf1406744a.png)
管理画面上での登録内容
![画像(1枚)入力後 - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/c025c84d24905c6fad6e3b3121716003.png)
スライドショー
「スライドショー」を利用することでコンテンツ内に画像をスライド表示することができます。![画像(スライドショー) - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/716e8a442332e2a452df87d682f81d73-2.png)
- 表示サイズ
- スライドのサイズを画面幅、もしくはコンテンツ幅に調整できます。サイドバーが表示される画面ではどちらを選択してもコンテンツ幅より大きくはならない点をご注意ください。
- スライド効果
- スライドが遷移する際の効果が選択できます。選択できる効果が多数ありますので是非お試しください。
- 表示画像
- 表示する画像の設定をします。「画像を追加」を押すことで画像を好きなだけ追加することができます。設定項目についての詳細は下の項をご覧ください。
- 画像
- 「クリックで選択・変更」を押し、画像を選択もしくはアップロードします。
- URL
- 画像を押したときに遷移するリンク先です。バナーなど押してもらうことを目的とする画像を利用するときに設定します。
ホームページでの表示
![画像(スライドショー) - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/716e8a442332e2a452df87d682f81d73-1.png)
管理画面上での登録内容
![画像(スライドショー)入力後 - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/4957232fa70dc117e25ac8e7cf140bbb.png)
複数枚の画像
複数枚の画像を利用することで画像をギャラリー表示することができます。 カタログの様に複数の画像を並べて表示したい場合に本機能が効果的です。![画像(複数枚) - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/275969558a2837fd486a5c7ebaa41e4a.png)
- 表示形式
- 複数枚の画像の表示レイアウトを決定します。タイトルとテキスト、画像の位置関係を変更できます。
- 表示数
- 画像を横に何列並べるかを選択できます。最大で四列表示できますが、画像とテキストが横並びになるようなレイアウトでは表示数を減らすようにしましょう。
- 表示画像
- 表示する画像の設定をします。詳細は下の項をご覧ください。
- 画像
- 「クリックで選択・変更」を押し、画像を選択もしくはアップロードします。
- タイトル
- 画像のタイトルです。画像の名前を入れましょう。
- 画像の説明
- 画像を説明するテキストを入力します。
- 代替テキスト
- 画像の読み込みができなかった時に表示されるテキストです。必須項目ではありませんが検索エンジンに伝えられる項目ですので画像の内容を簡潔に入力しましょう。
- URL
- 画像を押したときに遷移するリンク先です。バナーなど押してもらうことを目的とする画像を利用するときに設定します。
ホームページでの表示
![画像(複数枚)入力後 - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/ee2e155cb2d9277761a03d9ad706197a.png)
管理画面上での登録内容
![画像(複数枚)表示 - FunMaker[ファンメイカー]](https://funmaker.jp/wp-content/uploads/2017/05/0fe4d06ae47e27aac8b23b15d9078268.png)