サイト運用のためのマニュアルサイト

エディタの使い方について

本記事では、ページ/記事編集画面で自由文ブロックを選択した際に表示される、複数のアイコンについてご説明します。

元に戻す・やり直す

59782a1ff9a94ebf23912421edf27323-1715411108.png

元に戻す・・・操作をひとつ前に戻すことができます。

60cb3c8884fda720d3e2b2e9fe32629c-1715411119.png

やり直す・・・元に戻した操作を取り消すことができます。

検索と置き換え

4ae699f18161291b2488835d0d8ffcbd-1715411127.png

自由文ブロック内の文字列を検索したり、検索した文字列を置換したりすることができます。

7be1d5f9c879eb603e59e9a2afa679f4-1673783558.png

ソースコードの編集

e81087fce05ba11146567c5bd06d7ebc-1715411141.png

自由文ブロック内のHTMLを参照できます。HTMLで内容を編集することも可能です。

d8f3f28f3d465710744bd683bb2e2be6-1673783585.png

リンクの挿入・編集

963f603811288048732d6f93f292716a-1715411163.png

選択した文字列にリンクを挿入することができます。

6f48112d13a1b0713c9a3913a421910d-1673783657.png

リンク先URL:リンクを繋げたい先のURLを入力してください。アイコンからメディアにアップロードしているPDFや画像にリンクすることも可能です。
リンク元テキスト:リンクを繋げたい元のテキストを入力してください。文字列を選択した上でリンクボタンを押すと選択した文字列が表示されます。
タイトル:リンク部分にカーソルを置くと表示されるテキストを指定できます。タイトルを設定することでユーザーにリンク先の簡単な説明をすることができます。
リンクの開き方:現在のウィンドウは同じタブでページが切り替わり、新規ウィンドウは新しいタブでリンクを開く設定です。PDFや外部サイトへリンクさせる際には「新規ウィンドウ」を設定ください。
リンク一覧:CMS内に登録されているすべてのページを参照することができます。同じサイト内でリンクを繋げる場合には、URLが変更になってもリンクが切れないよう、リンク先URLに直接URLを入力するのではなく、リンク一覧から該当ページを選択し設定することをおすすめします。
クラス:リンクのデザインを選択することができます。例えば、buttonを選択するとサイトに登録されているリンクボタンのデザインを適用することができます。

e3d603ccaa076ba8e142c1da3ada54fb-1715411172.png

リンクの削除・・・リンクを繋げている箇所にカーソルを置いた上で選択するとリンクの設定が解除されます。

9e0ddb9ecd292d62fd07e7fa3964f59b-1715411182.png

アンカー(リンクの到達点)・・・英数字を入力し保存すると、同じページ内のリンクを設定することができます。アンカーリンクはURLや@linkの末尾に「#(シャープ)+設定した英数字」を入力することで設定が可能です。例えば、idをlink01と設定した場合には、「https://manual.113110.website/guide02/editer.html#link01」や「@link(123)#link01」でリンクを設定すると、idを設定した箇所へのリンクとなります。アンカーリンクの詳細はこちらもご参照ください。

13c5c2f01b63b237ffe48765c34eca61-1673784469.png

画像の挿入・編集

83a879450c0a08647f9ff2ea9e0b29ca-1715411230.png

記事ページであれば「+追加」から画像の挿入が可能ですが、画像の表示サイズを細かく調整して掲載したい場合に便利な機能です。

0b6eaa3f1da9d2106200964bc040f484-1673784509.png

画像のソース:掲載したい画像のURLを入力してください。アイコンからメディアに保存している画像を指定することも可能です。
Alternative description:ALTと呼ばれるもので、画像の説明文を入力できます。画像内に文言がある場合には、ALTにその文言を入力しておくと、音声読み上げ機能を使って閲覧しているユーザーも画像の内容を理解することができます。
幅・高さ:画像のサイズを指定する箇所です。メディアから画像を挿入した場合、自動入力されますが、自動入力されたサイズのまま保存するとスマホの時に表示が崩れる場合があるので、自動入力された数値は削除することをおすすめします。また、幅に「70%」等%で数字を指定すると、画面幅に対して7割の大きさで画像を挿入することができます。

メディアの挿入・編集

641b3e46daf116b38f71c3de73e56f19-1715411241.png

画像の他に動画などその他のメディアを挿入する際に使用するアイコンです。「埋め込み」を選択すると埋め込みタグを入力することができます。詳しい動画の挿入に関してはこちらをご参照ください。

d068d5c3c5a388391b6a838d2015caf0-1673785011.png

表の挿入・編集

c28f1941c7df0c99f8a2f504a8c1c085-1715411249.png

表の挿入をすることができます。挿入した表を選択すると行の追加や削除、列の追加や削除が可能です。また、詳細設定からそのサイトに登録されているデザインの表に変更することも可能で、詳細設定の「クラス」でtable01やtable02を選択ください。

b6adf0c9d0022e888359f35ef6cae005-1673785127.png
198dfd0ff8701b4136cf076aac7724e8-1673785239.png

書式の編集

4878f5ed610ae09a5a6a0bd76930cd2f-1715411264.png

書式をクリア・・・文字の太さや色など、設定した書式の設定を削除できます。

書式・・・自由文ブロック内にサイトに登録されているデザインの見出しを設定することができます。

フォントサイズ・・・文字の大きさを指定することができます。

太字・・・文字を太字にすることができます。

斜体・・・文字を斜めにすることができます。

下線・・・文字にアンダーラインを引くことができます。

取り消し線・・・文字に取り消し線を引くことができます。

テキストの色・・・文字の色を変更できます。

背景色・・・文字の背景色を変更できます。

左寄せ・中央揃え・右寄せ・・・文字の配置を変更できます。

番号付き箇条書き・・・サイトに登録されているデザインの番号付き箇条書きを挿入することができます。

箇条書き・・・サイトに登録されているデザインの箇条書きマークを挿入することができます。

引用・・・サイトに登録されている引用デザインを挿入することができます。

戻る