MFセクションパネルについて
ここでは、現在プレビューしているページの、alter.jsがレイアウトする最小単位のブロック(MFセクション)の一覧を表示します。
基本的にはスマートフォン用HTML中のMFセクションが表示されますが、 アイコンが付いたものは、MFEdit上で追加したMFセクションとなります。
また、ここでは自動レイアウトを一旦リセットするためのMFセクション区切りも表示されます。
アイコンが付いているものは、同じくMFEdit上で追加したMFセクション区切りとなります。
MFセクショングループ
1つ以上連続するMFセクションをMFセクショングループと呼びます。MFセクショングループは、MFセクション区切りからMFセクション区切りまでを1グループとみなします。
MFセクション・MFセクション区切りの追加・削除
MFセクションを追加したい個所のメニューをクリックし、「ここにセクションを挿入する」をクリックすると、メニューを開いた箇所の1つ上にINSアイコンが付いたMFセクションが挿入されます。
また、メニューの「ここでセクショングループを区切る」をクリックすると、1つ上に INSアイコンが付いたMFセクション区切りが挿入されます。アイコンが付いているものは、メニューから「削除」を選ぶことで、削除する事ができます。
MFセクション・MFセクション区切りの編集
一覧中のMFセクションをクリックすると「セクションのレイアウト」。MFセクション区切りをクリックすると「グループレイアウト」に画面が切り替わります。(メニューの「編集する」も同様)。
ここから各設定を変更する事ができます。
プレビュー上のMFセクションの位置
ページ設定中のMFセクションにマウスカーソルを合わせると、プレビューウインドウ上の該当のMFセクションのエリアに移動し、水色でハイライトされます。
HTML の構造変更に伴い、MFEditで指定したMFセクションが存在しなくなった場合、MFセクションの一覧に「NOT FOUND」という名前のMFセクションが出現します。この変換設定は無効なので、メニューから削除してください。
セクションのレイアウト
MFセクションをクリックすると、セクションのレイアウトに遷移します。
HTMLに記述してあるMFセクションか、MFEditで追加したMFセクションかによって設定できる項目が異なります。
セクションのレイアウト設定項目一覧
| 設定項目 | 説明 |
|---|---|
| セクションの寄せ | このMFセクション自体を画面のどこに寄せるかの設定です。「グループレイアウト」の「セクションの両端揃え」を「する」場合は、この設定は動作しません。 |
| コンテンツ変換 | MFセクションの内容に対して行う処理を選択します。 |
| 変換する | スライダー/リスト/テーブルコンテンツに対して、配置や見せ方を変更します。 |
| 非表示にする PCからのアクセス時には、このMFセクション自体を削除します。 | |
| 置き換える 指定したHTMLに置き換えます。このHTMLに適用するCSSは、「カスタムCSS」を使います。 | |
| 変換しない 内容に対して、alter.jsの変換を何も行いません。 | |
| スライダー：表示画像数 | PCで表示する際の一度に表示する画像の枚数を任意の数に変更できます。Slickでスライダーを表現している場合に使用可能になります。 |
| スライダー：タイル展開(列数) | PCでは、スライダーではなく展開して一覧表示したい場合に使用します。1行に何列表示して展開するかを指定します。 |
| リスト：列数 | 1行に列を何個配置するかを設定します。列数は1～6から選択できます。「1列表示」は、1行で全て表示するようにします。MFセクション内にリスト要素(UL/OL)が含まれている場合に設定可能になります。 |
| リスト：寄せ | 1行の<li>の数が「列数」を満たさない場合に、<li>を画面のどの位置に寄せるかを設定します。 |
| テーブル：段組み | 1つのテーブルをここで指定した数に分割し、横に並べて表示します。MFセクション内にテーブル要素(TABLE)が含まれている場合に設定可能になります。 |
セクションのレイアウト設定項目一覧
| 設定項目 | 説明 |
|---|---|
| セクションの寄せ | このMFセクション自体を画面のどこに寄せるかの設定です。「グループレイアウト」の「セクションの両端揃え」を「する」場合は、この設定は動作しません。 |
| コンテンツ変換 | MFセクション内に表示するHTMLを入力します。このHTMLに適用するCSSは、「カスタムCSS」を使います。 |
グループレイアウト
MFセクション区切りをクリックすると、グループレイアウトに遷移します。
ここで設定できる項目は、HTMLに記述してあるMFセクション区切りでも、MFEditから追加したMFセクション区切りでも、設定できる項目は同じです。
グループレイアウト設定項目一覧
| 設定項目 | 説明 |
|---|---|
| MFセクションの方向 | MFセクションの配置順番を、右方向に順番に配置するのではなく、下方向に配置するように変更します。この設定は「列数」が2以上の時に有効になります。 |
| MFセクションの寄せ | MFセクションを画面のどこに寄せるかの設定です。この設定は「列数」が1、または「セクションの両端揃え」を「する」場合には動作しません。 |
| 列数 | MFセクションを1行で何列配置するかを設定します。この設定は「基本設定」の値を上書きします。 |
| 引き伸ばし | MFセクションを配置する際の1行の横幅に対する設定です。 |
| 自動 MFEdit ではレイアウトを指定しません（未指定）。 | |
| しない 横幅を固定長にします。 | |
| 背景のみ 背景画像のみを、ブラウザ幅いっぱいに広げます。 | |
| 全て MFセクション全体をブラウザ幅いっぱいに広げます。 | |
| セクションの両端揃え | MFセクションを配置した時、列数が規定を足さなかった場合に、MFセクションの幅を広げるかどうかの設定です。広がる幅は、引き延ばしに依存します。この設定は列数が2以上の時に有効になります。 |