入力エディタ

入力エディタは下図の入力を行う部分の事を指します。

入力エディタは入力した文字の大きさや色を変えたり、画像やリンクを挿入したりすることができます。

入力エディタ

ソースモード

img_20130329-163937.png
  [ソース] をクリックするとソースモードに切り替わります。
ソースモードではHTMLタグが表示されます。HTMLタグが理解できる方は直接タグを入力してページを作成できます。また、広告等のコードを貼付ける際にはソースモードに切り替えてから貼付ける必要があります。

元に戻す・やり直し

img_20190225-000222.png
左矢印で行なった操作を元に戻せます。右矢印で元に戻した操作をやり直せます。
別のページへ移動して画面が更新されると、記憶されている操作履歴はリセットされます。

スタイル

img_20130329-164240.png
文字のスタイルを変更できます。

設定方法
  1. スタイルを適用したい行をクリックしてカーソルを移動します。
  2. img_20130329-164240.png をクリックしてスタイルリストを表示します。
  3. 適用したいスタイルをクリックして設定完了です。
囲み(青・実線)
囲み(赤・点線)

フォーマット

img_20130329-174923.png
文字のフォーマットを変更できます。

設定方法
  1. フォーマットを適用したい行をクリックしてカーソルを移動します。
  2. img_20130329-174923.png をクリックしてフォーマットリストを表示します。
  3. 適用したいフォーマットをクリックして設定完了です。

フォント

img_20130329-175549.png
文字のフォーマットを変更できます。

設定方法
  1. フォントを適用したい行をクリックしてカーソルを移動します。
  2. img_20130329-175549.png をクリックしてフォントリストを表示します。
  3. 適用したいフォントをクリックして設定完了です。
この文章には「ゴシック」が設定されています。
この文章には「明朝」が設定されています。
この文章には「手書き風」が設定されています。
フォントはパソコンやデバイスによってインストールされているフォントの種類が異なるため、すべての環境で同じフォントを表示できるとは限りません。
指定したフォントがない環境の場合、近い表示のフォントが使用されます。

文字の大きさ

img_20130330-181042.png
文字のサイズ(大きさ)を変更できます。

設定方法
  1. 文字の大きさを変更したい範囲をドラッグして選択します。
  2. img_20130330-181042.png をクリックしてサイズのリストを表示します。
  3. お好みのサイズをクリックして設定完了です。

文字色

img_20130330-233559.png
文字の色を変更できます。

設定方法
  1. 文字の色を変更したい範囲をドラッグして選択します。
  2. img_20130330-233559.png をクリックして色選択パネルを表示します。
  3. お好みの色をクリックして、設定完了です。
色を解除したい場合、解除したい範囲を選択してフォーマット削除ボタンをクリックしてください
img_20130330-234651.png

文字背景色

img_20130330-234731.png
文字の背景色を変更できます。

設定方法
  1. 文字の背景色を変更したい範囲をドラッグして選択します。
  2. img_20130330-234731.png をクリックして色パネルを表示します。
  3. お好みの色をクリックして、設定完了です。
色を解除したい場合、解除したい範囲を選択してフォーマット削除ボタンをクリックしてください
img_20130330-234651.png

太字

img_20130330-235010.png
太字を適用すると文字が強調されて太字で表示されます。

設定方法
  1. 太字にしたい文字の範囲をドラッグして選択します。
  2. img_20130330-235010.png をクリックして、設定完了です。
変更内容を解除したい場合には、解除したい範囲を選択して、再度 [太字ボタン] をクリックしてください。
 

斜体

img_20130330-235204.png
文字を斜体にします。

設定方法
  1. 斜体にしたい文字の範囲をドラッグして選択します。
  2. img_20130330-235204.png をクリックしして、設定完了です。
info 変更内容を解除したい場合には、解除したい範囲を選択して、再度 [斜体ボタン] をクリックしてください

下線(アンダーライン)

img_20130330-235306.png
文字に下線を引きます。

設定方法
  1. アンダーラインを引きたい範囲をドラッグして選択します。
  2. img_20130330-235306.png をクリックして、設定完了です。
info変更内容を解除したい場合には、解除したい範囲を選択して、再度 [下線ボタン] をクリックしてください

打ち消し線(取り消し線)

img_20130330-235352.png
文字に打ち消し線(取り消し線)を引きます。

設定方法
  1. 打ち消し線を引きたい範囲をドラッグして選択します。
  2. img_20130330-235352.png をクリックして、設定完了です。
info変更内容を解除したい場合には、解除したい範囲を選択して、再度【打ち消し線ボタン】をクリックしてください

 

添字

img_20130330-235809.png

添字の設定。

設定方法
  1. 添字または上付き文字にしたい範囲をドラッグして選択します。
  2. img_20130330-235809.png をクリックします。
info変更内容を解除したい場合には、解除したい範囲を選択して、再度【添字ボタン】をクリックしてください

上付き文字

img_20130331-000133.png

上付き文字の設定。

設定方法
  1. 上付き文字にしたい範囲をドラッグして選択します。
  2. img_20130331-000133.png をクリックします。
info変更内容を解除したい場合には、解除したい範囲を選択して、再度【上付き文字ボタン】をクリックしてください

書式を解除

img_20130330-234651.png
設定されている書式を解除します。

設定方法
  1. 書式を解除したい範囲をドラッグして選択します。
  2. img_20130330-234651.png をクリックすると設定されている書式が解除されます。

リスト

img_20130331-002524.png

数字が付けられたリストや丸のマーク付きの箇条書きリストを作成できます。

設定方法
  1. リストにしたい行にカーソルを移動するか複数の行をドラッグして選択します。
  2. img_20130331-002554.png をクリックすると、数字が順番に付けられたリストが作成されます。
  3. img_20130331-002603.png をクリックすると、丸のマーク付きリストが作成されます。
img_20130331-002554.png
  1. リスト1
  2. リスト2
  3. リスト3
img_20130331-002603.png
  • リスト1
  • リスト2
  • リスト3

インデント

img_20130331-002936.png
文章の左側にスペースをとることができます。

設定方法
  1. インデントしたい行にカーソルを移動します。
  2. img_20130331-002957.png をクリックします。
  3. 必要に応じて複数回クリックする事でインデントの幅を広げることができます。
  4. img_20130331-003017.png をクリックすると、インデントされた部分を元に戻します。

インデントサンプル
インデントサンプル
インデントサンプル

インデントサンプル
インデントサンプル
インデントサンプル

インデントサンプル
インデントサンプル
インデントサンプル

文章の前にスペースをあけたい場合、スペースキーで空白を入れると、閲覧環境によって幅が異なり、レイアウトが崩れてしまう場合がありますので、インデントを利用してスペースを作って下さい。

行揃え

img_20130331-003143.png

文章の行揃えを設定できます。

設定方法

行揃えを設定したい行にカーソルを移動して行揃えのボタンをクリックします。

img_20130331-003452.png
この文章は左揃えです。
この文章は左揃えです。
この文章は左揃えです。
img_20130331-003500.png
この文章は中央揃えです。
この文章は中央揃えです。
この文章は中央揃えです。
img_20130331-003506.png
この文章は右揃えです。
この文章は右揃えです。
この文章は右揃えです。
img_20130331-003514.png
この文章は均等割付けを行っています。文字間を調整して、両端を揃えることができます。
スペースキーで空白を入れてレイアウトを行うと、閲覧環境によって幅が異なるため、おかしな表示になってしまいます。
行揃えを利用することで、綺麗なレイアウトを保つことができます。

フォーマット削除

img_20130330-234651.png
適用されているスタイル・色・行揃え等を解除します。

設定方法
  1. フォーマットを削除したい範囲をドラッグして選択します。
  2. img_20130330-234651.png をクリックしてフォーマットを削除します。

画像

画像をアップロードしていない場合

  1. 画像を挿入したい場所へカーソルを移動します。
  2. img_20130331-111245.png をクリックします。
  3. ファイルの選択画面が表示されますので、ファイルを選択します。
  4. [アップロード] をクリックします。

すでにアップロードしている画像を表示する場合

  1. 画像を挿入したい場所へカーソルを移動します。
  2. img_20130331-111901.png をクリックします。
  3. アップロードされている画像が表示されますので、使用したい画像をクリックします。
画像によって、大きさを選択するウィンドウが表示されますので、ご希望の大きさの画像をクリックしてください。

画像の表示・情報を編集する

img_20131128-123525.png

画像をダブルクリックまたは、選択して [イメージ] をクリックすることで、[画像のプロパティ] ウィンドウを開いて画像を編集することができます。

イメージ情報

URL

画像のURLが表示されます。

代替テキスト

画像の読み込み前や表示できない場合に代わりに表示されます。

画像の横幅を変更したい場合に入力して下さい。

高さ

画像の高さを変更したい場合に入力して下さい。

ボーダー

画像の周りに境界線を表示したい場合に入力して下さい。半角数字で希望の線幅を入力して下さい。

左右の余白

画像と文字との左右の余白を指定出来ます。

上下の余白

画像と文字との上下の余白を指定出来ます。

行揃え

例えば、「左」を指定した場合、画像が左に寄り、その右側に文字が回りこむ形で表示されます。

リンク

URL

リンク先のURL。画像をクリックするとURLへ移動します。
例)http://ktmhp.com/

ターゲット

新しいウィンドウ

常に新しいウィンドウを開いてリンク先を表示します。

最上部ウィンドウ

ページがフレームで構成されている場合、フレームを全て解除して表示します。

同じウィンドウ

現在と同じウィンドウに表示します。

親ウィンドウ

ページがフレームで構成されている場合、親フレームに表示。

動画

YouTubeを利用して動画を貼付けることができます。
※YouTubeへの動画のアップロード方法はYouTubeのヘルプをご参照ください。
 

  1. YouTube動画の下の [共有] をクリックします。img_20220706-082926.png
  2. 表示されたURLをコピーします。img_20220706-082941.png
  3. [メディア埋め込み] をクリックします。
    img_20130331-231332.png
  4. 表示されたウィンドウの貼り付け欄にペーストして [OK] をクリックして完了です。
    ※管理画面内に動画は表示されません。
ショート動画の場合、動画を右クリックして表示される「埋め込みコードをコピー」でコピーされたコードを貼り付けてください。

Flash

img_20150130-110327.png

設定方法
  1. Flashを挿入したい場所にカーソルを移動します。
  2. img_20150130-110327.png をクリックします。
  3. URLにFlashのURLアドレスを入力します。
  4. 必要に応じて幅、高さ、横間隔、縦間隔を入力します。
  5. [OK] をクリックして完了です。
Flashのアップロードには有料コースのご利用が必要です。

リンク

img_20130402-165257.png

設定方法
  1. リンクを挿入したい範囲の文字列や画像をドラッグして選択します。
  2. img_20130402-165257.png をクリックします。
  3. URLにジャンプ先のURLアドレスを入力します。
  4. [OK] をクリックして完了です。

リンクタイプ

URL

URLへリンクします。

このページのアンカー

ページ内にアンカーが設置してある場合、アンカーへのリンクを設定出来ます。
アンカーが設置されていない場合、選択することはできません。

E-Mail

リンクをクリックするとメールソフトが起動します。
件名や本文に予め入力された状態で開くことも可能です。

リンクの解除は img_20130402-173934.png をクリックして下さい。

アンカー

img_20130402-174048.png

アンカーの説明・・・1つのページが長く項目を見つけるのが大変な場合等にページの特定の位置にアンカーを設定して、そこにリンクをする事で同じページ内や他のページから簡単に特定の場所に移動できるようにすることができます。

  1. ジャンプ先に設定したい場所をドラッグして選択して、img_20130402-174048.png をクリックします。
  2. アンカー名(半角英数字)を入力して [OK] をクリックして設定完了です。

Googleマップを利用した地図の張りつけ

http://maps.google.co.jp/ へアクセスします。
img_20150806-062844.jpg

img_20150806-062856.jpg
1. 住所を入力して地図を表示します。
2. 住所入力欄左のバーをクリックしてメニューを表示します
3. 「地図を共有または埋め込む」をクリックしてウィンドウを開きます
img_20141120-163555.png
4. 地図を埋め込むをクリックして埋め込み用のウィンドウを表示します。

img_20141120-163703.png
5. タグをコピーします。
img_20130331-231332.png 入力エディタの [メディア埋め込み] をクリックします。

コピーした内容を入力欄にペーストして [OK] をクリックして埋め込み完了です。
※エディタ内には地図は表示されません。プレビューでご確認ください。

テーブル

新規作成

img_20130402-175128.png をクリックします。
テーブルプロパティの各項目を入力して [OK] をクリックして挿入完了です。

作成したテーブルは右クリックして表示されるメニューで行や列の追加や削除を行ったり、テーブルプロパティを変更することができます。

項目の説明

行、列

下記例のテーブルは行が4、列が2です。

img_20130526-115121.png
 

幅、高さ テーブル全体の幅と高さです。

セル内余白

セル内の文字の周りの余白を指定できます。

セル内余白 0
文字 文字
文字 文字
セル内余白 20
文字 文字
文字 文字

セル内間隔

隣接するセルの間隔を指定できます。

セル内間隔 0
文字 文字
文字 文字
セル内間隔 20
文字 文字
文字 文字

ボーダーサイズ

外枠の太さを指定できます。

ボーダーサイズ 1
   
   
   
ボーダーサイズ 10
   
   
   

行揃え

行揃え 左
文字 文字
文字 文字
行揃え 中央
 文字 文字
文字 文字
行揃え 右
文字 文字
文字 文字

行の追加、削除

セルを右クリックして表示されるメニューの「行」で追加や削除を行うことができます。

img_20130406-100702.png
 

列の追加、削除

セルを右クリックして表示されるメニューの「カラム」で追加や削除を行うことができます。

img_20130406-102208.png

セルの編集

セルを右クリックして表示されるメニューの「セル」で編集を行うことができます。

右に結合
右に結合
   
     
     
     
下に結合
下に結合
     
   
     
     
セルプロパティ
特定のセルに対して、細かな設定を行うことができます。

img_20130411-120932.png

【例)セル内の文字の整列】
セル縦の整列:中央 セル横の整列:右
セル縦の整列:下 セル縦の整列:中央
セル横の整列:中央
それぞれの行でセルを横方向にドラッグして選択して、セルプロパティの「背景色」を設定。
ラベル部分に「セル横の整列」を「中央」に設定。
セルを全て選択して、「幅」を「20パーセント」にして幅を等間隔に設定。
テーブルプロパティで「セル内間隔」を3に設定。
【セルのプロパティを編集してデザインした例】
賞味100g エネルギー
(Kcal)
水分(g) 糖質(g) 繊維(g)
かぶ 18 94.7 3.2 0.5
キャベツ 24 92.4 4.9 0.6
ごぼう 76 78.6 16.2 1.4
セロリ 13 95.3 2.3 0.5

スタイル

テーブル内にカーソルのある状態で img_20130329-164240.png をクリックすると、テーブルに適用出来るスタイルが表示されます。

 
【セルの罫線を重ねる】
   
   
   
【セル罫線横のみ】
   
   
   
【セル罫線縦のみ】
   
   
   

各種ファイルのアップロード、挿入

PDF、エクセル、ワード等の各種ファイルをアップロードして、ファイルへのリンクをページ上に設置できます。
※ご利用には有料コースへのご変更が必要です。
※旧エディタではご利用いただけません。

アップロード

  1. img_20130331-111901.png をクリックしてファイルブラウザを開きます。
  2. [ファイル] タブをクリックします。
  3. 「ファイルアップロード」でアップロードしたいファイルを選択します。
  4. ファイルについてのメモがある場合「メモ」欄に入力します。
    ※メモは管理画面でファイルを区別するための機能で、ホームページには表示されません。
  5. [送信] をクリックしてアップロードが完了します。
    ※ファイルサイズが大きい場合、アップロード完了までに数分程度かかります。

挿入

  1. ファイルリンクを挿入したい場所にカーソルを移動します。
  2. img_20130331-111901.png をクリックしてファイルブラウザを開きます。
  3. [ファイル] タブをクリックします。
  4. 挿入したいファイルをクリックして選択します。
  5. お好みに応じて「リンクの種類 」で文字のリンクと画像のリンクを選択してください。
  6. 文字リンクの場合、文字入力欄にお好きな文字を入力して [挿入] をクリックして完了です。
  7. 画像リンクの場合、お好みの画像をクリックして完了です。

その他の機能

テーブルやブロック要素の下など、入力が難しい場所へカーソルを持って行くと、下記のラインが表示される場合があります。
img_20130519-180900.png

その場合、img_20130519-180935.pngをクリックすることでその場所へ改行を入れて、入力を行うことができるようになります。