いつも使うわけではないけど、たまに必要になることがあります。

WordPressへの音声ファイルの埋め込みに最も簡単な方法は、「メディア」の機能を使う方法。

iPhoneやAndroidで録音した手軽な音声からスタジオで収録したキッチリした音声まで、難しい専門知識を必要とすること無く3分あれば音声を埋め込めます。

まず、音声を埋め込むには音声ファイルが必要です。

音声ファイルにもたくさんの形式があるのですが(mp3,WAV,AAC,m4aなど）、「mp3」に変換しおくのがベター。

mp3は最もメジャーな音声ファイル形式なので最も多くの端末や機械でも再生できる可能性が高いのが理由。

ファイル形式を変換するには、media.ioなどのサイトで変換するか、あらかじめmp3形式で保存や書き出しを行うのがカンタンです。

• 音声をWordPressに埋め込む最も簡単な方法
• 音声再生バーはスマホでも聴ける？
• もっと見栄えの良い音声プレイヤーはない？

音声をWordPressに埋め込む最も簡単な方法

「新規投稿」または「投稿の編集」画面を開きます。

音声再生バーを挿入したい場所を選択して、「メディアを追加」ボタンをクリック。

メディアの画面が開くので、「ファイルをアップロード」タブを選択。

埋め込みたいmp3ファイルを画面にドラッグ&ドロップするか「ファイルを選択」をクリックして対象の音声ファイルを選択。

メディアライブラリにファイルをが追加されます。

添付ファイルの詳細にいくつか設定がありますが、「埋め込みまたはリンク」の項目が、「メディアプレイヤーを埋め込み」になっている事を確認して、「投稿に挿入」をクリック。

マウスカーソルがある位置に音声バーが表示されます。

ページを更新すれば、音声が再生できる音声バーがページに埋め込まれます。

音声再生バーはスマホでも聴ける？

WordPressのデフォルト埋め込みは、スマホでも再生できます。

スマホからアクセスした際にはサイズがギュっと縮まって音声再生バーが表示されるようになります。

少し前まではWordPressに音声を埋め込むのがとても大変だったのでプラグインが必要だったのですが、最新版のWordPress ではメディアから直接挿入することに対応しています。

見た目が気に入らないとか、プレイリストなどの機能が必要でない限りはデフォルトの音声埋め込みでほとんどの場合は問題がありません。

もっと見栄えの良い音声プレイヤーはない？

WordPressで使える見栄えの良い音声プレイヤーはたくさんあります。

大きく２つの方法に分かれます。

• プラグインを使う方法
• 外部サービスを使う方法

プラグインを使う方法

プラグインを使う方法もデフォルトのプレイヤー同様シンプルでカンタンです。

WordPressのプラグインディレクトリにも音声プレイヤーはたくさんありますが、個人的にオススメなのはコレ。

ミニマル、シンプルでカッコいいプレイヤーです。

外部サービスを使う方法

こちらは月額課金になりますが（$8程度）コンテンツ系のサイトにマッチするデザインに

• 再生速度
• SNSシェア
• プレイリスト
• ファイルダウンロード

など、音声配信に必要なあらゆる機能が使えます。

Smart Podcast Player

定期的に音声配信を行うコンテンツサイトにはオススメ。

デフォルトプレイヤーだとどうしてもみんなが使っているという「チープ感」（安っぽさ）がでてしまうので、少し高級感や特別感を出したい場合にはオススメです。

投稿 WordPressの投稿に音声を埋め込む方法 は monkeywp.com に最初に表示されました。

コンテンツに動画を入れる方法はいくつもあるのですが、中でも分かりやすく一番簡単な方法はyoutubeの動画を使う方法です。

動画はコンテンツの理解度を格段に高める事ができる要素。

文章だけのコンテンツに比べて動画コンテンツはお客さんの滞在率が伸びる傾向があります。

お客さんの滞在率が延びれば延びるほどコンテンツの信頼度は上がります。

お客さんの興味を惹くだけで無く、

• コンテンツをビジュアルで理解できる
• コンテンツを補足できる

といった動画を挿入することで、コンテンツの価値は高まります。

動画は必ずしも自分で作る必要はありません。

youtubeなどからコンテンツを補強できる動画を探し、組み込むだけでも十分な効果があるので、積極的に動画を埋め込むようにすると良いと思います。

• 動画を埋め込む2つの方法
• 動画をカンタンに埋め込めるサイト一覧

動画を埋め込む2つの方法

画像を埋め込むには2つの方法があります。

• コピペで埋め込めるカンタンな方法
• 画像サイズを指定したい場合に使う方法

どちらもWordPressならではの機能で、動画の埋め込みをカンタンに行えます。

コピペで埋め込めるカンタンな方法

WordPressはURLをコピペするだけでビデオを埋め込めるという特殊な機能が備わっています。

どれだけカンタンかというと、投稿画面のエディタに、

YoutubeのビデオのURLをコピーして、

貼り付けるだけ。

すると、一瞬でビデオが埋め込まれます。

画像サイズを指定したい場合に使う方法

とても便利で簡単な動画埋め込み機能なのですが、一つだけ欠点があります。

それは、細かい設定ができないということです。

例えば「動画サイズ」。

普通に使うのであればほとんど問題はありませんが、特殊な事情やレイアウトが崩れてしまう関係で動画サイズを調整したいと思うことが出てくる事もあります。

そんなときには上のコピペ動画埋め込みを使う事ができません。

そのような場合には、「ショートコード」を使います。

ショートコードの細かい説明は後からしていきますが、簡単に言えば、 []（括弧）で囲むことで様々機能を実行できるWordPressの機能という感じです。

動画の場合は、

のように、

1. カッコとカッコの間にyoutube動画をコピペして
2. 横幅の数値（width）と縦幅の数値(height）を設定

することで埋め込み動画のサイズを変更することができます。

• 横幅だけ指定(width=”200″)
• 縦幅だけ指定(height=”100″）

でも設定が可能です。

動画をカンタンに埋め込めるサイト一覧

WordPressに動画をカンタンに埋め込めるサイトで日本に馴染みがあるのは

• Youtube
• Vimeo

の2つです。

ですので、特殊な事情がない限りはビデオはYoutubeを使うのがカンタンです。

WordPressがURLだけで動画を埋め込める理由

少しだけ技術的な話をすると、WordPressではメディアの埋め込みに「oEmbed」という仕組みを使う事ができるので、URLだけでメディアをカンタンに埋め込む事ができるのです。→ oEmbed（WordPress公式）

eEmbedとは複雑な埋め込みコードであるHTMLを、メディアサイトから自動的に取得できるプロトコル。

カンタンにいえば、URLをコピペするとあなたのサイトがYoutubeに埋め込みコードを問い合わせて勝手にHTMLを埋め込んでくれるというわけです。

かなり便利です。

とはいえ、どんなサイトからでもあなたのサイトにHTMLコードを埋め込めてしまっては困るので、WordPressでは信頼できるサイトをホワイトリスト（安全なサイト）として、限定的にこの機能を提供しているという仕組みです。

日本で馴染みあるサービスでは、Youtubeの他にもFlickr、Instagram、Twitterなどがホワイトリストに入っているのでこの機能を使うことができます。 → 埋め込み機能が使えるホワイトサイトリスト

埋め込み可能なメディアサイト一覧

oEmbed（URLで埋め込み）が可能なホワイトリストサイト一覧はこちらです。

（→ 公式WP Codex）

投稿 WordPressの投稿に動画を埋め込む方法 は monkeywp.com に最初に表示されました。

いくつか方法はありますが、最も簡単な方法を一つ覚えておくだけで問題ありません。

画像は見栄えが良くなるだけでなくコンテンツを理解し易くし、コンテンツの価値を上げます。

少しの手間で大幅にコンテンツの質を上げられるので、積極的に画像を使う事をオススメします。

• 投稿に画像を挿入する方法
• コンテンツマーケティングにおける、画像の役割とは？

投稿に画像を挿入する方法

画像はエディタから挿入します。

新規投稿、または編集からエディタを開きます。

メディアの追加を押すと、画像を追加/選択する画面が開きます。

メディア追加画面では、

• ドラッグドロップで画像を追加
• ファイルを選択をクリックして、ファイルをアップロード

のいずれかの方法で画像を追加できます。

ファイルを追加すると、「メディアライブラリ」が開きます。

メディアライブラリにはアップロードしたファイル（画像、動画など全て）一覧が表示されています。

右サイドがメディアの詳細。

添付ファイルの表示設定で、

• 画像を配置する場所（左寄せ、中央、右寄せ）
• リンクの有無
• サイズ

を選択します。

画像の配置

配置とは画像を挿入する場所。

左寄せ、右寄せはテキストが回り込みます。

リンク先

リンク先は画像をクリックしたときの動作。

画像を拡大表示で開いたり、クリック次に別のURLを開く設定をする事ができます。

リンクなしという設定も可能です。

サイズ

サイズは画像の大きさ。

どれくらいの大きさで画像を表示させるかを選択できます。

デフォルトでは、

• 横最大150px（ピクセル）
• 横最大300px
• 原寸大

の3つのオプションから選択できます。

「投稿に挿入」ボタンをクリックすると、指定したメディアをエディタに挿入できます。

一度使用した画像は、メディアライブラリから選択することで何度でも使う事ができます。

コンテンツマーケティングにおける、画像の役割とは

コンテンツマーケティングでは、画像に3つの役目があります。

• 内容をイメージさせ、理解を助ける
• 内容を補足するし、理解を助ける
• 目休めとして置き、読みやすくする

ポイントは、意味の無い画像を使わない事。

それぞれの画像の使い方にちゃんと意味があります。

コンテンツマーケティングの絶対法則は、

理解できる＝良いコンテンツ

「百聞は一見にしかず」といわれますが、文章で一つのコンセプトを表現し、伝えるのは大変。

画像をポンと一枚見せるだけですんなり理解してもらえるのはなんとなく理解してもらえると思います。

コンテンツを作っていると、ついつい文章の方が楽になってしまうので画像をサボってしまうもの。

ほんの一手間がコンテンツの価値を何十倍にもすることがあるのを忘れないで欲しいと思います。

投稿 投稿に画像を挿入する方法 は monkeywp.com に最初に表示されました。

専門知識無しで文字をカンタンに装飾することができます。

• 見出し
• 箇条書きリスト
• 太字
• 文字色

通常であれば難しいHTML言語が必要な文字装飾がボタン一つで作れます。

あまりにもカンタンなのでゴテゴテと文字を装飾してしまいがちなのですが、装飾はあくまで脇役。

最小限のポイントを強調する程度にとどめて、あくまでコンテンツを中心にバランスを取ることをオススメします。

• 文字を装飾する方法
• コンテンツサイトに必要な文字装飾とは？
• 意図しない装飾で困ったときは？

文字を装飾する方法

文字装飾は「新規投稿」または既存コンテンツの「編集」から行います。

ビジュアルエディタ、テキストエディタどちらでも文字装飾は可能ですが、ビジュアルエディタの方が見やすく分かりやすいのでオススメです。

エディタの本入力ボックスの上部にあるのが「ツールバー」。 テキストをワンタッチで様々な形に装飾することができるボタンの集まりです。

使い方は全て同じ。

1. 装飾したい文字列を選択して反転表示
2. ツールバーのボタンをクリックして適用

（※例は太字）

指定した場所に、装飾が反映されます。

ツールバーの装飾ボタンの種類

ボタン	機能	HTMl/CSS
	太文字 – 文字を強調文字にします	<strong>
	斜体 – 文字を斜体にします	<em>
	打ち消し線 – 文字に打ち消し線を入れます	<del>
	箇条書き（リスト） – 箇条書きリストを作ります	<ul><li>
	箇条書き（番号） – 番号付きの箇条書きリストを作ります	<ol><li>
	引用 – 引用マークを付けます	<blockquote>
	横ライン – 横いっぱいの区切り線を引きます	<hr />
	左寄せ – 文章を左寄せにします	text-align:left
	中央寄せ – 文章を中央寄せにします	text-align:centr
	右寄せ – 文章を右寄せにします	text-align:right
	リンク – テキストにリンクを入れます	<a>
	リンクを消去 – リンクを消去します
	「続きを読む」を挿入 – 「moreタグ」を挿入します	<!—more—>
	ツールバーの切り替え – ツールバーの表示を切り替えます
	見出し – 文章を見出しに変えます	<h1>-<h6>
	下線 – 文字に下線を引きます	text-decoration:underline
	両端揃え – 文字の両端を揃えます（日本語ではうまく機能しない事が多い）	text-ailgn:justify
	文字色 – 文字の色を変更します	color:#
	テキストとしてペースト – コピーした際に付随している文字装飾情報を破棄して貼り付けます
	書式設定をクリア – 装飾情報をクリアします
	特殊文字 – 特殊文字を挿入する際に使います
	インデントを減らす – 左側の余白を減らします	padding-left
	インデントを増やす – 左側の余白を増やします	padding-left
	取り消し – 直前に行った動作を取り消します
	やり直し – 取り消した動作を元に戻します

コンテンツサイトに必要な文字装飾とは？

たくさんの装飾ボタンがありますが、全てを使う必要はありません。

コンテンツマーケティングに使うテキスト装飾は限られています。

以下の12個の装飾を覚えておくだけで、9割以上はカバーできます。

また、★が3つ以上の装飾で8割以上をカバーできます。

ボタン	機能	使用頻度
	太文字 – 文字を強調文字にします	★★★★☆
	箇条書き（リスト） – 箇条書きリストを作ります(ul li)	★★★★☆
	箇条書き（番号） – 番号付きの箇条書きリストを作ります(ol li)	★★★☆☆
	引用 – 引用マークを付けます(blockquote)	★☆☆☆☆
	中央寄せ – 文章を中央寄せにします(text-align:centr;)	★★☆☆☆
	リンク – テキストにリンクを入れます(a)	★★★☆☆
	リンクを消去 – リンクを消去します	★☆☆☆☆
	「続きを読む」を挿入 – 「moreタグ」を挿入します(–more–)	★★☆☆☆
	見出し – 文章を見出しに変えます(h1-h6)	★★★★☆
	下線 – 文字に下線を引きます(text-decoration:underline;)	★☆☆☆☆
	文字色 – 文字の色を変更します(color)	★☆☆☆☆
	テキストとしてペースト – コピーした際に付随している文字装飾情報を破棄して貼り付けます	★☆☆☆☆

コンテンツサイトでは派手な装飾は必要ありません。

• シンプル
• 読みやすい
• ポイントだけを強調

に注意しておくと、玄人っぽいサイトになります。

逆に、バランスの悪い装飾をゴテゴテ付けてしまうと、素人っぽさが出てしまってコンテンツの価値を下げてしまいます。

意図しない装飾で困ったときは？

コンテンツの編集を繰り返していると、まれに思い通りの装飾ができなくなることがあります。

HTMLタグが重複したり入れ子になってしまって、エディタが装飾を正しく認識できなくなっているのが原因です。

対処方法としては、

• 「テキストエディタ」に切り替えて該当部分を削除
• 該当部分を選択して、「書式設定をクリア」ボタンをクリック

ボタン	機能	HTML/CSS
	書式設定をクリア – 装飾情報をクリアします

「テキストエディタ」ではHTMLソースコードを間違って消してしまうことがあるので、
まずは、「書式設定をクリア」を試してみることをオススメします。

投稿 エディタで文字を装飾する方法 は monkeywp.com に最初に表示されました。

• テキストをクリックすると別のページに飛ぶリンク
• 画像をクリックすると別のページに飛ぶリンク

それぞれ見た目は違いますが、機能も作り方も同じです。

また、WordPressにはリンクを張るための便利な機能もあるので覚えておくと生産性が上がります。

かなりの時間を短縮できるようになります。

• リンクの設定方法
• リンクを設定するメリット
• リンクを張る頻度と付け方

リンクの設定方法

リンクの設定は、エディタから行います。

ですので、

• 新規投稿
• 投稿の編集

いずれかの画面でエディタを開きます。

テキストと画像、いずれもリンクの設定方法は同じです。

テキスト、または画像を挿入後、リンクを張りたい範囲（画像）を選択します。

選択された状態のまま、上部のツールバーにある「リンクボタン」をクリックします。

すると、リンクの設定をおこなうダイアログボックスが表示されます。

項目がいくつか出てきますが、カンタンなので一つずつ説明していきます。

URL

URLはリンクをクリックしたときに開くページのURL。 外部サイト（自分のドメイン外のサイト）に飛ぶときには、ココに設定をします。

もちろん、内部リンク（自分のサイトのコンテンツページ）もURLを設定できますが、「既存のコンテンツ〜」の機能を使う方がカンタンです。

内部リンクの場合にはそちらからリンク設定をします。

リンク文字列

範囲選択した文字がそのまま、この項目に入ります。

なにも変更は必要ありません。

リンクを新ウィンドウまたはタブで開く

リンクをクリックした際に、現在のページが切り替わるのでは無く、新しいページでリンク先を開く設定です。

集客サイトを作る範囲内では、

• 外部サイト → 新ウィンドウにチェック
• 内部リンク → そのまま

でOKです。

または既存のコンテンツにリンク

既存のコンテンツページにリンクを張るのに、とてもパワフルな機能です。

内部リンクを作るのに、現段階でこれ以上便利な方法は無いと思っています。

▼（下三角形）の小さな矢印をクリックすると、過去に作成したコンテンツページ一覧が表示されます。

一覧は新しい順にコンテンツのタイトルが並んでいます。

内部リンクを張りたいコンテンツを選択し「リンクを追加」をクリックするとリンクが完了します。

リンクを設定するメリット

リンクは積極的に張ってください。 お客さんにとって有益な情報、あなたのコンテンツの情報を補足/サポートする情報や、ソースとなる情報。

googleは「関連性のある情報のリンク」を評価する

と覚えて置いて欲しいと思います。

あなたが本を出版することを想像してみてもらえると分かりやすいと思います。

ただ、あなたの考えだけを書き連ねた自己満100%の本よりも、他の人の意見や裏付け、証明や考察などがモリモリの本の方がお客さんからみた価値は高いと思います。

googleの順位評価システムも同じで、関連性の高い情報とたくさん紐付いている情報を価値が高いと評価する傾向があるのです。

リンクを張る頻度と付け方

「リンクがgoogleにとって高評価なら、どんどん付けちゃおう！」

と考えてしまうのですが、あまり付けすぎても意味がありません。

リンクには適度なバランスが必要です。

専門書や専門家の間では

「1ページに○個」
「ページ内に○%」

といった指標を作っていますが、あまり意味はありません。

正解は、お客さんが「ギモン」に思う部分を補足するということ。

• えー、これホントなの？
• あなたの勝手な思い込みじゃないの？
• もう少し別の角度からも補足したほうが良いかな
• 前提条件として、この情報は知っておく方がいいかな

対人のコミュニケーションで、相手の反応を見ながら会話の流れを変えるのと全く同じです。

お客さんの状況ごとに考える事は違うと思います。

それでも、あらかじめ先回りするコミュニケーションを考えたときに、どこにどんなコンテンツをリンクすれば良いかは自動的に見えてきます。

投稿 リンクを設定する方法 は monkeywp.com に最初に表示されました。

「行と行の間隔が広すぎて、読みにくい」 「行間をもっと狭くできないの？」

実際に使って見ると、そう感じることが出てくると思います。

実は、WordPressには2つの改行方法があって、それぞれを使い分ける必要があります。

結論だけ言ってしまえば、

• Enter（Return）→ 大きな改行
• Shift＋Enter → 小さな改行

になります。

私達は、

改行=Enter（Return）と覚えていると思いますので、WordPressでは「大きな改行」になってしまいます。

その理由と仕組みが分かると、カンタンに使い分けができるようになります。

• なぜ2種類の改行があるのか？
• どちらの改行を使うべきか？
• <p>タグと<br />タグの使い分け方とは？

なぜ2種類の改行があるのか？

WordPressには、2種類の改行があります。

私達が「改行」というと、こんな改行を想像すると思います。

なのですが、実際にエディタで「Enter（Return）」キーを押すと、大きな改行になってしまいまうので、戸惑ってしまいます。

見た目には小さな改行と大きな改行に見えるので、改行の大小だと思ってしまうのですが、

WordPressでは

• 小さな方を「改行」
• 大きな方を「段落」

として明確に区別をしています。

ですので、私達が改行を使用と思って押している「Enter（Return）キー」は、WordPress的には「段落変更」になっているのです。

ですので、通常の改行をしたいときには、

「Shift＋Enter（Return）」

を押す必要があります。

PタグとBRタグ

WordPressの内部的な話を少しだけすると、

改行をBRタグ（
）、 段落をPタグ（

）といいます。

ソースコードはこのようになっています。

Enter（Return）は、

「Pタグで囲みなさい！」

という指示になるので、
<p>タグで新しい段落を作ります。
 

Shift＋Enter（Return）は、

「BRタグを挿入しなさい！」

という指示になるので、
<br />タグを挿入して、改行を入れます。

どちらの改行を使うべきか？

• 大きな改行
• 小さな改行 と考えると分かりやすいので、どうしても見た目の感じで改行の大きさで考えてしまいがちです。

どちらの改行を使うべきかは、「見た目」ではなく、「構造」によって使い分けをしましょう。

構造とは「改行」なのか「段落」なのかを明確にするということ。

改行と段落は、HTML言語で明確に使い分けられているので、それに合わせる必要があります。

改行と段落の使い分けは上位表示に関係する？

改行と段落をちゃんと使い分けると、検索エンジンがコンテンツを分析/理解し易くなります。

その結果コンテンツの価値を高く評価してもらえるようになり、検索結果に影響を及ぼします。

「そんなことまで関係あるの！？」

と思うかもしれませんが、そこまで考えておく方が間違いが無いことは確かです。

今はまだ影響も小さく、あまり順位にも関係性が薄いかもしれませんが、検索エンジンは驚くほど早いスピードで進化しています。

文章として改行が必要な場合には「改行」
話が変わるなど、段落が必要な婆には「段落」

私達は長期的にコンテンツを作り、集客サイトを組み立てていきます。

検索エンジンとも健全な関係性を保つために、正しい使い方をしておいて損は無いと思います。

<p>タグと<br />タグの使い分け方とは？

WordPressのビジュアルエディタは、私達が入力した文章を自動的にHTMLに変換してくれる便利な機能。

見た目では改行の大小なのですが、WordPressの内部的には、

• 小さな改行は<br />タグ = 改行
• 大きな改行は<p>タグ = 段落（パラグラフ）

として自動変換されています。

ただし、私達が通常ビジュアルエディタでコンテンツを作ったり、編集したりするときにはこれらのタグを意識する必要はありません。

• 改行 = Shift + Enter(Return)
• 段落変更 = Enter(Return)

と覚えておくだけで問題ありません。

ただ、内部的にタグを使い分けているんだな。

と知っておくと、改行の大きさがコントロールできなくてストレスになる事が無くなります。

投稿 WordPressエディタの改行方法 – 2種類の改行の使い分け は monkeywp.com に最初に表示されました。

• ビジュアルエディタ
• テキストエディタ

ビジュアルエディタとテキストエディタの違いは、HTMlを書くか、書かないかの違い。

ビジュアルエディタは文章や装飾を自動的にHTMLに変換するモード。

それに対してテキストエディタはHTMlを直接編集するモードです。

同じエディタの中で2種類のモードを切り替える事ができます。

どちらもエディタでも同じようにウェブページを作る事ができますが、それぞれに特徴があります。

ビジュアルエディタとはワープロソフトのようにページを作ることができる便利なモード。

テキストエディタとはHTMLエディタの事で、HTMLを直接操作できるモードです。

• エディタの切り替え方法
• ビジュアルエディタのメリットと使い方
• テキストエディタのメリットと使い方

エディタの切り替え方法

管理画面から投稿の新規作成、または編集画面を開きます。

デフォルトで表示されるのは「ビジュアル」エディタです。

つまり、ワープロソフトのように文章を打ち込むだけでウェブページを作る事ができる状態になっています。

文字を選択後にツールバーの装飾ボタンを押すと、変更が視覚的に反映されます。

テキストエディタに変更するには、右上にあるタブの「テキスト」をクリックします。

すると、見出しや箇条書きの代わりに、HTMLが表示されて直接編集ができるようになります。

そして、ツールバーも視覚的なボタンから、HTMLコードを表すボタンに変化します。

ビジュアルモードとテキストモード、2つのモードはどちらに切り替えても同じページを編集します。

ビジュアルエディタのメリットと使い方

ビジュアルエディタを使えばカンタンにウェブページを作成することができます。

1. テキストを打つ
2. 文字装飾をする
3. 公開する

だけで、

ページを作成することができます。

エディタに打ち込んだ文字はWordPressが自動的にHTML言語に変換をしてくれます。

ビジュアルエディタでの文字装飾は

1. 変更した文字を範囲選択
2. ボタンを押して適用

の2ステップ。

たくさんある装飾ボタンですが、実際にコンテンツサイト（コンテンツマーケティング）でよく使うのは6つ程度。

これら6つの装飾ボタンが、文字装飾の9割以上の使用頻度になります。

テキストエディタのメリットと使い方

テキストエディタはHTMLを直接編集できるので、HTMLが分かる人には便利な機能。

ビジュアルとテキストエディタを頻繁に行き来しながらコンテンツを編集することになると思います。

HTMLが直接編集できるため、ビジュアルエディタではできない事ができるというメリットがあります。

例えば、コンテンツマーケティングサイトの目次に使うページ内リンク。

あとはアドセンスや広告などのコードを直接貼り付ける必要がある場合など。

逆に、HTMLがあまり良く分からない人はほとんど使う機会はありません。

ビジュアルエディタではできない「何か」が出てきた時にテキストエディタが必要になる程度に覚えておけば良いかと思います。

テキストエディタでHTMLを使うには、何も特別な操作は必要ありません。

直接HTMLコードを書き込みます。

すると、ビジュアルエディタにも反映されます。

投稿 ビジュアルエディタとテキストエディタの違い は monkeywp.com に最初に表示されました。

エディタがあるからこそ、私達は難しい専門知識がなくてもワープロソフトを使う感覚でウェブページが作れるんです。

キーボードを叩くだけでページを作れるのでとても便利。

とはいえ、エディタにはたくさんの機能があります。

私達が普段ウェブサイトを見ているとおり、文字や文章にも様々な装飾や機能があります。

新聞や雑誌と違い、ウェブサイトでは私達が比較的簡単に文字を装飾できます。

• リンク文字
• 文字装飾（サイズ、フォント、色）
• 改行幅や文字幅
• メディアの挿入（画像、動画、音声）

本来であればHTMLやCSSといった高度な知識やスキルが無いとできないようなことを、エディタを使う事で簡単に実現できてしまいます。

• エディタとは何か？
  • 2種類の編集モード
  • ビジュアルモードとは
  • テキストモードとは
• エディタを使うメリット
• エディタの使い方
• エディタの注意点

エディタとは何か？

エディタとは私達がWordPressでページを作るための心臓部。

ワープロ感覚でページを作っていくことができるようになっています。

文章をそのまま打ち込むだけで、ページを作る事ができます。

• テキスト
• テキストを装飾（サイズ、色など）
• リンクの追加
• メディアの挿入（画像、動画、音声）

などをここから全て行う事ができます。

入力したテキストや装飾は、ウェブページを作るために必要なHTML言語に自動的に変換されていきます。

通常は意識する必要はありませんが、編集モードを切り替える事で変換されたHTMLを直接編集することもできます。

2種類の編集モード

WordPressのエディタには2種類の編集モードがあります。

• ビジュアル
• テキスト

「ビジュアル」はワープロソフトのように編集できるモード

ビジュアルは「みたまま」という意味。

WordやPagesで文書を作るように文章をレイアウト/装飾することができます。

「テキスト」はHTMLを直接編集できるモード

テキストは「HTML」を直接編集できるモード。

テキストモードから自動的に変換されたHTMLを見ることができます。

普段はあまり使う事がありませんが、

• ビジュアルで崩れてしまったレイアウトが直らない
• ビジュアルで装飾などを消すことができない
• 直接HTMLソースコードを入力する必要がある

といった場合に使用します。

エディタを使うメリット

WordPressを使う最も大きなメリットの一つがエディタです。

なぜなら、エディタが無ければ私達が作るコンテンツは全てHTML言語で書く必要があるからです。

専門知識とスキルが必要なHTMLやCSSを知らなくても、簡単にウェブページが作れてしまうのは私達にとってとても大きなメリット。

そのおかけで、非技術者であっても価値のあるコンテンツをお客さんに提供していくことができるからです。

WordPressでHTMLやCSSの技術を全て使って何でもできるわけではありません。

できない事もまだまだたくさんありますが、少なくとも私達が専門知識ナシで集客サイトを作り上げていく十分なプラットホームであることは間違いありません。

エディタの使い方

エディタには「ビジュアル」と「テキスト」の2種類があります。

基本的なエディタの使い方としては、「ビジュアル」を使い、以下の流れでコンテンツを作成します。

• コンテンツを書く
• 編集する
• 文字装飾をする
• メディアを挿入する

コンテンツを作成したら、右側にある「公開」ボタンを押せばコンテンツが公開されます。

エディタの注意点

装飾を重ねたり（太字+色変更+サイズ変更など）、文章の追加削除を繰り返していると稀に「おかしな現象」が起こることがあります。

• 消えなくなったり
• 意図しないレイアウト

そのような場合には、「テキスト」モードに変更して、該当箇所のHTMLタグを一旦全て消去してから、もう一度ビジュアルモードで編集をしてください。

HTMlが不正な形式になっている事で、思い通りの装飾にならなかったり意図しない表示になる事があります。

投稿 WordPressのエディタの概要と使い方 は monkeywp.com に最初に表示されました。