コンテンツ編集に関するよくあるご質問
■概要 PLAINERのガイドには、「次へ進む」というボタンが表示されます。 このボタンが表示されない場合は、以下の設定をご確認ください。 ■確認点 1.当該ガイドの次に、別のガイドかページが存在するか確認する ガイドを設定した際に、ガイドが設定されているページが１番最後のページあり、かつ次のガイドが存在しない場合には、「次へ進む」ボタンが表示されません。 2.ボタンタイプが「要素をクリックして進む」になっている このボタンタイプだと、「次へ進む」ボタンではなく、ガイドが付いている要素（＝実画面上のボタンやメニューなど）をクリックすることで、次へ進む挙動となります。 そのため「次へ進む」ボタンが非表示になります。
PLAINERのポップアップガイドでは、複数のボタンを設置できます。 通常、すべてのボタンは同じ色で表示されますが、ボタンごとに異なる色を設定したいというケースもあるかと思います。 例：特定のボタンだけ色を変える たとえば、以下のように色分けしたい場合： 「デモツアーを開始する」：ブルー（デフォルトカラー）のまま 「詳細機能を見る」：オレンジに変更 この場合、以下のCSSをポップアップガイドの本文に入力することで対応可能です。 <style>.plainer-popup-link:nth-of-type(2){background-color: #f18800!important; font-size: 16px; color: #FFFFFF!important;}.plainer-popup-link:hover{background-color:#f18800!important;}</style> この設定を追加することで、2番目のボタンのみ色が変更されます。 各項目の補足 ▪️ボタンの位置を変更したい場合 以下の部分の数字を変更してください。 .plainer-popup-link:nth-of-type**(2)** 「(2)」を「(1)」「(3)」などに変更することで、変更対象のボタンの位置を調整できます。 ▪️ボタンの色を変更したい場合 以下のコード内の色コード（#f18800）を変更することで、自由に色を設定できます。 background-color:** #f18800** ※カラーコードは、Webカラーコード（例：#FF0000 は赤）をご利用ください。 ▪️注意点 この方法は「ボタンの表示順」に基づいて色を設定しています。 そのため、ボタンの順番や数が変わると、適用される色も変わってしまう点にご注意ください。 ボタンごとに色を分けることで、ユーザーの視認性を高めたり、操作をわかりやすくしたりすることができます。 設定方法に不明点がある場合は、担当カスタマーサクセスまでお気軽にご相談ください。
概要 PLAINERで作成したバルーンガイドの余白の幅を変更することが可能です 設定方法 1. ガイドテキスト欄に<p style="padding:0px">テキスト</p>の形式でCSSを充てていただく 2. 0pxの箇所を希望の余白の幅に応じて調整していただく 補足 paddingでは以下のように上下左右それぞれ別々に余白を指定可能です。 * padding: 2px; … ［上下左右］ を指定 * padding: 2px 4px; … ［上下］ と ［左右］ を指定 * padding: 2px 4px 6px; … ［上］ と ［左右］ と ［下］ を指定 * padding: 2px 4px 6px 8px; … ［上］ と ［右］ と ［下］ と ［左］ を指定 動画
全画面にgifを設定し、デモを作成する手順は以下となります！ 1. どの画面でも良いので、PLAINERで画面をキャプチャ 2. 保存後に、画面のいずれかをクリック 3. 画面右側のメニューの「高度な編集」>「選択中の要素を変更」を何度かクリックする （※ホバー時に「これより上位の要素がありません」と表示されたらOK） 4. 画面右側のメニューの「高度な編集」>「画像で置き換え(β)」をクリックし、任意のgif画像を設置 5. （より綺麗に画面を作成するために、）画面右上の「︙」>「コンテンツ設定」から任意の値に画面の横幅を固定して、「HTML編集(β)」で画像のwidthを固定した幅を同一の値に変更 6. ガイドを付与 7. 「高度な編集」>「ガイド位置調整」・「ハイライトサイズ・位置調整(β)」でハイライトやガイドの位置を微調整
概要 PLAINERで作成したガイドには、画像を挿入することが可能です。 静止画のみならずgifも挿入可能ですので、ドラッグ操作など動きを伝える場面でご活用ください 実装イメージ 参考 - GIF作成ツール * Mac：PicGIF [https://tcd-theme.com/2020/10/picgif.html] * Windows：ScreenToGif [https://forest.watch.impress.co.jp/library/software/screentogif/]
◾️GOOGLEスライドのコンテンツ化 GoogleスライドをHTMLビューで表示していただき、PLAINERの拡張機能を起動することで、崩れずに撮影することが可能です。 GOOGLEスライドのHTMLビューでの表示の仕方 Ctrl+Alt+Shift+P キー（Windows、ChromeOS）または ⌘+option+shift+P キー（Mac）を押すことで、HTMLビューモードになります。 撮影時の注意点 1. Googleスライドのサイズがデフォルトだと小さいので、画面上部のメニューの「ファイル」→「ページ設定」→「カスタム」でサイズ調製可能です * ※推奨値：デフォルト×1.5～2.0倍 2. HTMLビューだと、全てのスライドが1ページにまとまってしまうので、Googleスライド上で1スライドずつファイルを分けていただくことで1ページごとの撮影が可能です
概要 HTML編集(β)機能を使わずに、UI上から任意の要素を複製できるようになりました 活用シーン * テーブルのデータ件数が少ない場合などに、画面上のみでデータを追加したい * 画面のメニューに新機能が加わったので、再撮影せずに追加したい 手順 * コンテンツ編集画面にて、複製したい要素をクリック * 画面右側をメニューより「要素を複製」をクリック * ※作成しすぎてしまった要素は「要素の削除」機能 [https://knowledge.plainer.co.jp/article/delete-elements]で削除が可能です。
概要 PLAINERでガイドを作成するときに、画面上でクリックできない箇所にガイドを付けたい場合があるかと思います 以下の機能を用いることで、ガイドの付与箇所を調整可能ですので、お試しください 機能 選択中の要素を変更 この機能を用いることで、選択されている箇所のより広範囲な箇所を選択することが可能です。 ※画面上のソースコードに存在しない範囲は選択できません 例 表形式の画面の場合、セル→行→表→表を含むメニュー→…などのように、広範囲の箇所へ登っていくような挙動となります ※一方でソースコードに存在しない ”列を指定する” ような挙動はできませんので、以下のハイライト位置・サイズ調整をご利用ください ハイライトサイズ・位置調整 ガイドの「要素のハイライト」をONにしている場合、四角枠の点滅や影のサイズを変更することが可能です。 これにより、「選択中の要素を変更」では指定できなかった範囲を指定可能です ガイド位置調整 ガイド（≒吹き出し）の箇所を調整可能です これにより、ガイドの位置を微調整したり、ハイライトサイズ・位置調整に合わせてガイドを動かすことが可能です
概要 PLAINERでは、メディア機能 [https://knowledge.plainer.co.jp/article/feature-external-content]でWebページ・動画・PDFを登録して、お客様にご案内可能です 登録したメディアをシナリオ機能 [https://knowledge.plainer.co.jp/article/feature-scenario]へ追加できない場合について、ご案内いたします 確認点 * メディアの一覧ページで、「コンテンツ生成」をクリックして、メディアをコンテンツ化する必要がございます。コンテンツ化できているか、ご確認ください。 * 下書き状態だとシナリオで閲覧できません。公開してご確認くださいませ。
概要 PLAINERではデモコンテンツ編集機能 [https://knowledge.plainer.co.jp/article/feature-edit]で、撮影した画面のテキストを編集可能です 一方で、撮影した画面の仕様上、一部のテキストを編集できない場合がございます その場合の修正方法をご案内いたします 編集方法 テキストボックスやプルダウンメニュー PLAINERの機能ではなく、撮影された画面上でテキストを書き換えられるが、書き換えた内容が保存されない場合には、こちらをご利用いただけます * 編集したいテキストの箇所をクリック * 画面右の「高度な編集」>「HTML編集(Β)」をクリック * HTMLコードを見ながら、以下のどちらかをお試しいただく * value="テキスト"の箇所を探し、"テキスト"の中身を編集したい内容に変更 * <div *****>テキスト</div>のように><で囲われているテキストを探し、中身を編集したい内容に変更 * 保存をクリック その他 上記の方法で解決しない場合、お手数ですがPLAINER担当者までお問い合わせくださいませ その際には、編集できないコンテンツのURLをいただけますと幸いです
概要 PLAINERで作成したガイド（※ポップアップではなく吹き出し形のガイド）の位置を調整することが可能です 手順 * ガイド作成後、右側のメニューを「高度な編集」>「ガイド位置調整」の位置までスクロール * 「縦」および「横」の位置をpx単位で微調整する 留意点 * 撮影された画面のレスポンシブ設定によっては、撮影時と閲覧時の画面サイズの差分により、調整した位置とは異なる箇所にガイドが動いていまいます * そのため、可能な限り移動距離が短い箇所にガイドを付けていただくことをおすすめします
概要 PLAINERのメディア機能を用いることで、日程調整ツール・カレンダーアプリのURLをデモコンテンツ内に埋め込むことが可能です。 一方で、日程調整ツールによっては、PLAINERのメディアに登録するURLに工夫が必要となりますので、以下にてご確認ください。 ツール別の方法 SPIR 共有用のURLではなく、埋め込みコード内のURLが登録可能です。 * 空き時間URLを作成する * 「サイトに埋め込む」をクリックする * コード内のdata url=の後ろにある” ”内のURLをコピーする * コピーしたURLをメディアに登録する TIMEREX 共有用のURLの末尾に/embedを書き加えることで、登録が可能です。 JICOO 共有用のURLではなく、埋め込みコード内のURLが登録可能です。 * 予約ページを作成する * 「共有する」をクリックする * 「埋め込みコード」のタブから、コード内のdata url=の後ろにある” ”内のURLをコピーするする * コピーしたURLをメディアに登録する IMMEDIO https://meetings.immedio.io/date_select/******形式のURLをそのままメディアへ登録可能です。
概要 PLAINERのポップアップガイドには画像を掲載することが可能です。 掲載した画像を中央揃えににする方法をご案内いたします。 ※この操作にはHTML/CSSの知識が必要です。 手順 * ポップアップガイド内に以下のようなコードを記載して、コード内の数値を調整して、中央に配置されるようにしてください <img src="your-image-url.jpg" alt="Centered Image" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
概要 PLAINERのデモコンテンツは削除可能です。 手順 以下の手順で削除可能です。 * 当該コンテンツの「︙」をクリック * 「アーカイブ」をクリック * 「OK」をクリック
概要 PLAINERの機能を用いることで、デモコンテンツの左下に常設のCTAを設置することが可能です。 一方で、設置したCTAと、撮影した画面のボタンが被ってしまい、デモコンテンツを進めることができなくなる場合があります。 この場合の解消方法について、ご案内いたします。 設定方法 この設定にはHTML/CSSの知識が必要となります。ご不明な点はサポートまでお問い合わせくださいませ。 * PLAINERのデモコンテンツの編集画面にて、CTAを非表示にしたいガイドの編集メニューを開く * ガイドテキスト欄に<style>.plainer-cta-button {display: none;</style>と記載する
概要 PLAINERは、デモコンテンツ編集機能 [https://knowledge.plainer.co.jp/article/feature-edit]を用いることで、画面上のテキストや画像を編集することが可能です。 しかし、画面の仕様上クリックできない箇所があり、その場合の編集にはテクニックが必要となります。 今回は、ポップアップメニュー表示時などに裏に隠れてしまい、クリックできないテキストを編集する方法をご案内します ※この操作にはHTMLやCSSの知識が必要です。 手順 ※必要に応じて、デモコンテンツを複製してバックアップを取っていただくと安心です 1. ポップアップメニューの外にある空白欄で右クリックし、「検証」を選択して、Devtoolsを開く 2. Devtools上で、ポップアップメニューの外の、グレー等の網掛けのようなHTML要素を探す ※HTMLの要素を選択すると、当該箇所がブルーのハイライトで示されるため、これを頼りに探します 3. 上記2で見つけたHTML要素を、Devtools上で削除する ※この削除はデモコンテンツには反映されませんので、ご安心ください 4. クリックできなかったテキストが編集できるようになったことを確認し、実際に編集を行う 5. 一度保存をして、画面を更新するなどして、編集内容を確認 ※保存しなくとも、デモコンテンツ内の別のページ（≒キャプチャ）へ移動して戻る形でも、編集内容を確認できます ご不明点がございましたら、サポート宛までご連絡くださいませ。 動画
概要 PLAINERはポップアップガイドやバルーンガイドのテキストの大きさを変更することが可能です。 手順 1. ガイドテキスト欄の「デフォルト」のプルダウンメニューをクリック 2. お好みのテキストサイズを指定 * デフォルトが16pxです より詳細に設定する方法 この設定には基礎的なHTML/CSSの知識が必要です 1. ガイドテキスト欄に、<p style="font-size:16px;">テキスト</p>と記載する 2. “テキスト”の箇所を任意の文字列に変更する 3. “font-size:16px;”内の数値でテキストの大きさを調整する 設定例 30PXに変更 10PXに変更
概要 PLAINERはブラウザに投影されている画面を複製して、デモコンテンツを作成することができます。 それ以外にも、スクリーンショット等の画像をデモコンテンツにすることも可能です。 これによって、スマホアプリのデモやExcel等のデスクトップアプリのデモの作成ができます。 デモ 補足 * 画像の中のテキストの編集はできかねてしまいます
概要 PLAINERで撮影した画面上の、ボックスやボタン、表などの要素を削除することが可能です。 手順 * 削除をしたい要素をクリック * 画面右側のメニューの「要素」>「削除」をクリック 補足 上手く削除ができない場合には、サポート宛に、削除したい箇所とその画面の編集画面URLをお送りいただき、お問い合わせください。
概要 サポート宛に以下のフォーマットでご連絡をいただければ、変更が可能です。 各色は色コード（例：#FFFFFF）等でご指定ください。 デモ個別に都度都度設定する形ではなく、環境への一括設定ですので、お手間等も掛かりません。 設定項目 * ボタン： * 背景色: * 背景色（ホバー時）: * 文字色: * ポップアップガイド: * 背景色: * 文字色: * バルーンガイド（=通常のガイド）: * 背景色: * 文字色: * ハイライト時の枠: * 色: * フォント: * （※@font-face 形式で指定が可能です） サンプル ポップアップ 以下のポップアップメニューの文字色、背景色を指定可能です。 バルーンガイド & ハイライト時の枠の色 以下の吹き出し箇所の文字色、背景色、およびハイライトされている箇所の点滅している四角枠を指定可能です。 注意点 * ハイライト時の枠の色を、コーポレートやサービスのメインカラーに設定してしまうと、画面に埋もれて見辛くなりやすいので、サブカラー等の設定をおすすめします
