【記事を書く】テキストの装飾やリンクを作成するツールバーの使い方

2016/04/08

【記事を書く】テキストの装飾やリンクを作成するツールバーの使い方

ワードプレスでブログ

ブログ記事を書くには「文章で伝える力」や「SEO対策」が必要なんだな…とわかった、たのちん管理人なむ。

しかしその前にもっと基本的な、WordPressのブログ記事を簡単に装飾できる便利なツールバーの使い方についてまとめます。

 

スポンサーリンク

ado

 

ビジュアルエディタのツールバー使って記事を書く

WordPressのビジュアルエディタには、直観的に記事を書きやすいように書式の設定やテキストの加工がしやすいツールバーが標準装備されています。

t1

しかし標準のツールバーでは、動画や表の挿入・フォントサイズの変更など、できないことが多少あるためツールバーの機能を拡張するためにたのちんでは「TinyMCE Advanced」というプラグインを導入しています。

そのため、標準のツールバーにはない機能の説明があることと、マークの配置が違いますがご了承ください。

t2

 

1.テキストの書式の設定方法

文字の装飾をしてみましょう。

テキストの書式が替えられるのは、以下のアイコンです。

t3

書式の変更をするテキストを選択して、装飾するためのアイコンをクリックします。

 icon-hand-o-up まずは太字にしてみます。

t4

  続いて、斜体。

t5

  下線を引くこともできます。

t6

  取り消し線を入れることもできます。

t7

  テキストの色を変えたり、

t8

  背景に色をつけたりもできます。

t9

  文字の大きさが変えられます。

t10

  完成品はこんな感じです。

このようにテキストの装飾ができました。

t11

このようにツールバーを使って文字の装飾が簡単にできます。

おつかれさまでした(*´ω`)

 

2.文章の見た目を変える方法

文章の見た目を変えて、読者にわかりやすく表記することもできます。

リストを作る

番号なしと番号ありの2種類のリストが作れます。

t12

  リスト化する文章を選択して「番号なしリスト」をクリックすると、箇条書きのリストになります。

t13

  「番号付きリスト」をクリックすると、ナンバリングされたリストになります。

t14

文章の配置を変える

文章を「左寄せ」「中央揃え」「右揃え」にすることができます。

  通常は「左寄せ」です。

t15

  文章にカーソルを合わせて「中央揃え」をクリックすると、真ん中寄せになります。

t16

  同様に「右寄せ」にもできます。

t17

インデントを設定する

文章の一部に段差をつけて他の部分と差別化したいときは、インデントを増減させます。

t18

文章を選択して「インデントを増やす」と、文章に段差がつきます。

  下の画像はインデントを2段階増やしています。

t19

増やしすぎたインデントは減らすこともできます。

  1段階減らしてみるとこんな感じになります。

t20

引用をする

ブログを書いていると、他のサイトやブログに記載のある文章などを引用したくなることがあります。

勝手に文章をコピー&ペーストすることはルール違反です。
自分の書いた文章でないものは、引用とわかるように表記しなくてはいけません。

t21

  引用部分を選択して「引用」ボタンをクリックすると、引用文だとわかるように表記されます。

t22

これで文章の装飾はある程度できるようになりました。

おつかれさまでした(*´ω`)

 

3.テキストにリンクを貼る方法

記事中のテキストに、外部のサイトや同じブログ内の他の記事へのリンクを貼ることができます。

まずは、テキストにリンクを貼ってみましょう。
リンクを貼ったり解除したりするアイコンは以下のふたつです。

t23

まずは、ブログ内の別の記事にリンクを貼ってみましょう。

内部リンクの貼り方

リンクを貼りたいテキストを選択して、「リンクの挿入/編集」ボタンをクリックします。

t24

ブログ内の記事は、タイトルで検索できます。

今回はなむの自己紹介ページへリンクを貼りますので、「なむについて」で検索をします。

検索で出てきた記事をクリックすると、そのページのURLが自動的に「リンク先URL」欄に入るので、入力されたら「リンク追加」ボタンをクリックします。

t25

投稿画面に戻ると、テキストにリンクが挿入されています。

t26

続いて、たのちん(自分のブログ)以外のサイトにリンクを貼ってみましょう。

外部リンクの貼り方

リンクを貼りたいテキストを選択して、「リンクの挿入/編集」ボタンをクリックします。

t27

試しに、「Yahoo!JAPAN」のトップページにリンクを貼ってみます。

ヤフーのURLを「リンク先URL」欄にコピペして、「リンク追加」ボタンをクリックします。

t28

テキストにリンクが挿入されました。

t29

投稿を保存して、記事を見てみましょう。

リンクがきちんと貼れているかどうか、実際にクリックして確かめてみましょう。

t30

もしリンク先に飛べなかったり間違っていたら、修正をします。

リンクの編集と削除の方法

投稿画面に戻って、リンクが貼ってあるテキストをクリックしてみましょう。

リンクの編集ボタンが出ますので、どちらかをクリックします。

t31

編集画面が出ますので、リンク先のURLを修正して更新しましょう。

t32

リンク切れなどを放置すると、ブログを読む人にとてもストレスになります。

Broken Link Checker」などリンクエラーをチェックするプラグインを使ってこまめに確認しましょう。

繋ぎ直せる場合はURLの修正をすればいいですが、リンク先がなくなってしまった場合は解除した方がいいと思います。

リンクが貼ってあるテキストを選んで「リンクの削除」ボタンをクリックするとリンクを解除することができます。

t33

リンクは、テキストだけではなくて画像にも貼ることができます。

画像にリンクを貼る方法は、以下で確認できます。

*【記事を書く】ブログ記事に写真やイラストを挿入する方法

見やすい記事を書いていきましょう。

おつかれさまでした(*´ω`)

 

NEXT

*【記事を書く】内容をわかりやすく整理する見出しタグの使い方

 

-ワードプレスの使い方
-,