コラム

コラム

WordPressビジュアルエディタ投稿手順

2014.05.14 | wordpress コラム

記事の投稿画面

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

imgC101

 

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

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

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

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

 

記事タイトル入力方法

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

imgC102

 

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

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

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

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

ツールバー

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

imgC103

imgC104

 

文字の書き方や改行方法

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

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

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

① <p>タグの改行例

ビジュアルエディタ上で、キーボードの「Enter」を押した場合は、
HTMLの<P>タグが挿入されます。

【Pタグの例:(1行開いた感じになります)】
———————————————————
WordPressのビジュアルエディタの使い方の記事です。

ビジュアルエディタの使い方を知らない人は必見です。
———————————————————

② <br />タグの改行例

反対に<br />を挿入する方法ですが、「Enter」+「Shift」を
押すと改行の文字の折り返しが出来ます。

【brタグの例:(詰まった1行になります。)】
———————————————————
WordPressのビジュアルエディタの使い方の記事です。
ビジュアルエディタの使い方を知らない人は必見です。
———————————————————

 

文字の装飾

imgC105

①太字 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を入力してください。

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

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

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

imgC106

『見出し』の設定

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

imgC107

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

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

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

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

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

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

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

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

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

 

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

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

imgC108

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

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

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

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

 

メディアを追加

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

imgC109

最新のエントリー

企業イメージを向上させ、目的を達成するWebサイト制作を

Webサイトをただ作るだけでは意味がありません。適切なブランディングや戦略、ユーザーの立場に立ったデザインやWebソリューション
などを用いて、すべては企業の目的を達成するためにクレビスファクトリーは全力でお客様の協力をいたします。