メニュー

エディタで文字を装飾する方法

WordPressのエディタ機能は非常に優秀で便利。

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

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

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

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

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

文字を装飾する方法

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

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

エディタを開く

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

エディタのツールボックス

使い方は全て同じ。

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

文字装飾方法
(※例は太字)

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

太文字で装飾

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

対処方法としては、

  • 「テキストエディタ」に切り替えて該当部分を削除
  • 該当部分を選択して、「書式設定をクリア」ボタンをクリック
のいずれかで装飾をリセットできます。
 
ボタン 機能 HTML/CSS
20  書式設定をクリア – 装飾情報をクリアします  

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

テツ夫

テツ夫

Digima Pty.Ltd. CEO デジタルマーケティング、WEB集客・販売、コンサルティング、セミナー事業
20年を超えるSEO・コンテンツマーケティング・オンラインセールス・コンテンツビジネス・アフィリエイトマーケティングの経験を活かし、5億円/年のWEB集客や1億円以上のデジタルコンテンツ販売事業を複数立ち上げる。

はじめてのワードプレス。レンタルサーバどこがいいですか?

ってよく聞かれるんですが、ココをオススメしてます。

レンタルサーバとは長い付き合いになります。サイトの引越は知識も技術も必要なのでタイヘン。

なので、できる限り長く使えて安心で、安く使えるレンタルサーバを選ぶコトをオススメします!

 

→ はじめてのレンタルサーバならココ!

もくじ