タグ: 記事の作成

文章の中に表を挿入したい場合、
<table>要素を使って、表を作成することができます。
表内の行とセルは、table要素内に配置するtr要素とtd要素（th要素）で示します。
　
　

表を作成する際の基礎タグ

　
<table>　表示させたいテーブルの位置を決めるもの。
<tr>　一行に表示させたいデータを決めるもの。
<th>　見出しとして表示させたいもの。
<td>　データとして表示させたいもの。

表の作成

　
表を作成する際は、作成したい場所に<table>タグを配置します。
その中に、まず<tr>タグを記載してください。
表の記載データは、一行ずつ横に記載していく形となります。
<tr>～</tr>で囲んだ間のデータが横に表示されていき、
次の<tr>～</tr>データが二行目、
三行・四行と記載していき、最後に</table>タグで閉めることにより、1つの表として認識されます。

例として、下記のようにサンプルコードを作成した場合、
実際に表示されるものがその下の表になります。

[サンプルコード]
<table>
<tr>
<th>肉</th>
<td>牛肉</td>
<td>豚肉</td>
<td>鶏肉</td>
</tr>
<tr>
<th>魚</th>
<td>イワシ</td>
<td>サンマ</td>
<td>アユ</td>
</tr>
</table>
　
↓
　

　
こちらに表示されている表の<th><td>タグは、
利用しているテーマのデザイン(css)設定に依存しますので、
デザインを編集したい場合、別途<th><td>タグなどへの設定が必要となります。

記事の本文の中にGoogleMapの地図を挿入する方法について解説します。

1.GoogleMapの挿入
2.GoogleMapのレスポンシブ対応

GoogleMapの挿入

①「httpss://www.google.co.jp/maps/」
にアクセスします。
　

②地図上にポイントしたい建物名や具体的な住所を入れて下さい。（例：姫路城）
　

③検索結果として表示された場所を確認し、画面上部にあるメニューを開き、
「地図を共有または埋め込む」をクリックして下さい。
　

④「地図を埋め込む」をクリックして下さい。
　

⑤WordPressで表示できる埋め込み用のコードが表示されます。地図の大きさもカスタマイズできるので
カスタマイズ後、埋め込み用のコードをコピーして下さい。
　

⑥記事の新規作成画面を開いて下さい。
　

⑦⑤でコピーした埋め込み用のコードを貼り付け、「更新」ボタンをクリックして編集した内容を反映した後
「投稿を表示」をクリックして下さい。
　

⑧GoogleMapが表示されます。
　

　

GoogleMapのレスポンシブ対応

①管理画面の「外観」メニューの中にある「テーマの編集」メニューをクリックして下さい。
　

②テンプレートの中からスタイルシート(style.css)を選択し、最後の行に以下のコードを追加する。
　

追加するコード
　

③記載した埋め込み用のコード前後に下記のコードを追加する。
　

④対応前後を比較すると、変化が確認できます。
　
対応前

対応後

記事を新規作成したり編集したりする場合に、より入力作業に集中できるように記事入力の部分を大きく表示した集中執筆モードと呼ばれる機能があります。ここでは集中執筆モード(フルスクリーンモード)の利用方法について解説します。
　

フルスクリーンモード(全画面表示)での編集

　
①新しい記事を作成する場合、通常は次のような画面で編集を行います。
　



②長い文章を入力する場合には集中執筆モード(フルスクリーンモード)を使用すると便利な場合があります。
利用するにはツールバー上の「集中執筆モード(Alt+Shift+W)」をクリックして下さい。
　



③編集画面が次のように切り替わります。少し広い画面で本文の編集などを行なうことができます。
　



④画面上からマウスを移動させると画面上部に表示されていたツールバーなども非表示になりタイトルと本文を入力するためのテキストエリアだけが表示されるようになります。
(マウスを画面上に持っていけばツールバーなどが再び表示されます)。
　



⑤元の画面に戻したい場合には、再び「集中執筆モード」をクリックして下さい。
　
⑥通常画面に戻ります。
　



集中執筆モード(フルスクリーンモード)に特別な機能があるわけではありませんので、使いやすいと思われた場合に使ってみて下さい。

WordPressでエディタを使って本文を入力する場合、Enterキーを押した時の挙動について注意が必要です。
Enterキーを押し方によって段落が分けられたり同じ段落内で改行が行なわれたりします。
ここではビジュアルエディタとテキストエディタでそれぞれEnterキーを押した時にどのような扱いになるのか解説します。
　
1.ビジュアルエディタの場合
2.テキストエディタの場合

ビジュアルエディタの場合

　
①ビジュアルエディタ上でテキストを入力し、その後で[Enter]キーを押してから続けてテキストを入力してみて下さい。
　



②[Enter]キーを押す前の行と押した後の行間が結構開いているように見えます。
これはビジュアルエディタでは[Enter]キーを押すと段落が分けられるためです。
この記事を公開しホームページで表示しソースを確認すると次のように作成されていることが分かります。
　

　
Enterキーを押すことでそれまで入力された文章が<p></p>で囲まれていることが分かります。そしてEnterキーの後で入力された文章は別の<p></p>の中に記述されています。
　
③次に[Shift]＋[Enter]キーを押してから続けて文章を入力してみて下さい。
　



④今回はキーを押す前と押した後で行間が開いていません。
これはビジュアルエディタで[Shift]キーと[Enter]キーを同時に押すと改行が行なわれるためです。この記事を公開しホームページで表示しソースを確認すると次のように作成されていることが分かります。
　

　
[Shift]キーと[Enter]キーを同時に押すと、その場所に<br />が挿入されています。
　
このように段落を分けたい場合には[Enter]キーを、単に改行したい場合には[Shift]キーと[Enter]キーを同時に押して下さい。
　
なおいったん[Shift]＋[Enter]キーで改行した後で次の行の先頭に戻り再び[Shift]＋[Enter]キー押すと画面上は次のように表示されます。
　



この場合、改行が2回行なわれたように見えますが、この記事をホームページで表示しソースを確認すると次のようになっています。
　

　
段落が分けられています。このようにビジュアルエディタでは[Shift]＋[Enter]キーを押して改行をしたとしても、連続して2つ改行があると自動的に段落が分けられるようです。
　

テキストエディタの場合

　
①先程と同じようにテキストエディタ上でテキストを入力し、その後で[Enter]キーを押してから続けてテキストを入力してみて下さい。
　



②ビジュアルエディタの場合と違い、テキストエディタでは[Enter]キーを押すと改行が行なわれます。
この記事を公開しホームページで表示しソースを確認すると次のように表示されます。
　

　
[Enter]キーを押した場所に<br />が挿入されています。
　
ただしこちらはビジュアルエディタの場合と同じですが、2回[Enter]キーを押して連続して改行を行なうと段落が分けられます。
　



③この記事を投稿しホームページで表示しソースを確認すると次のようになります。
　

　
段落が分けられていることが確認できます。
　
このようにビジュアルエディタとテキストエディタでは[Enter]キーを押した時の挙動が異なります。
段落を分けたり改行したりするのは基本的な操作なので、それぞれのエディタで意図した通りの結果に出来るように使い方と挙動を覚えておいて下さい。

ホームページを表示すると公開済の記事が時系列順に並び、各記事のタイトルと本文が全て表示されますが、
ホームページを表示した時に本文を全て表示するのではなく一部だけを表示しておき、全ての本文を読むには
「続きを読む」と書かれたリンクをクリックした時に表示させるように設定することができます。
ここでは「続きを読む」を設定する方法について解説します。
　
1.「続きを読む」の設定方法
2.「続きを読む」を解除

「続きを読む」の設定方法

　
「続きを読む」を設定する場合、ホームページ単位ではなく記事単位で設定します。
また本文のどこまでをまず表示させるのかについても指定することができます。使用するボタンは次のものです。
　



①まず新しい記事を作成し本文を入力するか公開済の記事を編集画面で開いて下さい。
　



②本文に2つの文が含まれていますが、最初の文だけを表示し2つ目の文は「続きを読む」がクリックされた時に表示するようにしてみます。常に表示したい文の最後にカーソルを合わせ、その後でツールバー上の「Moreタグ挿入(Alt+Shift+T)」をクリックして下さい。
　



③先ほどカーソルを置いていた位置の後ろに点線が表示され、本文が上下に分割されます。
点線より上の部分が最初から表示される部分となり点線より下の部分が「続きを読む」がクリックされた後で表示される部分となります。
　



④テキストエディタで確認してみると、「続きを読む」が設定された場所に次のタグが記述されていました。
　

　
⑤では記事を公開しホームページでどのように表示されているか確認してみます。
　



⑥本文の中で一部分だけが表示されていることが確認できます。また最後に「続きを読む」と書かれたリンクが表示されています。
　



⑦では「続きを読む」と書かれたリンクをクリックして下さい。個別記事のページに移動し記事の本文が全て表示されます。
　



⑧「続きを読む」をクリックした時、ホームページのメインページ上で残りの部分が表示されるのではなく、記事の個別ページが表示させることで本文全体を表示するようです。
　

「続きを読む」を解除

　
①本文に設定した「続きを読む」を解除したい場合、編集画面上に表示されている「—More—」と表示されているところをクリックして下さい。
　



②次のような状態になりますのでキーボードの「Delete」キーを押して下さい。
　



③「続きを読む」が解除されました。
　



「続きを読む」を設定し本文の一部だけをメインページに表示させる方法について解説しました。数多くの記事をメインページ上で表示させたい場合には表示される本文を短くすることで閲覧性が向上するかと思います。

記事の本文の中に画像を挿入する方法について解説します。
なお画像や動画などのメディアの扱いについては「メディア(画像、動画)の利用」にて詳しく解説していますのでこのページでは挿入する手順のみ解説します。
　
1.画像の挿入
2.画像の配置やリンク先の編集
3.画像の削除
4.メディアライブラリから画像を選択して挿入

画像の挿入

①記事の新規作成画面を開いて下さい。
　



②タイトルや本分などを入力しましたら画像を挿入したい位置にカーソルを置いて下さい。
そして「メディアを追加」と書かれたリンクをクリックして下さい。
　



③「メディアを挿入」画面が表示されます。
　



④挿入する画像はあらかじめアップロードしておいたメディアから選択することもできますが、今回はローカルにある画像ファイルを選択してみます。
「ファイルをアップロード」タブを開き「ファイルを選択」と書かれたリンクをクリックして下さい。
　



⑤挿入する画像を選択するウィンドウが表示されますので、挿入したい画像を選択し「開く」ボタンをクリックして下さい。
　



⑥次のような画面が表示されます。
　



⑦画面右側に挿入する画像に関する詳細設定を行う箇所が表示されます。
　



「タイトル」に設定した値がタグのTITLE属性の値として設定されます。
　
「キャプション」に値を設置すると、画像の下部などに画像の説明として表示されます。
　
「代替テキスト」に設定した値がタグのALT属性の値として設定されます。
　
「説明」は画像に関するメモを残しておきたい時に使います。
　
「配置」は「左」「中央」「右」「なし」から選択できます。例えば「左」を選択すると左側に画像が配置されます。
　
「リンク先」は画像に対するリンクの設定です。
「メディアファイル」「添付ファイルのページ」「カスタムURL」「なし」から選択できます。
例えば「メディアファイル」を選択すると画像そのものへのリンクとなります。
「カスタムURL」を指定すると任意のURLへリンクを設定できます。
「カスタムURL」を選択した場合はリンク先のURLをすぐ下のテキストボックスに入力して下さい。
　
「サイズ」は挿入した画像のサイズです。「大」「中」「小」「フルサイズ」「サムネイル」から選択できます。
元の画像のサイズとメディアの設定によっては選択できないサイズもあります。
(詳しくは「画像ファイルの大/中/サムネイルのサイズの設定」のページにて解説します)。
　
⑧設定が終わりましたら「投稿に挿入」ボタンをクリックして下さい。
　



⑨カーソルがあった位置に画像が挿入されました。
　



テキストエディタに切り替えて確認してみると次のようなコードが挿入されています。
　

<a href="https://xn--djr06bx1ogra.com/wp-content/uploads/2015/07/4b2ea9a625016092e1f26e9c006aae02.jpg"><img src="https://xn--djr06bx1ogra.com/wp-content/uploads/2015/07/4b2ea9a625016092e1f26e9c006aae02-225x300.jpg" alt="確認画面" width="225" height="300" class="alignnone size-medium wp-image-2144" /></a>

　
⑩それでは画像が挿入された記事を公開し、ホームページでどのように表示されるのかを確認してみます。
　



⑪挿入された画像が表示されています。
また今回はキャプションに値を設定していたので、画像の左下にキャプションに設定した値がテキストで表示されています。
　

画像の配置やリンク先の編集

　
記事に挿入した画像のリンク先や配置を後から編集することもできます。
　
①画像が挿入された記事を編集画面で表示して下さい。
　



②編集を行いたい画像を一度クリックして下さい。
すると次のように画像上にいくつかのアイコンが表示されますので、右から2つめの「編集」アイコンをクリックして下さい。
　



③画像の編集を行う画面が表示されます。
画像の「配置」や「キャプション」「タイトル」などの設定、リンク先の変更が行えます。
　



④画面上部の「詳細設定」タブをクリックすると画像サイズや枠線、余白といった設定も行うことができます。
　



⑤画像に対する編集が終わりましたら「更新」ボタンをクリックして下さい。編集した内容が反映されます。
　



　

画像の削除

　
記事に挿入した画像を削除することもできます。
　
①記事の編集画面にて削除を行いたい画像を一度クリックして下さい。
すると次のように画像上にいくつかのアイコンが表示されますので、一番右の「削除」アイコンをクリックして下さい。
　



②挿入されていた画像が削除されます。
　



③テキストエディタを使って画像に関するタグを手動で削除されても同じです。
　

メディアライブラリから画像を選択して挿入

　
一度記事に挿入した画像はメディアライブラリに追加されています。
別の記事に再度同じ画像を挿入する場合には改めてローカルから画像をアップロードしなくてもメディアライブラリから画像を選択することができます。
(メディアライブラリには記事に画像に挿入する以外に事前に画像などをアップロードしておくことができます。
詳しくは「メディア(画像ファイル)のアップロード」を参照して下さい)。
　
①記事の新規作成画面を開いて下さい。そして「メディアを追加」と書かれたリンクをクリックして下さい。
　



②「メディアを挿入」画面が表示されます。「メディアライブラリ」タブを開いて下さい。
メディアライブラリに登録済の画像や動画の一覧が表示されます。
　



③記事に挿入したい画像をクリックして下さい。
するとファイルをアップロードした場合と同じく画面右側に挿入する画像に関する詳細な設定が行えるようになりますので、キャプションや配置や画像サイズなどを設定して下さい。
そして「投稿に挿入」ボタンをクリックすれば記事に画像が挿入されます。
　



このように一度記事に挿入された画像はメディアライブラリ経由で何度でも利用することができます。

記事の本文から外部のサイトや同じホームページ内の他の記事に対してリンクを貼る方法について解説します。
　
1.リンクの設定と修正
2.同じホームページ内の記事へのリンク
3.リンクの解除

リンクの設定と修正

　
①リンクを貼る時に使用するボタンは次の2つです。
リンクを貼る対象のテキストを選択してからツールバー上のボタンをクリックし、リンク先のURLを入力するという手順になります。
　



②それでは新しい記事の作成画面を表示し、タイトルや本分を入力して下さい。
そしてリンクを設定したいテキストを選択したら「リンクの挿入/編集(Alt+Shift+A)」をクリックして下さい。
　



③「リンクの挿入/編集」画面が表示されます。
　



③リンク先の「URL」及びTitle属性に設定する「タイトル」を入力して下さい。（「タイトル」は省略可能です。）
またリンクをクリックした時に新しいウィンドウやタブでリンク先を表示する場合は「リンクを新ウィンドウまたはタブで開く」にチェックを入れて下さい。
入力が終わりましたら「リンク追加」ボタンを押して下さい。
　



④選択していた文章にリンクが設定されました。
　



テキストエディタで次のように入力した場合と同じです。
<a title=”Google” href=”https://www.google.co.jp/” target=”_blank”>Google</a>
　
⑤「タイトル」に値を設定した場合はtitle属性に設定されています。
また「リンクを新ウィンドウまたはタブで開く」にチェックを入れた場合は「target=”_blank”」が記述されています。
　
既にリンクが設定されているテキストに対し、リンク先などを修正したい場合には、まず対象のリンクが設定されているテキストのどこかにカーソルを合わせ、その後でリンクを設定した時と同じく「リンクの挿入/編集(Alt+Shift+A)」をクリックして下さい。
　



⑥「リンクの挿入/編集」画面が表示され現在設定されている内容が表示されます。
必要な箇所を修正し「更新」ボタンをクリックして下さい。これでリンクの修正は完了です。
　



⑦それではリンクが設定された記事を公開し、ホームページでどのように表示されるのかを確認してみます。
　



⑧記事本文の中のリンクが設定されている個所をクリックしてみます。
　



⑨リンク先に設定したURLのサイトが表示されます。
今回は「リンクを新ウィンドウまたはタブで開く」にチェックをしていましたので、別のタブが開いてリンク先のサイトが表示されました。
　



　

同じホームページ内の記事へのリンク

　
①リンクを設定する時に外部のサイトではなく同じホームページの既に公開済の別の記事へリンクを設定したい場合があります。
その時は、「リンクの挿入/編集」画面が表示されましたら「または既存のコンテンツへリンク」と書かれた個所をクリックして下さい。
　



③同じホームページ内で作成されている記事や固定ページの一覧が表示されます。
　



④リンクを設定したい記事又は固定ページをクリックして下さい。
自動的にその記事への「URL」及び「タイトル」が設定されます。
選択が終わりましたら「リンク追加」ボタンをクリックして下さい。
　



⑤選択していた文章にリンクが設定されます。
　



テキストエディタで次のように入力した場合と同じです。
<a title=”パンケーキ” href=”https://www.egokorodiary.com/?p=20″>ホームページ</a>
　
同じホームページ内の別の記事へのリンクは絶対リンクに置き換わって設定されます。
　

リンクの解除

　
①設定したリンクを解除するには対象のリンクが設定されているテキストのどこかにカーソルを合わせ、その後で「リンクを外す(Alt+Shift+S)」をクリックして下さい。
　



②設定されていたリンクが解除されます。
　



※テキストエディタを使ってテキストに設定されていたタグを手動で削除されても同じです。

ビジュアルエディタを使って記事の本文を作成する場合に、段落、見出し、整形済みテキストなどを文に設定する方法について解説します。
　
1.フォーマットの設定
2.preformatted
3.見出し
　
※ ツールバーの位置や設定した書式をクリアする方法については『テキストの書式の設定(フォント、太字、色など)』を参照して下さい。

フォーマットの設定

　
段落、見出し、preformattedの設定は「フォーマット」の箇所で設定を行います。
　



①▼マークをクリックして頂くと設定可能なフォーマットが表示されます。
　



②「フォーマット」には「段落」「preformatted」「見出し1～6」が用意されています。
使い方は文のどこかにカーソルを置いた後で設定したいフォーマット名をクリックすると文全体にフォーマットが適用されます。
　
※デフォルトの値は「段落」となっています。特に指定しない場合は入力したテキストは「段落」フォーマットが設定されます。
　

preformatted

　
preformattedは整形済みテキストのことです。スペースや改行などを入力したまま表示したい場合に適用します。
下記ではプログラムの部分にカーソルを置き、その後で「preformatted」をクリックしています。
　



テキストエディタで次のように記述した場合と同じです。

梅雨の時期も過ぎ、
絶好のピクニック日和です。
自然豊かな○○キャンプ場にて、
採れたて新鮮野菜を使ったカレーをみなさんで作りましょう！
<pre>日時：2015年7月30日　9:00～
場所：○○キャンプ場(最寄り駅から徒歩10分)
持ち物：会費(大人１人：3,000、小人１人：1,000円)</pre>

　
実際に記事を公開して表示してみると整形済みテキストが設定された文は枠で囲まれ等幅フォントで表示されます。
　



　

見出し

　
見出し1～見出し6はそれぞれ＜h1＞から＜h6＞に対応するもので本文の中で見出しに該当する文章に対して適用します。
下記ではそれぞれの文に見出しを設定しています。
　



見出し毎にフォントサイズが異なって表示されました。数字が大きいほどフォントサイズも大きくなります。
　



テキストエディタで次のように記述した場合と同じです。
　
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見だし5</h5>
<h6>見出し6</h6>
　
実際に記事を公開して表示してみると、設定した見出しに従ってフォントサイズが異なって表示されます。
現在の使用テーマ「賢威」の場合は、下記のように、テーマに設定されたデザインが表示される形となります。
　

ビジュアルエディタを使って記事の本文を作成する場合に、リストや引用を設置したり配置方法を設定する方法について解説します。

1.番号なしリストと番号付きリスト
2.引用
3.配置の設定
4.インデントの設定

※ ツールバーの位置や設定した書式をクリアする方法については『テキストの書式の設定(フォント、太字、色など)』を参照して下さい。

番号なしリストと番号付きリスト

最初に番号なしリストと番号付きリストは、どちらも複数の行に分かれた文をリストの形で表示するために使います。
　



①「番号なしリスト」は番号が付かないリストを作成する時に使用します。
リストとして表示したい複数の文を選択した上で「番号なしリスト(Alt+Shift+U)」をクリックすると、選択していた複数の文が箇条書きとして表示されます。
　



テキストエディタで次のように記述した場合と同じです。
　

<ul>
<li>筆記用具</li>
<li>ボールペン</li>
<li>名刺</li>
</ul>

　
②「番号付きリスト」は番号が自動で付けられるリストを作成する時に使用します。リストとして表示したい複数の文を選択した上で「番号付きリスト(Alt+Shift+O)」をクリックすると、選択していた複数の文が番号付きリストとして表示されます。
　



テキストエディタで次のように記述した場合と同じです。
　

<ol>
<li>筆記用具</li>
<li>交通費の領収書</li>
<li>名刺2枚</li>
</ol>

引用

引用は、他から文章などを引用した場合に引用した部分がどこなのかを明示的に表示する場合に使用します。
　



①引用として表示したい1つ又は複数の文を選択した上で「引用 Blockquote(Alt+Shift+Q)」をクリックして下さい。
選択していた複数の文が引用として表示されます。
　



テキストエディタで次のように記述した場合と同じです。

<blockquote>電源を確認して下さい。エラーパネルが点滅していないか...</blockquote>

配置の設定

本文中に入力された文をどのように配置するのかについて設定します。
「左寄せ」「中央寄せ」「右寄せ」「均等割付」の4つの中から配置方法を選択することができます。
　



①設定する場合は配置を設定したい文のどこかにカーソルを置いた上でいずれかの配置をクリックして下さい。
　
②まず1行目にカーソルを置いてから「右寄せ(Alt+Shift+R)」をクリックして下さい。1行目が右寄せで表示されます。
　



テキストエディタで次のように記述した場合と同じです。

<p style="text-align: right;">セミナーのご案内</p>

　
③次に2行目にカーソルを置いてから「中央寄せ(Alt+Shift+C)」をクリックして下さい。2行目が中央寄せで表示されます。
　



テキストエディタで次のように記述した場合と同じです。

<p style="text-align: center;">2014年12月25日</p>

　
他に左寄せ(Alt+Shift+L)や均等割付(Alt+Shift+J)などがあります。
　

インデントの設定

インデントは文章全体を右方向へ字下げします。
右側のボタンが「インデント」で、1回クリックする毎に1段階右方向へ字下げします。
左側のボタンは「インデント 解除」でインデントされた文章を1段階左方向へ戻します。

①まず2行目にカーソルを置いてから「インデント」をクリックして下さい。
1回クリックする毎に2行目が右方向へ字下げされて表示されます。

テキストエディタで次のように記述した場合と同じです。
1回右に字下げする毎に30pxずつ左側にパディングが設定されます。
2回インデントを行った場合は60pxのパディングが設定されます。
　

<p style="padding-left: 30px;">今年は挑戦してみます。</p>
<p style="padding-left: 60px;">今年は挑戦してみます。</p>

　
②次に2行目にカーソルを置いてから「インデント解除」をクリックして下さい。1回クリックする毎に2行目が左方向へ戻って表示されます。(なお文がインデントされておらずインデント解除ができない状態の時は「インデント解除」ボタンが無効となっています)。
　

ビジュアルエディタを使って記事の本文を作成する場合、ツールバーを使って簡単に書式を設定することができます。
ここではツールバーを使って行える設定の中からテキストに対してフォントや太字斜体などの装飾、そして色の設定を行う方法について解説します。
　
1.ビジュアルエディタのツールバー
2.太字/斜体/取り消し線/下線
3.文字色
4.書式のクリア

ビジュアルエディタのツールバー

①まずツールバーにどのようなボタンが用意されているのかを確認してみます。新しい記事の作成画面を表示して下さい。
　



②本文を入力するためのテキストエリアの上に表示されているのが書式などを設定するためのツールバーです。
一部のボタンは非表示になっていますので、一番右にあるボタンをクリックして下さい。
　



③全てのボタンが表示されます。
　



このページではテキストの書式の設定に関するボタンの使い方について解説していきます。
それ以外のボタンについては別のページにて解説します。
　

太字/斜体/取り消し線/下線

　
①最初にテキストの装飾です。太字、斜体、下線、取り消し線、下線の設定ができます。
　



②「太字(Ctrl+B)」をクリックすると、選択された部分のテキストが太字になります。
　



テキストエディタで次のように記述した場合と同じです。

<strong>入力</strong>

　
③「斜体(Ctrl+I)」をクリックすると、選択された部分のテキストが斜体(イタリック)になります。
(ただし斜体になったのは半角英数字のみで日本語は斜体になりません)。
　



テキストエディタで次のように記述した場合と同じです。

<em>テキスト(text)</em>

④「取り消し線(Alt+Shift+D」をクリックすると、選択された部分のテキストに取り消し線が表示されます。
　



テキストエディタで次のように記述した場合と同じです。

<del>テキスト(text)</del>

　
⑤「下線」をクリックすると、選択された部分のテキストの下に下線が表示されます。
　



テキストエディタで次のように記述した場合と同じです。

<span style="text-decoration: underline;">入力</span>

文字色

　
次に文字色です。テキストの色の設定ができます。
　



①色を設定したい部分を選択し、「文字色」をクリックして色を選択して下さい。選択したテキストに色が設定されます。
　



テキストエディタで次のように記述した場合と同じです。

<span style="color: #ff0000;">テキスト(text)</span>

　
なお色を選択する時に「カスタム」をクリックすると次のような画面が表示されてより細かい色の選択が可能となります。
　

　

書式のクリア

　
テキストに対して行った書式の設定は同じ動作を行うことでクリアできます。
例えば「太字」が設定されている部分を元に戻したい場合は、戻したい部分を選択してから「太字」を再度クリックすることで太字をクリアできます。
　



複数の書式が設定された部分をまとめて書式をクリアしたい場合は、次の位置にある「フォーマット解除」ボタンを使うと便利です。
　



書式をクリアしたい部分を選択してから「フォーマット解除」ボタンをクリックして下さい。
選択された部分に設定された書式が全てクリアされます。
　



以上、ビジュアルエディタのツールバーの中でテキストの書式の設定に関するボタンの使い方についての解説でした。

文字の入力のやり方は、キーボードで普通に入力してもらうだけで特別なことはありませんが、

WordPressで文字の編集方法は、
「ビジュアルエディタ」と「テキストエディタ」という2種類あるんですが、
今後の更新は、文字くらいしかしないという方は、「ビジュアルエディタ」がお勧めで、
画像や動画の挿入など結構あれこれ頑張って更新していきたい方は、「テキストエディタ」での更新がお勧めです。

ここではまず2つのエディタの違いについて解説します。

1.エディタの切り替え方法
2.2つのエディタの使い方の違い

エディタの切り替え方法

　
①それでは記事の新規作成画面を表示して下さい。

②画面中央に表示されているのがエディタです。記事の本文を記述する時に使用します。

③エディタは「ビジュアルエディタ」と「テキストエディタ」の二つが用意されています。
エディタの右上にあるタブをクリックすることで切り替えることが出来ます。

ビジュアルエディタ：

テキストエディタ：

どちらのエディタを使って記事を作成しても記事そのものは1つです。
途中でエディタを切り替えても入力した内容は変わりませんが、使用しているエディタによって表示のされ方が変わります。

④実際にビジュアルエディタで文字を入力した後でテキストエディタに切り替えてみます。まずビジュアルエディタで文字を入力します。

⑤次にテキストエディタのタブをクリックしてエディタを切り替えます。
すると次のようにビジュアルエディタで入力していた内容はそのまま維持されていることが分かります。

このように内容を損なうことなく2つのエディタを切り替えることができますので、
ビジュアルエディタで記事を作成し、テキストエディタに切り替えて一部修正を加えるといったことができます。
　
　

2つのエディタの使い方の違い

　
ビジュアルエディタを使用すると実際にホームページでどのように表示されるのかを確認しながら本文を入力していくことができます。
例えばビジュアルエディタで一部の文字に「太字」を設定すると実際にエディタ上でも太字になって表示されます。
(下記では”テキスト”という文字に対して太字を設定しています)。

それに対してテキストエディタは通常のHTMLページを作成する時と同じようにテキストに対してHTMLタグを記述することで太字などのスタイルを設定していきます。「テキスト」タブをクリックしてテキストエディタに切り替えてみて下さい。

「太字」が設定されている部分をテキストエディタで見るとが記述されています。
このようにテキストエディタではHTMLタグを直接入力して文章を編集します。
(テキストエディタでもツールバー上によく使用するタグが簡単に入力できるように用意されています)。
　
ビジュアルエディタを使う場合にはホームページでどのように表示されるのか確認しながら記事を編集することができますが、
ツールバーに用意されているスタイルしか設定できません。
逆にテキストエディタではより細かいスタイルの設定を記述することができます。
通常はビジュアルエディタをしつつ、必要に応じてテキストエディタに切り替え、詳細な記述を行うといった使い方が便利ではないかと思います。