WordPress記事投稿　ビジュアルエディタの使い方 |WordPressの使い方・インストールガイド

WordPress記事投稿　ビジュアルエディタの使い方

WordPressでもっとも大事な記事投稿方法→ビジュアルエディタの使い方を説明します。

記事タイトル入力

記事タイトル

記事タイトルを入力します。

パーマリンクについては、後で変更可能ですが、URLが変わってしまうためできれば変えたくありません。公開する前にパーマリンクについての確認しておくと良いです。

WordPressダッシュボード使い方『設定』→『パーマリンク』

WordPress パーマリンク SEOのための最強設定法

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

ビジュアルエディタとは、HTMLがわからない人でも文字や装飾の変更が行うことができるツールです。ワードなどのワープロソフト感覚で文章を書くことができます。

ツールバー

これが装飾するためのツールバーです。オレンジの○を押すと2段目が出てきます。

ツールバー2段

文字の書き方

改行の仕方

ビジュアルエディタで改行[Enter]すると1行間隔で間が開きます。
HTMLでは<p>タグが挿入されます。

WordPress 日本語ローカルサイトへようこそ。

WordPressは、オープンソースのブログプラットフォームです。

セマンティック Web、コードやデザインの美しさ、ユーザビリティなどを

意識して開発されており、無料でダウンロードして使うことができます。

通常に改行したい場合は、[Enter]+[Shift]を押すと通常の改行になります。
HTMLでは<br>タグが挿入されます。

WordPress 日本語ローカルサイトへようこそ。
WordPressは、オープンソースのブログプラットフォームです。
セマンティック Web、コードやデザインの美しさ、ユーザビリティなどを
意識して開発されており、無料でダウンロードして使うことができます。

文字の装飾

文字装飾

①太字　HTMLでは<strong>タグが挿入されます。

文字を太字にします。より強い強調タグとして使用しSEO的にもキーワードとして重視されます。

②斜体　HTMLでは<em>タグが挿入されます。

strongよりは弱いですが同じく強調を表します。

③打ち消し線　<span style=”text-decoration: line-through;”>タグが挿入されます。

過去に書いた記事などを修正したい場合に使います。過去の記事はSEO的にも強くなっており消して書き直すより打ち消し線で修正した方が効果的です。

④リスト番号なし　HTMLでは<ul>タグが挿入されます。

番号なしリストです。箇条書きや文字を揃えたい時に使用します。

⑤リスト番号付き　HTMLでは<ol>タグが挿入されます。

番号付きリストです。箇条書きや文字を揃えたい時に使用します。

⑥引用　HTMLでは<blockquote>タグが挿入されます。

他からの引用時やブロック要素の引用を行う場合に用いられます。

⑦配置　HTMLでは<p style=”text-align: left;”>タグが挿入されます。

文字の左寄せ

⑧配置　HTMLでは<p style=”text-align: center;”>タグが挿入されます。

文字の中央寄せ

⑨配置　HTMLでは<p style=”text-align: right;”>タグが挿入されます。

文字の右寄せ

リンクの挿入・解除

リンクの挿入

リンクさせたい文字を範囲指定し上記画像のオレンジ□をクリックし[リンクの挿入/編集]を押します。リンクURLはリンクさせたいアドレス、リンクターゲットは同じウインドウと新しいウインドウが選択できます。カスタムする場合にタイトルとクラスを入力します。

反対にリンク解除させたい場合はオレンジ○を押して解除します。

<!–more–>の挿入

<!–more–>タグを設置することにより、設置した下をを『この続きを読む』というリンクで短縮する事ができます。

moreタグ使用

上記で設置すると

短縮完了

このように『→続きを読む』と表示されクリックすると全文表示します。

スペルチェック

記事中のスペルミスを確認できます。ミスがある場合は、赤線で表示しその部分を右クリックすると候補が出てきます。言語が英語など11ヶ国語対応

フルスクリーン

記事編集画面がブラウザ一杯にに表示されます。

フォーマット『見出し』

見出しや用途に合わせて使用する事によりSEO面でも強くなります。

フォーマット

『段落』　通常の形式

通常の形式、デフォルト状態です。

『アドレス』　HTMLでは<address>タグが挿入されます。

連絡先、メールアドレスなど住所関連を表示する際に使用します。

『整形済み』　HTMLでは<pre>タグが挿入されます。

<pre>タグで囲まれた範囲は改行やスペースがそのまま表示される。

『h1』　HTMLでは<h1>タグが挿入されます。

見出しタグh1は1ページ1つが良い。

『h2』　HTMLでは<h2>タグが挿入されます。

見出しタグh2使いすぎず2~3個程度で構成

『h3』　HTMLでは<h3>タグが挿入されます。

見出しタグh3必要に応じて使用します。

『h4』　HTMLでは<h4>タグが挿入されます。

見出しタグh4必要に応じて使用します。

『h5』　HTMLでは<h5>タグが挿入されます。

見出しタグh5ほとんど使用しませんが予備として

『h6』　HTMLでは<h6>タグが挿入されます。

見出しタグh6ほとんど使用しませんが予備として

文字の装飾2

文字パレット２

①下線　HTMLでは<span style=”text-decoration: underline;”>タグが挿入します。

文字の下に下線を入れます。

②均等割付　HTMLでは<p style=”text-align: justify;”>タグが挿入します。

文字を折り返さないように両端を調整します。

③文字色とパレット　HTMLでは<span style=”color: #ff6600;”>タグが挿入します。

Aが現在の色です。▼を押すと他の色が選べます。

④インデント/解除　HTMLでは<p style=”padding-left: 30px;”>タグが挿入します。

文字下げを行い、文字の配置調整に使います。

特殊文字

絵文字作成や記号時に入力します。

特殊文字

埋め込みメディア挿入/編集

youtubeなどの動画を埋め込むことができます。typeで『Flash』を選択しyoutubeのURLを入力し縦横比を保存にチェックを入れると動画を埋め込むことができます。対応フォーマットはFlash、QuickTime、Shockwave、Windows Media、RealMediaです。『詳細タブで』品質や配置の設定も可能です。