はぴまむ

子育て中もハッピーに日々を過ごしたい主婦がお仕事のことや役に立った情報などをつづっています。

初心者でも簡単!WordPressの使い方ー記事を見やすくするー

time 2015/06/23

前回の初心者でも簡単!Wordpressの使い方ー記事を投稿するーでは基本的な記事の投稿方法を説明しました。
今回はより見やすい記事にするべく、記事を装飾する方法を紹介します。

強調するところは強調し、適度な段落をつけることで読みやすく。

読む人の立場で読みやすさを追求することにより、伝えたいことをしっかり伝えることができるようになります。

今回もビジュアルエディタ機能を快適に使用するためのTinyMCE Advancedというプラグインをいれた状態で説明しています。
TinyMCE Advancedプラグインがまだはいってない!という方はWordPress初心者にオススメなプラグイン3選ーはぴまむ編ーをご覧ください。

sponsored link

記事本文の文字に装飾をしてみよう

ではビジュアルエディタでよく使う機能をご紹介します。
wordpress-write06

  1. 見出し2
    段落というボタンを押すと、メニュータブが開きます。
    この中には見出し用のタグが入っているので、タイトルやサブタイトルの時に使用します。
    見出し1は大見出しなので1つの記事内に1つで、すでにタイトルで使用されているため本文中には使用しません。
    本文中で一番大きくインパクトのあるものが見出し2です。
  2. 見出し3
    見出し2のタイトルよりも少し控えめなのが見出し3です。
  3. 見出し4
    見出し3よりも目立たない感じなります。
  4. 太字
    本文中で少し目立たせたりするために太字にすることができます。
  5. 文字カラー変更
    文字をカラーを変えて目を引くときに使います。
  6. 文字の左寄せ
    文字を左に寄せます。
    同様に、隣接するボタンで中央寄せなどもできます。
  7. 引用文
    文字を線で囲って引用したことをわかりやすく見せます。

ビジュアルエディタでは見出しタグを使用しても、文字が少し大きくなったかな?というくらいの変化ですが、実際のサイトではサイトのテーマに記述されているCSSが反映されて見栄えがぜんぜん変わります。

wordpress-write07

上の画像は初心者におすすめの無料テーマBizvektorを使用したときの表示です。
テーマのCSSによってこれだけ変わります。

 

wordpress-write08

文字装飾の方法は、上の画像のように装飾したい部分をドラッグして変更したい装飾メニューを選ぶだけ。
簡単に文字に装飾することが可能です。

記事本文の文字をリスト表示にしてみよう

次は記事本文の箇条書きにしたい部分をリスト表示にしてみましょう。

wordpress-write09

文字の装飾の時と同じように、リスト表示したい部分をドラッグで選んで、赤で囲ったリストタグアイコンをクリックします。
リストタグアイコンは横の三角部分を押すことで種類を選ぶメニュータブが開きます。
番号なしリストの種類は

  1. デフォルト
  2. 白丸
  3. 黒丸
  4. 四角

の4種類から選べ、番号つきリストの種類は

  1. デフォルト
  2. ラテン文字小文字
  3. ギリシャ文字小文字
  4. ローマ数字小文字
  5. ラテン文字大文字
  6. ローマ数字大文字

の6種類から選べます。

記事本文にリンクを挿入してみよう

次は記事本文のリンクを挿入してみましょう。

wordpress-write10

リンクにしたい文字をドラッグで選び、リンクの挿入/編集ボタンを押します

wordpress-write11

すると、リンクを挿入するための詳細を設定する画面が出てきます。

URLの部分に飛ばしたいページのURLをいれてリンクを追加ボタンを押せばリンクの挿入ができます。

リンクを開く時に、別のウィンドウやタブで開かせたい場合はチェックボタンにチェックをいれてください。
同じウィンドウでリンクを開かせる場合はチェックをはずしましょう。

wordpress-write12

これで記事本文にリンクを挿入することができました。

解除したい場合は解除したい部分をドラッグで選択しながら、リンクを挿入するボタン横にあるリンクの解除ボタンを押します。

記事本文に画像を挿入してみよう

画像を挿入してより見やすい記事にしてみましょう。

wordpress-write13

メディアを追加ボタンを押すと、画像をアップロードしたり挿入する画像を選べる画面が出てきます。

wordpress-write14

アップロードしたい画像をこの画面上にドラッグ&ドロップすると、画像がアップロードされます。

wordpress-write15

アップロードするとタブがメディアライブラリに切り替わり、先ほどアップロードした画像が選択された状態になっているので、そのまま投稿に挿入ボタンをクリックすると挿入完了です。

wordpress-write17

すでにアップロードしている画像から選ぶ場合は、メディアライブラリで画像のサムネイルをクリックして選択し、投稿に挿入ボタンをクリックすれば挿入できます。

画像の表示方法を変更してみよう

wordpress-write16
メディアライブラリで右の詳細設定部分をスクロールすると、一番下に添付ファイルの表示設定を変更する箇所があります。

画像の配置は 左、中央、右、なし から、画像サイズは サムネイル、中、大、フルサイズ から選べるのでお好きなものを選んで投稿に挿入ボタンを押しましょう。

画像サイズの選択肢は選択した画像の大きさによって多少選べる選択肢が変わります。

これを使いこなせば、記事中のお好きな位置にお好きな大きさで画像を配置することができます。

記事を見やすくする まとめ

以上の文字装飾、画像挿入を使うと、ただ書いていただけの文章もよりいっそう見やすくなったと思います。

ただ、装飾などの多用は逆効果です。
ごちゃごちゃしすぎると読み手は疲れてしまいます。

何事もほどほどが一番、ですね。

読みやすくわかりやすい記事はリピーターにもつながります。
ぜひ公開ボタンを押す前に、一度プレビューを使って自分の記事を通しで確認してみてください。

sponsored link

down

コメントする




sponsored link

はぴまむの中の人

ゆいくり

ゆいくり

30代の子育て中主婦。在宅勤務OK!という理解ある会社に拾っていただき、そこで働きながらフリーランスとしても活動中。webサイト製作などを中心に活動しています。 [詳細]