カスタムHTMLイメージ Archive

 

画像を使った目次やメニューを作ります。
カスタムHTMLモジュールと表の挿入機能を使うよっ。

 

手順
1・カスタムHTML　へ
2・表を挿入。
3・表へ画像を挿入
4・画像へリンク設定　
します。

1・カスタムHTML

モジュール、カスタムHTMLを新規作成します。

＞＞自由にHTMLを書くモジュール1　カスタムHTMLモジュール

 

2・表を挿入

カスタムHTMLへ表を挿入。

＞＞表の挿入＿新規作成

 

3.表へ画像を挿入

 画像を選択、挿入します。

 

 表を新規作成。

 

 画像をセルへドラッグします。

 

表へ画像を挿入できました。 

画像の挿入は・・・
＞＞画像の挿入、表示　記事編集画面から

 

4・画像へリンク設定　

表へ挿入した画像にリンクを貼りましょう。

＞＞リンクを貼ろう

テキストも画像も、同じ設定方法です。

 

 

カスタムHTMLの設定の続きです。
新規作成
＞＞自由にHTMLを書くモジュール1　カスタムHTMLモジュール

表示位置変更
＞＞自由にHTMLを書くモジュール2　表示位置の変更

今回は
カスタムHTMLを特定のページだけに表示させる設定です。
フロントページだけで表示させましょう。

＜メニュー割当て＞で表示させたいページを指定するんだよ。

 

カスタムHTMLモジュール編集画面

＜メニュー割り当て＞
「Home」を選択。

 

 保存。

フロントエンドは

フロントページです。
画面下部にカスタムHTMLで設定したバナーとテキストが表示されています。

 

 フロントページでない他のページです。

バナーとテキストは表示されていませんね。

 使い方。たとえば・・・
・「お問い合わせ」メニューの記事を表示した時は、連絡先のバナーを表示させて問合せ先を分かりやすくする。
・ワンピースのページでは、バッグのバナーを表示させて他商品も見てもらえるようにする。
など。

カスタムHTMLの表示位置を変えよう。
前回は画面下部へ表示していました。
＞＞自由にHTMLを書くモジュール1　カスタムHTMLモジュール

 

カスタムHTML　モジュール編集画面

＜詳細＞
「配置」を「left」にします。

ついでに
「表示順」を変更します。
表示順にはメニューが表示されています。
選択したメニューの下へ、今設定しているカスタムHTMLが表示されます。
今回は「お問合わせ」の下へカスタムHTMLを表示します。

 

保存

 

 

フロントエンドはこうなりました。
画面左側で、メニュー「お問合わせ」の下に表示されていますね。

カスタムHTMLを表示するページを指定することもできます。
＞＞自由にHTMLを書くモジュール3　特定ページへ表示