「ビジュアルエディタ」は、HTMLコードとして保存されるウェブサイトのコンテンツを、公開画面の表示に近い形で表示させながら編集を行なうものです。ビジュアルエディタでは、様々な機能を挿入・適用できる「ツールボタンバー」を使用してHTMLの記述をすることができます。

ツールボタンバー右上にある、「ビジュアル / テキスト切替」ボタンで、テキスト(HTML)エディタに切替ることができます。テキストに切り替えると、HTMLコードを直接編集することができます。

editor

編集ツールボタン機能一覧

分類 アイコン ボタン名/機能
表示切替 tool_help キーボードショートカットのヘルプ
tool_adv ツールバーの「簡易機能」「フル機能」の切り替え
tool_fullscreen 集中執筆モード:欄外の表示を一時的に非表示にする
tool_visualblocks ブロックを表示
段落や見出しなどの行フォーマットの境を点線で表示/非表示
文字スタイル tool_bold 太字:文字を太字に
tool_italic イタリック:文字を斜体に(日本語には効かない場合があります)
tool_underline 下線:文字にアンダーライン
tool_strikethrough 打ち消し:文字に打ち消し線
tool_fontcolor tool_backcolor 文字色を設定 / 文字背景色を設定
tool_superscript tool_subscript 文字を上付き文字に / 文字を下付き文字に
tool_removeformat 文字スタイルのクリア:設定されている文字スタイルを解除
行フォーマット tool_formatselect フォーマット:段落、見出しなどの行フォーマットを指定
tool_bullist tool_numlist 番号なしリスト:箇条書きスタイルを適用
番号付きリスト:番号付箇条書きスタイルを適用
tool_indent tool_outdent インデントの追加

  • 段落の場合:インデントを増やす。
  • 箇条書きの場合、階層を1段下げる。

インデントを減らす:

  • 段落の場合:インデントを減らす。
  • 箇条書きの場合、階層を1段上げる。
tool_alignleft tool_aligncenter tool_alignright 左寄せ:行(画像)を左寄せにする
中央揃え:行(画像)を中央揃えにする
右寄せ:行(画像)を右寄せににする
tool_table テーブル:表の挿入 / 表の設定設定(表、行、列、セルの設定)
tool_blockquote 引用:他サイトや書籍等から引用したコンテンツを 「引用ブロック」 スタイルに
挿入 media-tsuika メディアを追加:画像やPDFをサーバーにアップロードして本文に挿入
tool_link リンクの挿入・編集/リンクの解除
tool_anchor アンカー:ページ内リンクのターゲットとなる「アンカー」を挿入/編集
tool_more 「続きを読む」タグを挿入:区切りを挿入する(一覧表示でこのタグまでの内容が表示される)
tool_page 改ページ:同一投稿または固定ページに、ページ区切りを挿入する
tool_hr 横ライン:区切り線を挿入
tool_nonbreaking 改行なしスペース:改行なしスペースを挿入する(英文の単語間に挿入すると単語が単独で折り返されなくなります)
tool_charmap 特殊文字の入力:特殊文字を選択して入力
定義済設定の
適用/挿入
tool_styleselect スタイル:定義済スタイルを適用する
tool_quicktags クイックタグ:定義済のコンテンツ、ショートコード等を挿入
編集操作 tool_pastetext コピー内容のスタイルを無効化:ウェブページやOffice書類からコピーされたスタイルを無効化してペースト。
tool_copy tool_paste tool_cut コピー / ペースト / 切り取り
tool_searchreplace 検索置換
tool_undo tool_redo 取り消し/やり直し

段落フォーマット

danraku-formatHTML⽂書では、文章に適切な「見出し」が挿入されるように想定されています。各セクションの内容を表すのにふさわしい簡潔なタイトルを「見出し」として使用します。単に大きい文字で表示させたいだけの場合には「見出し」のフォーマットを使うべきではありません。

HTMLでは、h1タグ〜h6タグによって、見出しレベルが設定されます(大見出し〜小見出し)。h1タグは、ページタイトルとしてすでに使用しているので、本文中では、h2〜h6が、セクションの詳細レベルを表す「見出し」タグとなります。

サイトのデザインが設定されているスタイルシートによって、各見出しタグに異なったスタイルが適用されます。


リンクの追加 tool_link 

文字列にリンクを設定するには「リンク」ボタンまたは右クリックメニューの「リンクを挿入/編集」を使用します。(コピーしたURLを選択した文字列にペーストすることでも簡単にリンク設定をすることが可能です)

  1. link-1文字列を選択してリンク入力欄を表示:リンクをつけたいテキストを選択した状態で「リンクの挿入/編集」ボタンをクリックするか、右クリックメニューの「リンクを挿入/編集」を選択すると、リンク設定の入力欄が表示されます。

  2. URLをペーストするかページ名を検索:リンク先ページのURLをペーストします。サイト内のページへのリンクの場合は、ページ名で検索して記事を選択することでURLが自動で入力されます。「適用」ボタン(改行アイコン)またはエンターキーで決定。
  3. link-2リンクの再設定・削除:リンク文字列内にカーソルを置くと、リンクURL、リンク編集ボタン、リンク削除ボタンが表示されます。
    • 外部サイトへのリンクは、新しいタブを開いて表示させることが一般的なので、歯車アイコンの「リンク設定」ボタンで詳細設定を開き、「リンクを新ウィンドウまたはタブで開く」のチェックボックスにチェックを入れます。この画面でリンク先URL・リンク文字列の修正もできます。

  4. リンクアイコンを付加 ― リンク部分をより目立たせるために「スタイル」メニューを使用してリンクアイコンを付加します。リンク文字列内にカーソルを置き、「スタイル」メニューから「リンクアイコン」を選択することでアイコン付きのスタイルが適用されます。

ページ内部のセクションへのリンク

通常リンクで別のウェブページへ移動するとページ最上部が表示されますが、ページ途中の任意のセクションにリンクを貼ることも可能です。その場合、リンクの目的地となるセクションに、IDのついた「アンカー」が必要になります。

  1. 目的地の設定 ― アンカーを挿入。
    1. 挿入したい場所にカーソルを移動し「アンカーボタンtool_anchor をクリックします。
    2. アンカーの設定ウィンドウが表示されるので「名称」欄にアルファベットでページ内の場所を示す “ID” を入力します。IDは、アルファベットと半角数字が使用可能で、数字は先頭文字には使用できません

      anchor


  2. リンクの設定 ― 任意のセクションへのリンクを設定するには、URL欄に通常のURLを入力し、末尾に、半角記号の「#」とアンカーに設定した「ID」を入力します(例. http://xxxx.com/#id)。ページ内のセクションへのリンクの場合は、URLを省き「#ID」のみを入力します(例. #mokutekichi )。

スタイル

編集ツールボタン内の「スタイル」セレクトボックスから、本文の要素に規定されたスタイルを付けることができます。

  • リンクアイコン
    閲覧者がリンクだと解りやすいよう、アイコンを挿入します。(詳細は「リンク」ヘ)
  • 折り返しなし(テーブルセル)
    テーブルセルで文字を折り返したくない場合に使用します。(詳細は「テーブル(表)」ヘ)
  • フォントサイズ
    文字を小さくしたい場合、small 〜 xxx-small、を、文字を大きくしたい場合は、large〜xxxxx-largeを使用します。


クイックタグ

「クイックタグ」には、あらかじめ編集済みのhtmlが設定されており、容易にhtml文字列を追加できます。

ページトップへ戻る