固定ページのテキスト・画像・リンクなどをビジュアルで確認しながら編集したい方向けのページです。テキスト編集・画像差し替え・リンク設定・項目の増減など、見たまま編集の基本操作を説明します。
見たまま編集機能は企業様のご要望に合わせて個別に実装しています。組み込み方法によっては編集できない箇所もあります。ご不明点はチャットボットよりお気軽にお問い合わせください。
固定ページの編集画面で、左サイドバーの［見たまま編集］をクリックします。
テキストの編集方法は2通りあります。
文言のみ変更したい場合に適した方法です。
編集したいテキストをクリックします
編集モードに切り替わるので文字を入力します
テキストを選択（ハイライト）すると9項目のテキストエディタが表示されます
項目 | 説明 |
|---|---|
1. 太字 | 文字を太く表示 |
2. イタリック | 文字を斜めに表示 |
3. 下線 | アンダーラインを表示 |
4. フォントサイズ | テキストのサイズ変更（PC/SP同じサイズ） |
5. フォントサイズ（レスポンシブ） | PC/SPそれぞれに適切なサイズを自動適用 |
6. テキストカラー | 文字色の変更 |
7. リンク挿入 | テキストにリンクを設定 |
8. 元に戻す | 直前の状態に戻す |
9. やり直し | やり直す |
細かな装飾を加えたい場合に適した方法です。
編集したいテキストをクリックします
ペンマークの ［モーダル編集アイコン］ をクリックします
モーダル画面でテキストを編集します
［保存］ をクリックすると見たまま編集に反映されます
モーダルエディタ 基本機能（8項目）
項目 | 説明 |
|---|---|
a. 太字 | 太字に変更 |
b. イタリック | 斜体に変更 |
c. 下線 | 下線を追加 |
d. より多くのテキスト | 詳細機能を開く |
e. リンクの挿入 | リンクを追加 |
f. 元に戻す | 1つ前の状態に戻す |
g. やり直す | 1つ後の状態に戻す |
h. その他 | HTMLモード・ヘルプなど |
h.その他の中には２つの機能が用意されています。
項目 | 説明 |
|---|---|
I. HTMLモード | テキストの内容をHTMLで編集 |
J. ヘルプ | テキストエディタのショートカット一覧を表示 |
HTMLの記述方法やタグの使い方など、HTMLに関する技術的な内容はサポート対象外となります。記述内容については、お客様にてご確認ください。
HTMLモードで section タグを使用すると、「見たまま編集」が正常に利用できなくなる場合があります。HTMLモードでは section タグを使用しないようご注意ください。
モーダルエディタ 詳細機能（11項目）
項目 | 説明 |
|---|---|
a. 取り消し線 | 取り消し線を追加 |
b. 下付き文字 | 文字下に小さい文字を追加 |
c. 上付き文字 | 文字上に小さい文字を追加 |
d. フォント | 英字フォントを6種類から変更 |
e. フォントサイズ | 文字サイズを変更 |
f. フォントサイズ（レスポンシブ） | PC/SPそれぞれに適切なサイズを適用 |
g. テキストカラー | 文字色の変更（Hexカラーコード指定も可） |
h. 背景色 | 文字の背景色を変更 |
i. インラインクラス | コード・ハイライト・透過の3種類で加工 |
j. インラインスタイル | 2種類のスタイルで加工 |
k. 書式のクリア | 全ての装飾を削除 |
変更したい画像にカーソルを合わせます
［画像の設定］ボタンをクリックします
画像設定のモーダルが表示されます
［ゴミ箱］ボタンで既存画像を削除します
［画像アップロード］をクリックして新しい画像を選択します
画像のalt設定を行います
［保存する］をクリックします（最終反映はページ右上の保存ボタンが必要）
モーダル内の ［保存］ だけではページには反映されません。必ず右上の ［保存ボタン］ を押してください。
挿入できる画像はPNG・JPG形式のみです。SVG・GIF・WEBPは現在非対応です。
挿入されている画像のサイズを確認したい場合は、モーダルの画像下にある「現在挿入されている画像サイズ」をご確認ください（サイトに表示されるサイズではなく、挿入されている元画像のサイズです）。
［リンクの設定］ボタンをクリックします
モーダルの「URL」に遷移先のリンクを入力します
［保存する］をクリックします
別サイトへのリンクを設定する場合は 「外部リンク」にチェックを入れてください（ユーザーが別タブで開くようになります）。
同じサイト内のリンクはディレクトリ部分のみ入力できます。
例）https://sample.com/contact → /contact のみ入力
リストや繰り返し要素の数を変更できます。
要素を追加する → 「＋」 をクリック
要素を減らす → 「−」 をクリック
要素を全て削除すると元に戻せない場合があります。
全削除してしまった場合は、保存せずに編集を閉じるか、同じデザインのセクションを再度挿入してください。
スマートフォン表示のときだけ改行を追加したい場合は以下の手順で行います。
見たまま編集画面上部の［SPモード］に切り替えます
改行したい位置でEnterキーを押します
SP表示のときのみ改行が挿入されます（専用アイコンが表示されます）
サイトの実装方法によってはこの機能が動作しない場合があります。ご不明点はチャットボットよりお問い合わせください。
作成した記事コンテンツをセクションに紐付け、動的に情報を表示させる機能です。
紐付けたいセクションにカーソルを合わせ、［コンテンツ紐付け］ をクリックします
サイドバーで以下の項目を設定して保存します
設定項目 | 説明 |
|---|---|
コンテンツ選択 | どのコンテンツ（ブログ・お知らせなど）と紐づけるか |
表示順 | 記事の表示順序 |
上限個数 | 表示させる最大件数 |
絞り込み条件 | タグ・カテゴリなどの絞り込み |
編集したいテキスト・画像・日付を選択します
「紐付け設定」で表示させたい項目を選択します
［保存］をクリックします
※機能を適応するにはサイトの組み込み直しが必要になるため過去サイト全てに一括適応はされません。
※適応したいサイトがある場合には、都度案件担当のフロントエンドエンジニアの方へとご相談ください。