スマートフォン向け カスタマイズページ作成マニュアル Vol.01 2014/12 楽天トラベル http://travel.rakuten.co.jp/ もくじ 1. 2. 3. 4. 5. 6. 7. 新規作成 デザインパーツの利用方法 利用できるHTMLタグ一覧 利用できるHTML属性一覧 編集・プレビュー・公開状況の変更･削除 ページ順変更 詳細 2 １．新規作成 １．管理画面にログイン「施設情報の管理」タブを クリック 「スマートフォンカスタマイズページの追 加・編集」をクリックします ２．「ページ新規作成」をクリックします 3 １．新規作成 ３．ページタイトルを入力します ４．ＨＴＭＬを入力します ※プランをリンクさせる場合は「プランＵＲＬ一覧」から コピーしてご利用ください ※「デザインパーツ」の利用方法は「デザインパーツの 利用方法」のページをご確認ください。 ※利用できるタグは「ＨＴＭＬタク一覧」「ＨＴＭＬ属性一 覧」でご確認ください。 ５．「ＣＳＳ編集」をクリックします 4 １．新規作成 ６．ＣＳＳを入力します ※ＣＳＳは、貴施設の全てのスマートフォン用 カスタマ イズページで共有します。 ※「デザインパーツ」の利用方法はＰ．10にございます ７．「プレビュー」をクリックします 5 １．新規作成 ８．プレビューを行います ※プレビューの確認方法は２つあります ※実際にスマートフォンでご確認ください ▼プレビュー用ＵＲＬをメールで送信する方法 ① 一覧でメール送信をしたいページのチェックボック スをチェックします ② 一覧の上にあるテキストボックスに送信先のアドレ スを入力して、”メールを送信”ボタンをおします ③ 送信されたメールにあるＵＲＬからプレビューページ にアクセスしてプレビューを確認します ▼ＱＲコードを利用する方法 ① ご使用になられているスマートフォン端末にインス トールされているＱＲコード読み取りアプリを起動し てください ② ＱＲコードを読み取りプレビューページにアクセスし てプレビューを確認します ９．「作成・編集完了」をクリックします 6 １．新規作成 １０．ページの作成・編集を完了します。よろしいです か？と表示されますので「ＯＫ」をクリックします １１．次のページで「公開」をクリックします 以上で、スマートフォンカスタマイズページの新規作成 が完了しました 「ページ管理」をクリックすると、スマートフォンカスタマイ ズページの作成・編集のＴＯＰに戻ります 7 ２．デザインパーツの利用方法 スマフォページで利用できるデザインのパーツを ご用意しました。 カルーセル ＨＴＭＬのソースとＣＳＳのソースをそれぞれコピーしてご 利用ください。 画像が横にスクロール できるデザインです。 画面の一番上に配置 されるのがお勧めです。 アコーディオン 開閉式のメニューが設 置できます。 多くの情報をコンパク トに見せることができ るので、スマートフォン に最適のデザインです。 8 ２．デザインパーツの利用方法 １．「ページタイトル・ＨＴＭＬ編集」の画面で、「デザイン パーツ」をクリックする ① ＨＴＭＬソースを全選択・コピーする ② デザインサンプルのウィンドウを閉じる ③ コピーしたソースをＨＴＭＬ編集の、デザインを反映 させたい場所に貼付ける ２．「ＣＳＳ編集」をクリックする ３．「デザインパーツ」をクリックする ① ＣＳＳソースを全選択・コピーする ② デザインサンプルのウィンドウを閉じる ③ コピーしたソースをＣＳＳ編集の、任意の場所に貼 付ける ４．「プレビュー」をクリックする ５．「作成・編集完了」をクリックする 9 ３．利用できるＨＴＭＬタグ一覧 下記のHTMLタグがご利用いただけます。 article section nav aside h1 h2 h3 h4 h5 h6 header footer address p hr pre ol ul li dl dt dd figure figcaption div main a em strong small s cite q dfn abbr data time code var samp kbd sub sup i b u mark ruby rb rt rtc rp bdi bdo span br wbr ins del img table caption colgroup col tbody thead tfoot tr td th form label input button select datalist optgroup option textarea keygen output progress meter fieldset legend basefont big center font strike tt acronym isindex dir 10 ４．利用できるＨＴＭＬ属性一覧 下記のHTML属性がご利用いただけます。 class color dir face id lang size style title abbr accept acceptcharset accesskey action alt autocomple autofocus te border challenge checked cite cols colspan contentedit able crossorigin data datetime dirname disabled download enctype for form formaction formenctype formmetho d formnovalid formtarget ate headers height hidden high href hreflang ismap keytype label list low max maxlength method min minlength multiple name novalidate optimum pattern placeholder prompt readonly rel required reversed rows rowspan scope selected span spellcheck src start step tabindex target translate type usemap value width wrap 11 ５．編集・プレビュー・公開状況の変更･削除 既存のスマフォカスタマイズページを編集、プレビュー 公開状況の変更、削除を行う方法です 1. ・管理画面にログイン「施設情報の管理」タブをク リック「スマートフォンカスタマイズページの追加・編 集」をクリックします 2. 編集したいページの名称をクリックします 3. 「削除」「プレビュー」「公開中/非公開変更」「削除」 から目的のボタンをクリックします。 12 ６．ページ順変更 ユーザー画面でのスマフォカスタマイズページの表示順 を変更する方法です 1. ・管理画面にログイン「施設情報の管理」タブを クリック「スマートフォンカスタマイズページの追 加・編集」をクリックします 2. ・「ページ順変更」をクリックします 3. ・ドラッグ/ドロップでページ順を変更する 4. ・「更新完了」ボタンをクリックする 13 ７．詳細 ・ＰＣ版カスタマイズページ通常版（750px）のテンプレートGOLD以外のページは、スマート フォン用に自動的に最適化されて、スマートフォンでも公開されています。 ・スマートフォンカスタマイズページの編集画面から、ＰＣ版カスタマイズページの公開状況や 表示順を変更した場合、スマートフォン上だけに反映します。ＰＣには反映しません。 ・スマートフォンカスタマイズページはPCに公開することはできません。 ・スマートフォンページは最大16ページ作成できます。 ・スマートフォンで公開できるページ数は最大8ページまでとなります。（スマートフォンカスタマ イズページと最適化されたＰＣ版カスタマイズページを合わせた枚数です） ・公開中のページに限りユーザ画面に表示されます。 ・CSSは１つのCSSを全てのページで共有します。１つのページに対して１つのCSSではあり ませんのでご注意ください。 ・カスタマイズページは楽天トラベルでバックアップをしておりません。あらかじめご了承くださ い。宿泊施設様にてバックアップしておくことをお勧めいたします。 14
© Copyright 2024 ExpyDoc
