各種ツールを使う
記事を書く上で便利なツールが多数ございます。
ここでは、 主にご利用頂くであろうツールについてご説明いたします。
メニューの使い方
メニューの使い方を左から順番に解説します。
普段お使いのワープロソフトのようにお使いいただけます。
基本操作は、記事内容の文字などの目的の場所をマウス・カーソルなどで指定してから、任意のメニューを選択することで、ご希望の更新が可能になります。作成手順はお好みによりますが、文章や画像などを先に準備してから各種レイアウトなどの編集作業をした方が手早くきれいに仕上がるかもしれません。
【ファイル】
【編集】
【編集】-[取消]
操作を1回毎に取消できます。
【編集】-[やり直し]
[取り消し]した状態を1段階毎に、元に戻せます。
【編集】-[切り取り]
選択した文字や図形を切り取りします。
切り取った内容は、一時的にパソコンの中に保存されます。
【編集】-[コピー]
選択した文字や図形をコピーします。
コピーした内容は、一時的にパソコンの中に保存されます。
【編集】-[貼り付け]
[切り取り][コピー]で一時的にパソコンの中に保存した内容を貼り付けます。
【編集】-[テキストとしてペースト]
パソコンの中に保存された内容のうち、テキストのデータだけを貼り付けます。
※例えば赤い色、下線付きの文や、テーブルの配列情報付きの部分をコピーした時など、余計な装飾なしのプレーンな文字データを貼り付けできます。
【編集】-[すべて選択]
記事内容を一括で選択できます。
【編集】-[検索]
別ウィンドウが開き、検索したい文字を入力します。
“検索”をクリックし検索します。
検索対象が複数ある場合は、”前へ”、”次へ”を使います。
検索した文字列を別の文字に変更したい場合は、”これと置換”に置き換える文字列を記入し”置換”ボタンで変更できます。
記事内を一括して修正が必要な場合は”すべて置換”ボタンを使います。
【挿入】
【挿入】-[Insert link]
文字にリンクを追加します。
記事内でリンクを追加したい文字列を選択してから、このメニューを選ぶ事で設定します。詳しい設定方法はこちら
【挿入】-[動画を挿入]
記事内に動画を表示させます。
表示させたい場所にカーソルを置いてからメニュー選択し、設定ウィンドウで詳細を設定します。詳しい設定方法はこちら
【挿入】-[特殊文字]
各種記号やギリシャ文字など特別な文字を入力する場所にカーソルを置き、メニュー選択すると、別ウィンドウに一覧が表示されます。
必要なものを選択します。
【挿入】-[横ライン]
記事内の必要な場所にカーソルを置き、メニュー選択すると、記事内に仕切り用の横ラインが追加されます。
【挿入】-[Add Media]
記事内に文字以外のものを追加します。
画像やファイル、リンク先など今までメディアとして保存したものを選択したり、新たに自分のPCから追加したりできます。
【挿入】-[「続きを読む」タグを挿入]
記事を一覧表示させる時など、見出しとして最初だけを表示させ残り部分を隠します。
隠す部分の先頭を選択し、メニュー選択すると、「続きを読む」の文字列が表示され、以降の文章が隠れます。
文字列をクリックする事で全体が再表示されるように設定できます。
【挿入】-[改ページ]
ページを改めたい場所にカーソルを置き、メニュー選択します。
その場所でページ分けがされ、各ページへのリンクがフッタなどの場所に自動作成されます。
【挿入】-[アンカー]
しおりや付箋の役目をさせるために、その場所に目印を付けます。
別の場所から直接参照するための目印として名前をつけます。
別の場所でリンクを作成する時は、その名前で指定します。
【挿入】-[日時を挿入]
右向き三角をポイントすると4種類の日時表示方法の中から選択して、パソコンの現在日時をスタンプできます。(左図参照)
【挿入】-[改行なしスペース]
改行のないスペースを挿入します。
☆リンクの挿入(Insert link)
文章等にリンクを貼りたい場合に利用します。
下図のようにリンクを設定したい箇所をドラッグし、選択された状態で設定を行います。
- urlリンク先のURLを記入します。
- タイトルタイトルに任意の名前をつけます。
- □リンクしたページ情報で、リンク元のページ内容が置き換わるのを避ける時にチェックします。(ブラウザのウィンドウ又はタブを新しく開く設定となります)
- 既存のコンテンツにリンク
自分のサイトで既に作成したページにリンクする時は、下のページリストから選択できます。
※下の検索以下が表示されていない時は、[コンテンツにリンク]をクリックすると左図のようなリストが表示されます。リスト不要の場合は、ウィンドウを縮小できます。 - 検索
必要なキーワードを入れて、下にリストされた既存のページ項目を絞り込む事ができます。 - “リンク追加”ボタンで、リンクが追加されます。
☆動画の挿入
- ソース:動画の保存元にあるソース(URLなど)を記入します。
- 代替ソース:別指定がある場合には、こちらに記入します。
- ポスター:ページほ開いた時、最初に表示されるフレームを設定します。
- サイズ:動画の大きさや比率を指定します。
- 埋め込む:埋め込みコードが用意されている場合は、右隣りタブを選択しコードを貼り付けます。
- “OK”をクリックし、挿入設定完了です。
【表示】
【表示】-[非表示文字を表示]
記事作成中の画面で、このメニューを選択すると、メニューの横にチェックマークが表示され、編集画面では通常画面表示されない文字、例えば改行なしスペースなどを表示させます。
【表示】-[ブロックを表示]
ブロックを点線で表示します。
どんな形式(p/divなど)のブロックに何を表示させているのかが見えるようになります。
表示の必要がなくなったら、もう一度メニュー選択すれば、チェックが外れ、画面が元通りになります。
【表示】-[ビジュアルエイド]
例えば、アンカーの位置などが表示されるようになります。
【表示】-[フルスクリーン]
編集画面の部分だけがフル画面に拡大され、右サイドバーなどの余計な表示がなくなり、編集作業がやりやすくなります。
【表示】-[集中執筆モード]
記事内容がブラウザ画面サイズ大に拡張し、シンプルな表示に切替ります。
ブラウズ表示に近い環境で直接編集が可能です。
使えるツールも現在解説しているメニューだけが上方表示されるため、すっきりした環境になります。
【表示形式】
【表示形式】-[太字]
太字にしたい文字を範囲選択し、このメニューを指定します。
文字を書きたい場所でクリックしてから、太字指定して、文字タイプする事もできます。
一度太字にした場所を元に戻したい時は、戻したい場所を指定して、このメニューを選択すれば通常の太さに戻ります。
また、メニューの下にある「Bボタン(右図参照)」をクリックする事もできます。
このボタンは、一度設定した太字範囲を選択すると、ボタンが押された濃い色に変わっています。
一度太字指定した場所でボタンを押すと元の明るい色に戻り太字指定も解除されます。
【表示形式】-[イタリック]
このメニューを指定した文字が斜体に変更されます。
動作は太字と同様です。
【表示形式】-[下線]
このメニューを指定した文字に下線が追加されます。
動作は太字と同様です。
【表示形式】-[打ち消し]
このメニューを指定した文字に打消し線が追加されます。
動作は太字と同様です。
【表示形式】-[上付き]
このメニューを指定した文字は表示される通常の水平位置よりも上方向にズレます。
例えば、べき乗の数字などに利用します。
【表示形式】-[下付き]
このメニューを指定した文字は表示される通常の水平位置よりも下方向にズレます。
例えば、化学式の原子個数などに利用します。
【表示形式】-[スタイル]-[見出し]-[見出し1~6]
見出し用に、大きさと太さがそれぞれのスタイルを重要性のランクで予めセットされています。
内容に応じて使い分けます。
見出しなので1行分がまとめてスタイル変更されます。
ツールの下段「段落」と書かれたメニュー(右図参照)のプルダウンからも設定可能です。
【表示形式】-[スタイル]-[インライン]-[太字…イタリック…etc.]
文字列の中で選択したものを対象にして、装飾します。
装飾内容や方法は、前述の【表示形式】-[太字/イタリック/打ち消し]などと同様です。
またツールバーのボタンも同じ動作をします。
【表示形式】-[スタイル]-[インライン]-[コード]
プログラムのソースコードなどに使います。
他のテキストと区別した表示ができます。
【表示形式】-[スタイル]-[ブロック]-[段落]
選択中の場所をブロック(ひと固まり)としてスタイリングします。
通常の段落としてのまとまりで表示されます。
表示のされ方は、環境により変わります。
【表示形式】-[スタイル]-[ブロック]-[引用]
選択中の場所をブロックとして取扱いします。
引用文として表示されます。
表示のされ方は、環境により変わります。
【表示形式】-[スタイル]-[ブロック]-[Div]
選択中の場所をブロックとしてスタイリングします。
Divとして区別されたスタイルで表示されます。
表示のされ方は、環境により変わります。
【表示形式】-[スタイル]-[ブロック]-[Pre]
選択中の場所をブロックとしてスタイリングします。
Preとして区別されたスタイルで表示されます。
表示のされ方は環境によります。
原則として、例えばスペースの数や改行など、書いた内容が等幅でそのまま表示されます。
下段の[段落ツール](右図参照)のプルダウンからも同様の設定が可能です。
【テーブル】
表作成は、こちらのメニューを使います。設定が詳細に渡り多岐の設定が可能です。
※Webの仕様によるため、お使いの環境によっては、指定した通りの表示にならない場合が多いようです。お困りの場合は、ご相談ください。
【テーブル】-[テーブルを挿入]-[セルの必要数]
表を作成したい場所にカーソルを置き、このメニューを選択します。
予め必要なセル数を指定します。タイル状のサブメニューをドラッグし、この例では、5列3行の位置でボタンを離すと、テーブルが生成されます。
編集画面上では、8方向にハンドルのついた畳まれた状態の物体が表示されています。
※白い小さな四角は、環境によっては、6又は3個しか見えないかもしれません。
このハンドルを必要な大きさにドラッグして広げます。
(行や列の数は後から調整できます。)
【テーブル】-[表のプロパティ]
作成したテーブルを選択した状態で、このメニューを指定すると左図のウィンドゥが表示されます。
【テーブル】-[表のプロパティ]-[一般]
- 幅高さを数値指定します。それぞれピクセル単位の数字を入力します。
- セルのスペースセルのパディングを指定します。同様に数値を入力します。
※セルのスペースとは、各セルとセルや枠線の間隔の事です。
※セルのパディングとは、各セルの枠線から中身が表示される場所までの間隔の事です。 - 枠線太さを数値指定します。
キャプションチェックを入れると表のタイトルを記入するスペースができます。 - 配置表全体の配置変更ができます。左寄せ・中央寄せ・右寄せ を指定します。
【テーブル】-[表のプロパティ]-[詳細]
[表のプロパティ]-[一般設定]のほかに、詳細というタブが用意されています。クリックすると、左図のようなウィンドウ表示に切替ります。
- スタイルCSS指定が可能です。※CSSの基本知識が必要です。
この例では、表の高さを68pxにする、というスタイル指定が記入されています。 - Border color枠内に#で始まる6桁のカラーコードか、redやgreen、whiteといったカラーネームをタイプするか、右側にある四角いボタンをクリックして表示されるカラーツールを使うことで色指定をします。
カラーツールの詳しい設定方法はこちら - 背景色表の背景色を指定します。こちらも設定方法は上記同様です。
【テーブル】-[表のプロパティ]-[詳細]-[Border color / 背景色]
☆色の設定方法
カラー指定ボタンを押すと、左図のウィンドゥが表示されます。
- 感覚的に、必要な色を指定できます。左側の大きい四角の中で気に入った濃さの場所でクリックすると右下の小さい四角の中に、その色が反映されます。
同時に右上からRGB#の枠内に数字やアルファベットが表示されます。 - 中央右寄りの縦長レインボーカラー内にあるコントローラーで、色相が変化しますのでお好みの色をピックアップしてください。
- 色を決定したら”OK”をクリックします。表のプロパティの設定枠中に色指定用の数字又はアルファベットが入り、カラーサンプルが右側に表示されます。”OK”します。
【テーブル】-[表を削除]
表の削除が必要な時は、このメニューを利用します。
作成した表のどこかをクリックし、8方向のハンドルが表示されているのを確認したら、このメニューを選択します。
【テーブル】-[セル]-[セルのプロパティ]
表内のセルに個別な設定が必要な時は、このメニューを利用します。
変更が必要なセルを選択又は、セル内の文字などを選択した状態で、このメニューを選択します。
別ウィンドウで各設定をします。
【テーブル】-[セル]-[セルの結合]
複数のセルを一つにまとめる時に。列数と行数を数値入力して設定します。
結合を指定するには、まとめる複数のセルのうち、最も左上に当たるセルを選択してからメニューを選択します。別ウィンドウで列と行にセルの個数を数値指定します。
【テーブル】-[セル]-[テーブルセルを分離]
セルの結合をした後で、再度分割する場合に選択します。
結合を指定するには、まとめる複数のセルのうち、最も左上に当たるセルを選択してからメニューを選択します。
※枠線は、元の状態に戻りますが、データは最も左上のセルにまとまった状態になります。
【テーブル】-[セル]-[セルのプロパティ]-[一般]
- 幅高さを数値指定します。それぞれピクセル単位の数字を入力します。
- セルの種類”ヘッダーセル”に変更できます。先頭行や先頭列など見出しにしたいセルに利用します。
一般的には、太字などで強調表示されるようになります。 - 範囲どのデータに対する見出しなのかを設定します。行、列、行グループ、列グループから選択します。
例えば最左列が見出しなら、見出しに対応するデータは右向きの行(横方向)なので、「行」を選択します。 - H Align(水平方向の配置)設定をします。左寄せ、中央寄せ、右寄せが選択できます。
- V Align(垂直方向の配置)設定をします。Top(=上寄せ)、Middle(中央寄せ)、Bottom(下寄せ)が選択できます。
【テーブル】-[セル]-[セルのプロパティ]-[詳細]
- スタイルCSSを指定します。※CSSの基本知識が必要です。
この例では、枠線の色が灰色で、幅が150pxで…というスタイル指定が記入されています。 - Border color(枠線の色)を設定できます。枠内に#で始まる6桁のカラーコードか、redやgreen、whiteといったカラーネームをタイプするか、右側にある四角いボタンをクリックして表示されるカラーツールを使うこともできます。
カラーツールの詳しい設定方法はこちら - 背景色 表の背景色を指定します。設定方法は上記同様です。
【テーブル】-[行]-[行を上に挿入/下に挿入/削除]
カーソルのある場所に対して、その上・下に行を追加したり、削除したりできます。
【テーブル】-[行]-[行のプロパティ]
行にまとめて設定が必要な時は、このメニューを利用します。
変更が必要なセル又は行を選択又は、セル内の文字などを選択した状態で、このメニューを選択します。
別ウィンドウで各設定をします。
【テーブル】-[行]-[行の切り取り / コピー]
カーソルのある行に対して、行全体を切り取り・コピーができます。
【テーブル】-[行]-[行を上に貼り付け / 下に貼り付け]
カーソルのある行に対して、上・下に貼り付けします。
※このメニューの実行前に、[行のコピー]、又は[行の切り取り]を行います。
【テーブル】-[行]-[行のプロパティ]-[一般設定]
- 行の種類ヘッダ・ボディ・フッタの指定をします
- 配置左寄せ・中央寄せ・右寄せを指定します
- 高さpixel単位の数値を入力し高さを指定します
- “OK”をクリックします
【テーブル】-[行]-[行のプロパティ]-[詳細]
【テーブル】-[行]-[行のプロパティ]-[一般設定]ウィンドウの中に詳細タブが用意されています。タブをクリックすると左図のようなウィンドウに切替ります。
- スタイルCSSを指定します。※CSSの基本知識が必要です。
この例では、枠線の色が鶯色で…というスタイル指定が記入されています。 - Border color(枠線の色)を設定できます。枠内に#で始まる6桁のカラーコードか、redやgreen、whiteといったカラーネームをタイプするか、右側にある四角いボタンをクリックして表示されるカラーツールを使うこともできます。
カラーツールの詳しい設定方法はこちら - 背景色 表の背景色を指定します。設定方法は上記同様です。
【ツール】
ツールバーの使い方
メニューの下に並ぶ各種ツールボタンについて左から順番に解説します。
基本操作は、記事内容の文字などの目的の場所をマウス・カーソルなどで指定してから、任意のボタンをクリックするだけで、ご希望の更新が可能になります。メニューと同じ動作をするボタンも多くあり、ワンクリックで操作可能なので作業効率が上がるはずです。
一段目のツール
文章を引用文として装飾します。右側が引用文になっている、又は引用文として入力できる状態を表しています。
【表示形式】-[スタイル]-[ブロック]-[引用]で代用できます。メニュー解説はこちら
文を箇条書きのリストにします。▼ボタンで先頭記号「●」「○」「■」を選択します。
文を箇条書きのリストにします。▼ボタンで「アルファベット」「ローマ字」「ギリシャ文字」などを選択します。
リンクの設定を削除する時に使います。文字を選択すると、ボタンは右側のようになります。
クリックすると、2段目のツールバーが隠れます。再表示したい時は、もう一度クリックします。
左から、「Clear left」「Clear right」「Clear both」。
配置指定の解除をします。文字や画像、改行位置などが、右(中央or左)に寄ったまま自由がきかない…時などにお試しください。
回り込みについて詳しい解説はこちら
二段目のツール
表示形式メニューの中にあるスタイルと見出し・ブロックの一部をダイレクトに指定できます。
段落に見出しの大きさの指定などが可能です。
【段落ツール】-[Address]
問合せ先などの段落に、この設定をします。デザイン環境によりますが、斜体などで目立つレイアウトに変化します。
[見出し]メニュー解説はこちら
[Pre]メニュー解説はこちら
選択した場所で文字下げの調節をします。
左側がインデントを減らす(文字列は左に移動)。右側がインデントを増やす(文字列は右に移動)。
顔文字を一覧から選択します。
良く使うツールは、ショートカットを使うと早く作業ができます。
ショートカットの一覧が表示されます。
メディアを追加
やり方を動画で見る!
記事内への画像掲載方法を動画にてご覧いただけます。
投稿記事作成・固定ページ作成の途中、画像や動画などのメディアファイルを追加する方法
※左メニュー[メディア]の設定方法はこちら
写真や画像などのメディアファイルを追加
この青枠のついた[メディアを追加]ボタンをクリックして、表示される別ウィンドウで設定を行います。
- はじめに、記事中の追加したい場所を選んでおきます。
- [メディアを追加]ボタンをクリック
- コンピュータから ファイルを選択し、新規にアップロードします
「ファイルを選択」をクリックしてPC上のメディアファイルの場所を指定してアップロードするか、“アップロードするファイルをドロップ”と表示されている場所に、PCに保存しておいたメディアファイルのアイコンをドロップ(マウスボタンを押しながらアイコンを移動させ、ボタンを離す)することで、アップロードできます。
(この方法だと、複数画像を一度にアップロード可能。)
操作を終了したい場合は右上の[×]ボタンを押します。
[メディアライブラリ]の中から必要なファイルを選択します。
☆画像ファイルの詳細設定
添付ファイルの詳細
画像ファイルを選択すると、画面右側に詳細設定の項目が表示されます。
(※ご利用の環境によって表示項目の順番が違う場合もあります。)
- 画像を編集
大きさの調整・向きの回転などを指定します。
別ウィンドウでの詳細設定についてはこちら
- 完全に削除する
画像を削除します。 - URL
画像のフルパスが表示されます。 - タイトル
画像のタイトルを入力できます。
ここで指定した文言は画像にマウスを載せた際にポップアップ表示されます。 - キャプション
ここで入力したコメントが画像の下に表示されます。 - 代替テキスト
画像が表示されなかった場合、代わりに表示されるテキスト文章を指定できます。 - 説明
画像の説明文を入力できます。(ページ上には表示されません。)
添付ファイルの表示設定
- 配置
カーソルで配置指定した行のなかで、水平位置を指定できます。
[右、中央、左]に指定すると、画像が指定した場所に配置されます。
画像に対して文字の回り込みが起こります。例えば画像に[左]を設定すれば、その右横から文字が始まります。
[中央]ならその行で文字は横並びになりません。
[右]であれば、文字は左から始まり、画像部分に来たら折り返す、という表示になります。
「なし」と設定すると、画像は左寄りになり、文字は水平方向で画像と横並びすることなく、画像の次の行からの表示になります。 - リンク先
通常は[メディアファイル]を選択。
※画像をクリックした時に、別窓で元サイズの画像が開きます。
[添付ファイルのページ、カスタムURL、なし] が設定できます。 - サイズ
表示画像のサイズが選べます。
サムネイル(150×150)、中、大、フルサイズの選択が可能です。
各項目を指定したあと「投稿に挿入」を押すと、投稿画面に画像が挿入されます。
※アップロードできるファイルサイズは、100MB までです。
(ご利用環境によって、制限サイズが違う場合があります。)
※写真や動画のサイズが大きすぎるものは、事前にリサイズや、トリミング・加工を行いご用意ください。
※左メニュー[メディア]の設定方法はこちら
※画像の編集方法はこちら
☆動画ファイルの詳細設定
添付ファイルの詳細
動画ファイルを選択すると、画面右側に詳細設定の項目が表示されます。
(※ご利用の環境によって表示項目の順番が違う場合もあります。)
- 完全に削除する
動画を削除します。 - URL
動画のフルパスが表示されます。 - タイトル
動画のタイトルを入力できます。
ここで指定した文言は動画にマウスを載せた際にポップアップ表示されます。 - キャプション
ここで入力したコメントが動画の下に表示されます。 - 代替テキスト
動画が表示されなかった場合、代わりに表示されるテキスト文章を指定できます。 - 説明
動画の説明文を入力できます。(ページ上には表示されません。)
添付ファイルの表示設定
- 埋め込みまたはリンク
以下の中から選択できます。- メディアプレイヤーを埋め込む
ページ上に動画ファイルを直接表示させる方法です。 - メディアファイルへのリンク
アップした動画を直接呼び出すテキストリンクが貼られる。
(表示されるテキストは、「タイトル」項目にて指定したもの) - 添付ファイルページへのリンク
アップした動画を表示するページへのリンクが貼られる。
(表示されるテキストは、「タイトル」項目にて指定したもの)
- メディアプレイヤーを埋め込む
動画公開時のご注意
上記の形で動画を公開する場合、以下の問題点がございます。
- HP表示の際、動画を読み込む時間がかかる。
- 動画の形式(mp4やwmv、avi等)によって、HPをご覧の方のPC環境では再生できない場合がある。
(動画の形式に対応したソフトがインストールされていないため)
このため、動画公開はyoutube等にUPしたものをリンクさせて呼び出す方法をお勧めします。
(youtubeへの動画UP方法は、仕様変更等が多い為、ここで詳しくは記載いたしません。是非ご自身にてお調べください。)
youtubeにUPされた動画をHP上にて公開する方法は本文の入力ページにてご確認くださいませ。
※youtube動画の公開設定方法はこちら