管理画面操作マニュアル【別紙】

v1.17.02023 年 5 月 1 日更新
1目次
1．エディタの詳細説明 ........................................................................................................ 3
1-1 入力について .............................................................................................................. 3
1-2 アイコンの説明 .......................................................................................................... 3
2．ファイルのアップロード ................................................................................................ 112-1 アップロード手順 ...................................................................................................... 112-2 コントラスト比などの確認 ...................................................................................... 153．使用例 ............................................................................................................................ 16
リンク貼りたい ............................................................................................................... 16
ページに画像を貼る ........................................................................................................ 17
番号付き（無し）リストを作りたい ............................................................................... 18
表を作成する ................................................................................................................... 19
テキストを右寄せしたい ................................................................................................. 20

2

1．エディタの詳細説明
1-1 入力について
入力は WORD 感覚で行えますので、HTML の知識がなくても記事の作成・編集が可能です。
・機種依存文字は使用しないでください。
① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ ⑩ ⑪ ⑫ ⑬ ⑭ ⑮ ⑯⑰ ⑱ ⑲ ⑳ Ⅰ Ⅱ Ⅲ Ⅳ Ⅴ Ⅵ Ⅶ Ⅷ Ⅸ Ⅹ ㍉ ㌔㌢ ㍍ ㌘ ㌧ ㌃ ㌶ ㍑ ㍗ ㌍ ㌦ ㌣ ㌫ ㍊ ㌻ ㎜㎝ ㎞ ㎎ ㎏ ㏄ ㎡ ㍻ 〝 〟 № ㏍ ℡㊤ ㊥ ㊦ ㊧ ㊨ ㈱ ㈲ ㈹ ㍾ ㍽ ㍼≒ ≡ ∫ ∮ ∑ √ ⊥ ∠ ∟ ⊿ ∵ ∩ ∪1-2 アイコンの説明
記事入力の[本文][自由入力]やよくある質問記事(FAQ)の[質問][回答]エリアには入力補助ボタンがあります。ブロック入力については、マニュアル「ブロック入力」をご参照ください。

(1)

切り取り
文字をドラッグした状態でクリックすると、文字を切り取ります。

(2)

コピー
文字をドラッグした状態でクリックすると、文字をコピーします。

(3)

貼り付け切り取った（またはコピーした）文字をカーソル位置に貼り付けます。

(4)

プレーンテキストとして貼り付け

3

切り取った（またはコピーした）文字をカーソル位置にプレーンテキストで貼り付けます。
(5)

ワード文章から貼り付け
WORD 文章から切り取った（またはコピーした）文字をカーソル位置に貼り付けます。WORD 文章の不要なタグが削除されて貼りつきます。

(6)

元に戻す
クリックすると直前の操作前の状態に戻ります。

(7)

やり直す
クリックすると直前の操作をやり直します。

(8)

スペルチェック[SCAYT 有効]をクリックするとスペルチェックの詳細設定ができます。

(9)

リンク挿入／編集
リンクを挿入したい場所をドラッグしてアイコンをクリックすると、下のウィンドウが立ち上がります。
「ハイパーリンク情報」と「ターゲット」を入力して[OK]をクリックするとリンクが設定されます。

4(10)

リンクの削除設定されているリンクを解除した場所をドラッグしてアイコンをクリックすると、リンクが解除されます。

(11)

アンカーの挿入／編集
アンカーを挿入したい場所、または編集したいアンカーが設定されている場所でアイコンをクリックすると、アンカーの設定画面が表示されるので、入力して[OK]をクリックします。

(12)

イメージ

画像の設定を行います。クリックすると下のウィンドウが立ち上がります。[画像情報]タブでは、画像の URL や代替テキスト(alt 設定)など必要事項を入力し、[OK]をクリックします。
画像の添付や挿入は[アップロード]でも可能です。
※「2．ファイルのアップロード（11 ページ）」参照[リンク]タブでは、画像にリンクを設定する場合に URL を入力します。

5

(13)

表

表の設定を行います。クリックすると右のウィンドウが立ち上がります。行数や列数など必要事項を入力し、[OK]をクリックします。

(14)

水平線カーソルの箇所に水平線を挿入します。

6

(15)

特殊文字の挿入
特殊文字を挿入します。クリックすると右のウィンドウが立ち上がります。
挿入したい場所でウィンドウ内の特殊文字をクリックすると、特殊文字が挿入されます。

(16)

YouTube 動画埋め込み
YouTube 動画を埋め込みます。アイコンをクリックすると、設定画面が表示されますので、YouTube から取得した埋め込みコードまたは URL やサイズ設定などを行います。

(17)

入力エリアの最大化
アイコンをクリックすると、入力エリアが最大化されます。もう一度アイコンをクリックすると元に戻ります。

(18)

HTML のソースを表示・編集入力した文章の HTML ソースが表示され、編集可能となります。※上級者向け。

7

(19)

テンプレートの挿入
テンプレートを挿入します。挿入したい箇所でアイコンをクリックすると右のウィンドウが立ち上がります。挿入したいテンプレートをクリックすると、テンプレートが挿入されます。
※CKEditor と TinyMCE に対応しています。

(20)

太字
太字にしたいテキストをドラッグしてアイコンをクリックすると、太字になります。

(21)

斜体
斜体にしたいテキストをドラッグしてアイコンをクリックすると、斜体になります。

(22)

打ち消し線
打ち消し線を入れたいテキストをドラッグしてアイコンをクリックすると、指定箇所のテキストに打ち消し線が追加されます。

(23)

書式を解除
書式を解除したいテキストをドラッグしてアイコンをクリックすると、書式がすべて解除されます。

(24)

番号付きリストカーソルの箇所に番号付きリストを挿入します。

(25)

番号無しリストカーソルの箇所に番号無しのリストを挿入します。

(26)

インデント解除
カーソルの箇所のインデントを解除します。

8

(27)

インデントカーソルの箇所にインデントを挿入します。

(28)

ブロック引用選択された文章が引用・転載文であることを表します。

(29)

左揃えドラッグされた箇所を左揃えにします。

(30)

中央揃えドラッグされた箇所を中央で揃えます。

(31)

右揃えドラッグされた箇所を右揃えにします。

(32)

両端揃えドラッグされた箇所を左右均等に割り付けします。

(33)

スタイルを設定スタイルの設定を行います。スタイルを設定したい箇所をドラッグしてアイコンをクリックすると右のウィンドウが立ち上がります。設定したいスタイルをクリックして設定します。

(34)

段落の書式を設定段落の書式の設定を行います。書式を設定したい段落にカーソルをもっていき、アイコンをクリックすると右のウィンドウが立ち上がります。設定したい書式をクリックして設定します。

9

(35)

フォントサイズを設定フォントサイズの設定を行います。サイズを設定したい箇所をドラッグし、アイコンをクリックすると右のウィンドウが立ち上がります。設定したいサイズをクリックして設定します。

(36)

フォント色を設定フォント色の設定を行います。アイコンをクリックすると右のウィンドウが立ち上がります。色を設定したい箇所をドラッグし、設定したい色をクリックして設定します。

(37)

エディタ情報使用されているエディタのバージョン等の情報が表示されます。

10

2．ファイルのアップロード
2-1 アップロード手順(1) 記事やよくある質問記事の新規作成・編集画面で[アップロード]をクリックします。

アップロードファイルについてアップロード

記事の本文で使用する画像やファイルをアップロードします。一時的にファイルの所有権はログインユーザーとなりますが、記事を 保存 するとファイルの所有権は記事に移動します。そのため、記事を削除すると添付したファイルも削除されます。
※通常はこちらからのアップロードで問題ありませんが、他の記事でも使用したいファイルの場合は、「ユーザーファイル」や「共有ファイル」にアップロードするようにしてください。
※「アップロード」クリック時に開かれるアップロードウィンドウは一時的にファイルを保存しているものになりますので、ファイルの保管をしておきたい場合は「ユーザーファイル」「共有ファイル」をご使用ください。
※記事を複製した場合、ファイルの所有権はそれぞれの記事にあります
ので、どちらかでファイルを削除された場合でも一方のファイルには影響はございません。

ユーザーファイ

アップロードしたファイルの所有権はユーザーですが、ページを保存すル

るとアップロードファイルは複製され、複製したファイルの所有権は編集中のページとなります。複製されたファイルは大元とのファイルとは別物になりますので、どちらかでファイルを削除された場合でも一方のファイルには影響はございません。

共有ファイルグループ間で共有使用するファイルをアップロードします。所有権は共有ファイルの管理権限によります。ユーザーファイル同様にページを保存するとアップロードファイルは複製され、複製したファイルの所有権は編集中のページとなります。複製されたファイルは大元とのファイルとは別物になりますので、どちらかでファイルを削除された場合でも一方のファイルには影響はございません。

11

(2) [ファイル選択]をクリックして、アップロードするファイルをクリックし、[開く]をクリックします。

[画面リサイズ]をクリック
すると、アップロードするファイルのサイズを変更することができます。

12

[画質]をクリックすると、アップロードするファイルの画質を変更することができます。

(3) ファイルが選択できていることを確認し、[保存]をクリックすると、下にアップロードしたファイルが一覧表示されます。表示されたファイルをクリックします。

[添付]をクリックすると(4)の状態まで一気に進みます。

13

(4) 編集画面に戻り、アップロードしたファイルが一覧表示されていることが確認できます。

(ア)

(イ)

(ウ)

(エ)

(5) 添付、または画像貼付します。
(ア) [添付貼付]… ファイルを添付します。
(イ) [画像貼付]… 本文内に画像を貼り付けます。
(ウ) [サムネイル]… 本文内にサムネイル画像を貼り付けます。
(エ) [削除]… アップロードしたファイルを削除します。

14

2-2 コントラスト比などの確認
アップロードしたファイルをクリックすると、コントラスト比などの確認ができます。

[コントラスト比]… 7 以上で AAA、4.5 以上で AA（22 ポイント以上の文字、または、18 ポイント以上の太字の場合は 4.5 以上で AAA、3 以上で AA）

15

3．使用例
リンク貼りたい①

リンクを挿入するテキストを選択し、[リンク]アイコンをクリックします。

② リンク先 URL とターゲットを選択します。

例）https://www.ss-proj.org/を新しいウィンドウでリンクしたい場合③リンクが設定されます。

↑ 編集画面
公開画面→

16

ページに画像を貼る①

画像を挿入する箇所で、アップロードした画像ファイルを[画像貼付]します。

② 画像を選択した状態で、[イメージ]アイコンをクリックします。

③ 必要な項目を設定して[OK]をクリックします。
※代替テキストは初期値ではファイル名が入っています（右図）が、アク
セシビリティ対応として必要な情報です。画像の説明を入力するようにしましょう。

17

番号付き（無し）リストを作りたい①

リストを挿入するテキストを選択し、[番号付きリスト]アイコンをクリックします。

② 「１．」が表示されますので、続けて必要事項を入力していきます。
改行すると番号が上がっていきます。
リストを終了するときは、もう一度[番号付きリスト]アイコンをクリックします。

③

リストが設定されます。

↑ 編集画面公開画面→

18

表を作成する①

表の挿入箇所で[表]アイコンをクリックします。

② 必要事項を入力して[OK]をクリックします。
※ヘッダーは、初期値では「なし」となっていますが、アクセシビリティ対応として設定するようにします。
キャプションは、表の内容が伝わるよう、必要に応じて設定しましょう。

③

表が挿入されますので、各セルに値を入力します。

← 編集画面↓ 公開画面19

テキストを右寄せしたい①

右寄せする段落で[右揃え]アイコンをクリックします。

② 段落が右に寄ります。

意図しない箇所まで右寄せされてしまう場合は、同一の段落となっていますので、右寄せしたいテキストの前後に改行を入れます。
③

公開画面で本文エリアの中で右揃えに表示されます。

20