記事の投稿画面

WordPressで記事を書く場合、
ダッシュボードメニューの「投稿」から「新規追加」の順でクリックします。

ビジュアルエディタとテキストエディタの変更方法

ビジュアルエディタとテキストエディタの変更方法です。
投稿記事画面の右上のタブから変更可能です。

エディタの詳しい違いについての説明はこちらで解説しています。
⇒WordPress 投稿のビジュアルエディタとテキストエディタ

テキストエディタの使い方については、随時コラムにて更新いたします。

記事タイトル入力方法

『タイトルを入力してください』と表示されている欄に記事タイトルを入力します。

ビジュアルエディタの使い方

ビジュアルエディタの操作パネルについて説明します。

ビジュアルエディタは、HTML知識が少ない方向けの記事投稿パネルになってます。
無料ブログなどの記事の書き方に似ており、MicroSoftが提供するWordと似たような感覚で記事を書くことが可能です。

HTMLの編集に慣れている方は、ビジュアルエディタで書いて、HTMLエディタで細かい修正をするという流れになりますが、そうでない方はビジュアルエディタのみで投稿いたします。

ツールバー

ビジュアルエディタのツールバーですが、最初は1段で省略されています。
下記のパレットアイコンをクリックすることで2段になります。

文字の書き方や改行方法

WordPressの投稿の改行方法には、2種類あります。

HTMLで段落を現す<p>タグと、改行を現す<br />タグの２つが良いされており、
適切に使い分ける必要があります。

詳細は下記に記述していますが、難しく覚えず、
「Enter」キーを押した場合は、1行開いた感じになり、
「Shift」キーを押しながら「Enter」キーを押すと、詰まった1行になる
と覚えておいてください。

文字の装飾

①太字 HTMLでは<strong>タグが挿入されます。
文字を太字にします。
強調タグとして使用し、SEO的にもキーワードとして重視されます。

②斜体 HTMLでは<em>タグが挿入されます。
文字を斜体にします。
strongよりは弱いですが同じく、SEO的にもキーワードとして重視されます。

③打ち消し線 <span style=”text-decoration: line-through;”>タグが挿入されます。
過去に書いた記事などを修正したい場合に使います。

④リスト番号なし HTMLでは<ul>タグが挿入されます。
番号なしリストです。箇条書きや文字を揃えたい時に使用します。

⑤リスト番号付き HTMLでは<ol>タグが挿入されます。
番号付きリストです。箇条書きや文字を揃えたい時に使用します。

⑥引用 HTMLでは<blockquote>タグが挿入されます。
引用文であることを明示します。
Internet Explorer等の一般的なブラウザでは、<blockquote>～</blockquote>で囲まれた部分は 上下に1行分のスペースが挿入され、左右もインデント（字下げ）され、上下左右にスペースが空きます。

⑦配置左 HTMLでは<p style=”text-align: left;”>タグが挿入されます。
文字列を左寄せにします。

⑧配置中央 HTMLでは<p style=”text-align: center;”>タグが挿入されます。
文字列を中央寄せにします。

⑨配置右 HTMLでは<p style=”text-align: right;”>タグが挿入されます。
文字列を右寄せにします。

リンク挿入とリンク解除

リンクを作る場合ですが、リンクしたいテキストを範囲指定して、「鎖マーク」をクリックします。
リンクの挿入画面が表示されますので、URLを入力してください。

タイトルには、リンクの詳細を書きます。（記述しなくても問題ないです）

「リンクを新ウインドウまたはタグで開く」にチェックを入れると、
リンク先が別ウインドウで開きます。

反対にリンク解除させたい場合は、「鎖が切れたボタン」を押して解除します。

『見出し』の設定

見出しや段落などのタグを挿入することが出来ます。
文章の区切りとして、見出し2や見出し3は、良く利用すると思います。

①『段落』通常の形式です。（デフォルト状態）

②『アドレス』<address>タグです。　連絡先やメールアドレスを表示するタグです。

③『整形済み』<pre>タグで囲まれた範囲は改行やスペースがそのまま表示されます。

④『h1』見出しタグは1ページ１か所です。

⑤『h2』見出しタグは使いすぎず、サブとなる見出し使用。

⑥『h3』見出しタグはh2よりもサブの見出しに使用。

⑦『h4』見出しタグは必要に応じて、h3よりもサブの見出しに使用。

⑧『h5』見出しタグはほとんど使用しませんがh4のサブの見出しとして使用。

⑨『h6』見出しタグはほとんど使用しませんがh5のサブの見出しとして使用。

文字色、下線などの文字装飾

見出しや段落などのタグを挿入することが出来ます。
文章の区切りとして、見出し2や見出し3は、良く利用すると思います。

①下線 HTMLでは<span style=”text-decoration: underline;”>タグが挿入されます。
文字の下に下線を入れます。

②均等割付 HTMLでは<p style=”text-align: justify;”>タグが挿入されます。
文字を折り返さないように両端を調整します。

③文字色とパレット HTMLでは<span style=”color: #ff6600;”>タグが挿入されます。
Aが現在の色です。▼を押すと他の色が選べます。

④インデント/解除 HTMLでは<p style=”padding-left: 30px;”>タグが挿入されます。
文字下げを行い、文字の配置調整に使います。

メディアを追加

画像や動画などメディアを文書の途中に組み込む事ができます。