アドオン

オリジナルHTML

オリジナルHTML機能について説明いたします。オリジナルHTMLには、「PC向け」、「モバイル向け」の2種類ございます。
「モバイル向け」のみアドオン機能となりますので、アドオン「HTMLエリア・モバイル対応」のご契約が必要となります。

◆操作画面

オリジナルHTML

CMSメニューからの確認方法

ホーム機能>総合ページ作成・編集>オリジナルHTML
アドオン>アドオン一覧>オリジナルHTML

◆オリジナルHTMLとは

ショップページに「オリジナルHTML」を表示させることができる機能です。
ショップ様にて配列や装飾を決めることができますので、ユーザー様へお伝えしたい内容をショップ様の色を添えて表示させることができます。

専門知識がなくても、HTML専用エディター内ではWordのファイルを操作する感覚で、オリジナルHTMLの内容を登録することが可能です。

ご注意
「PC向け」で登録したオリジナルHTMLはモバイル端末では表示されません。
「モバイル向け」で登録したオリジナルHTMLはPC端末では表示されません。

◆作成したHTMLが表示されるページ

①ショップ総合ページ内「ABOUT US わたし達について」画面
URL:https://home.tsuku2.jp/aboutUs.php?scd=ショップ番号

②ツクツク!!!通販 ショップページ下部
URL:https://ec.tsuku2.jp/shop/ショップ番号

③ツクツク!!!ウェブチケット ショップページ下部
URL:https://ticket.tsuku2.jp/events-store/ショップ番号

◆HTMLエディター使用上の注意点

  1. HTMLエディターは【InternetExplorer】に一部対応しておりません。(画像貼り付け部分)恐れ入りますが、【Google Chrome】等のブラウザにてご使用ください。
  2. スタイルシート(CSS)を記述しても正常に反映しない場合があります。
  3. JavaScriptの記述は閲覧者にとって予期せぬ動作を引き起こす可能性があるため禁止とさせていただきます。
  4. 外部サイトの画像、動画などを表示させる場合、必ず「https」から始まるパスで編集してください。
  5. YoutubeのPV動画を貼り付ける場合、必ず「プライバシー強化モードを有効にする」にチェックを入れてから埋め込みコードをコピーしてください。
  6. ショップページのHTML表示エリアの横幅は最大790pxです。横幅が790pxを超えた画像や映像を挿入するとショップページのレイアウトが崩れることがあります。
  7. HTMLエディターで編集したコンテンツはスマートフォンページには表示されません。
    スマートフォン用のページを作成される場合はアドオン「HTMLエリア・モバイル対応」をご利用ください。
  8. 誤ったHTMLを記述するとページが表示されない場合があります。
  9. 作成中24分以上経過いたしますと、セッションの有効期限切れによって作成データが消えてしまう可能性がございます。そのため、作成時は都度保存を行っていただきますようお願いします。

◆オリジナルHTMLを登録する(PC向け)

HTML専用エディター内で、表示内容の登録を行ってください。

スタイル

テキストにスタイルを設定します。
プルダウンメニューに記載されているスタイルが装飾の見え方のイメージとなります。

太字

テキストに太字の設定をします。

下線

テキストに下線を追加します。

クリア

設定した装飾をクリアします。

追加した装飾部分を選択して【消しゴム】アイコンをクリックすると装飾がクリアされます。

フォント

テキストにフォントを設定します。
プルダウンメニーよりフォントを選択してください。

現在の色

テキストの背景色・文字色を設定します。
「Select」をクリックすると、RGBでの色指定を行うことができます。

通常リスト

リスト表示の設定します。
・項目1
・項目2
のように、リスト表示を行うことができます。

番号リスト

リスト表示の設定します。
1項目A
2項目B
のように、番号でのリスト表示を行うことができます。

文章

テキストの位置を設定します。

左寄せ、中央寄せ、右寄せ、均等割付
文字の表示位置を設定します。

文字あげ、文字さげ
文章が表示される位置を調整します。

テーブル

テーブル(表)を追加します。
追加したいテーブルの範囲までマウスを動かしクリックしてください。

リンク

テキストにリンクを設定します。
リンク設定したテキストにはアンダーラインが追加されます。

クリックすると、リンク設定画面が表示されます。
「新しいウィンドウで開く」にチェックを入れると新しいタブでページが表示されます。

画像

画像を挿入します。

画像選択画面が表示されますので、選択、またはURLを入力してください。

画像アップロード後、画像をクリックすると表示サイズの変更、右寄せ・左寄せの変更や削除を行うことができます。

動画

動画を挿入します。

動画URLを入力する画面が表示されますのでURLを入力してください。

コード表示

こちらの項目でHTMLを直接記述することができます。

入力が完了したら【保存】ボタンをクリックし、保存をしてください。
【保存】と同時に公開されます。

◆オリジナルHTMLを登録する(モバイル向け)

「PC向け」の横に表示されている「モバイル向け」タブをクリックしてください。

2023年7月1日以前に作成されたHTMLは「旧エディター」から「ブロックエディター」の切り替えが可能です。
画面右側の「ブロックエディター」と表示されているプルダウンメニューから選択し切り替えを行ってください。
※切り替え後、旧エディターに戻すことはできませんのでご注意くださいませ。

旧エディターは、「PC向け」と同様の操作となります。◆オリジナルHTMLを登録する(PC向け)項目をご確認ください。

〇パーツの追加

【+パーツを追加する】ボタンをクリックするとパーツ一覧が表示されますので、追加するパーツをクリックしてください。パーツの枠が追加されます。

2カラム

「右側にテキスト、左側に写真」のように1つの行で2つの要素を配置できるレイアウトです。

操作方法
「2カラム」のレイアウトが追加されますので「パーツを追加」をクリックし追加するパーツを選択してください。
※2カラムを選択することはできません。
各パーツの設定方法は、下記の「タイトル」項目以降をご確認ください。

タイトル

タイトルを追加します。文字に装飾を行うことができます。
【文字サイズ、色、太字、斜め、取り消し線、リンクの追加】

操作方法
「タイトルを入力してください」と表示されている箇所をクリックすると、入力可能エリアが表示されます。
文字の装飾を設定し、文字を入力、または文字を入力して、文字の装飾を指定することができます。

編集を行う場合は、追加したパーツ部分をクリックしてください。入力可能な状態になります。

テキスト

テキスト(本文)を追加します。文字に装飾を行うことができます。
【文字サイズ、色、太字、斜め、取り消し線、リンクの追加】

操作方法
「テキストを入力してください」と表示されている箇所をクリックすると、入力可能エリアが表示されます。
文字の装飾を設定し、文字を入力、または文字を入力して、文字の装飾を指定することができます。

編集を行う場合は、追加したパーツ部分をクリックしてください。入力可能な状態になります。

画像

画像を追加します。画像には、タイトル・リンクを追加することができます。

操作方法
「画像追加」項目が表示されますので、画像・タイトル・リンクを設定してください。
タイトルは最大99文字までです。

編集する場合は、右上の【編集】アイコンをクリックしてください。

画像の登録方法
①【編集】ボタンをクリックしてください。

②【画像アップロード】ボタンをクリックし、ツクツク!!!CMS管理画面に画像をアップロードしてください。

③掲載させる画像を選択すると、画面上部に画像が追加されますので【変更を保存】ボタンをクリックし、保存を実行してください。

画像の選択解除・削除
掲載画像の選択を解除する場合は、選択画像下の【ゴミ箱】アイコンをクリックし、【変更保存】ボタンをクリックしてください。
画像の削除を行う場合は、アップロード済み画像の右上の【×】ボタンをクリックしてください。
※ツクツク!!!CMS管理画面から画像データを削除することを指します。
※削除した画像は復元ができませんのでご注意くださいませ。

画像の表示サイズを変更する場合、画像が選択された状態で、ドラッグ&ドロップで変更したい位置まで移動させてください。
画像選択がされた場合、画像の周りに「●」が表示されています。

動画

YouTube動画を追加します。

操作方法
「動画追加」項目が表示されますので、タイトルと「https://youtu.be/」以降のURLを入力し、【追加】ボタンをクリックしてください。

YouTube動画URLの確認方法について

①YouTube動画ページ内の「共有」ボタンをクリックしてください。

②URLが表示されるので、https://youtu.be/の後のURLをコピーしてください。

URLが下記のような場合、赤字部分をコピーして入力してください。
https://www.youtube.com/live/XXXXXXXXXXX?feature=share
ブラウザのURL部分に表示される一番最後の文字列も同じ文字列です。併せてご確認ください。
https://www.youtube.com/watch?v=XXXXXXXXXXX

編集する場合は、右上の【編集】アイコンをクリックしてください。

動画の表示サイズを変更する場合は、動画の上でクリックし、ドラッグして表示サイズを変更してください。

リンク

リンクを追加します。

操作方法
「リンク追加」画面が表示されますので、リンク文字列・URLを入力してください。
リンク文字列は任意項目です。
設定した場合、設定した文字にリンクが追加されます。
未設定の場合は、入力したURLがそのまま表示されます。

新しいウィンドウではリンク先を別のウィンドウで表示させる場合、設定してください。
新しいウィンドウで開く動きのイメージ
設定しない場合、閲覧中のウィンドウにてリンク先背に遷移します。
閲覧中のウィンドウで開く動きのイメージ
※ツクツク!!!ホームにリンクいたします。

編集する場合は、追加したパーツ部分をクリックしてください。
「リンク追加」画面が表示されます。

◆コンテンツの編集

1.追加したパーツの位置を移動させる
パーツ左上の【↑】【↓】アイコンをクリックすることで掲載順を変更することができます。

2.画像・動画のタイトル、リンクを変更する
パーツ右上の【編集】アイコンをクリックしてください。編集画面が表示されます。
テキストの追加は、該当のパーツ部分をクリックすると編集することができます。

3.元に戻す
画像サイズ変更後、元のサイズに戻すことができます。
パーツ右上の【時計】アイコンをクリックしてください。

4.パーツを削除する
パーツ右上の【ゴミ箱】をクリックしてください。

◆オリジナルHTMLを削除する

※削除したデータは復元できませんのでご注意くださいませ。

①HTML専用エディター下の【削除】ボタンをクリックしてください。

②削除確認画面が表示されるので、【削除】ボタンをクリックし、削除を実行してください。

削除を実行すると、HTML専用エディター内が初期値(何も登録されてない状態)に戻ります。


TOP