画像の使い方

主な機能

アップロードした画像を指定することで、ブロックとして表示することができます。レスポンシブレイアウトにも対応しており、PC、タブレット、スマートフォンで表示する列(カラム)数を指定できます。

主な機能は以下の通りです。

  • 画像の指定
  • 画像にリンク、altテキストを追加
  • altテキストを画像の下部に表示(ON/OFF可能)
  • レスポンシブ対応の列(カラム)数の指定

インストール方法

オーナーズストア->プラグイン->プラグイン一覧ページでAllInOneUIの設定画面を開きます。
(AllInOneUIプラグインのインストール方法はこちら
AllInOneUIの設定画面を開く

プラグインの設定画面で画像を選択し、プラグインを作成した後、プラグイン一覧画面で作成したプラグインを有効化してください。(詳細なインストール方法はこちら

設定方法と設定項目

オーナーズストア->プラグイン->プラグイン一覧ページで画像の設定リンクをクリックし、設定画面を開いてください。設定画面で画像追加ボタンを押して画像の設定画面を表示してください。

  • 画像URL: 表示したい画像のパスを入力してください
  • 画像ALT: 画像のALT属性に追加するテキストを入力してください。
  • ALTをタイトルとして表示: altテキストを画像下部に表示したい場合は「する」を選択してください。
  • リンクURL: 画像に追加するリンクURLを入力してください。
  • 表示列数: PC、タブレット、スマートフォンで表示する列(カラム)数を選択してください。

画像プラグインの設定

画像のパスについて

メニューに画像を使用する場合は画像のパス(html/upload/~)を記入してください。
画像は、html/uploadフォルダにアップロードしてください。

記入例)html/upload/banner/main-bnr1.jpg の場合
banner/main-bnr1.jpg と記入してください。

表示列数について

表示されている数字が列数になります。2を選ぶと1段に2列、6を選ぶと1段に6列で表示されるようになります。また、指定した列数は画像1つ1つに対して適用されます。
3枚の画像に対してそれぞれ2列を指定した場合、1段目に2枚、2段目に1枚表示されます。
3枚の画像を1段で表示する場合は3枚とも3列を選択してください。

列数の指定はレスポンシブに対応しています。PCでは3列、スマートフォンでは2列のようにデバイスに合わせて列数を変更可能です。

見出しの変更方法

画像ブロックには見出しが用意されています。見出しのテキストを変更したり、削除するには作成した画像のブロックを編集する必要があります。

コンテンツ管理->ブロック管理ページから作成した画像ブロックの編集リンクをクリックしてください。
見出しを変更するには、ブロックデータの上部にある「バナー」の部分を書き換えてください。
見出し全体を削除するには画像の四角で囲った部分を削除してください。
画像プラグインの見出し変更

設置方法

コンテンツ管理->ページ管理でページ一覧から任意のページのレイアウト編集をクリックし、レイアウト編集ページを表示してください。画像ブロックを任意のエリアに移動させてください。
画像プラグインのレイアウト

移動が完了したら、登録ボタンを押してレイアウトの変更を完了してください。
問題なければこちらの画像のように表示されます。
画像プラグインの表示