どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
ワードプレスを導入してから、いざブログ記事を書き始めようとしても無料ブログと使い勝手が違ったり、今まで記事を書いたことがない方はエディタの使い方もよくわからないことが多いと思います。
私もワードプレスで記事を書き始めた当初は、「なんか色々アイコンがあるけどどうやって使うの？」と疑問だらけでした。
そこで私のような経験をされている人向けに、使い方を覚えておくと便利なエディタ機能を10個ご紹介したいと思います。
ワードプレスのエディタを拡張
エディタ機能をご紹介する前に、ワードプレス導入時のデフォルトで使えるエディタは、機能が少なく扱いにくい部分があるので、プラグインを導入して拡張しておくことをオススメします。
| 参考：使えるエディタ！TinyMCE Advancedの導入からカスタマイズする方法 |
私は上記の「TinyMCE Advanced」のエディタを使っていて、今まで特に不便に思ったことはないので使いやすいかと思います。
また、ワードプレステーマを「STINGER8」にしている方は、フォントサイズの指定が「px表記」ではなく「％表記」になってしまうので注意しておきましょう。
| 参考：「STINGER8」TinyMCE Advancedのフォントサイズをpx表記にする方法 |
基本的な１０個のエディタ機能の使い方
それでは「TinyMCE Advanced」のエディタを例にして、機能や使い方などを１つ１つ解説していきたいと思います。
見出しの追加
エディタ内の「段落」という項目を選択すると、「見出し」の種類がいくつか表示されるかと思います。
見出しは文章を一旦切りたい時や、項目ごとに内容をまとめたい時に使用するもので、それぞれの見出しによってサイズやデザインも変わってきます。
デザインは今お使いのテーマや、CSSによるカスタマイズによって色々変わってきます。
一般的には「ｈ1」は記事にタイトルに使われているもので、各見出しにはそれぞれに役割があります。
- 見出し２(ｈ2)：ｈ1に対する中見出し
- 見出し３(ｈ3)：ｈ2に対する小見出し
- 見出し４(ｈ4)：ｈ3に対する小見出し
「ｈ5」や「ｈ6」はほとんど使用することがなく、基本的には「ｈ2・ｈ3・ｈ4」で構成することが基本となっています。
太字に変更
エディタ内の「Ｂ」というアイコンを選択した状態で文字を入力していくと、文字が太字になります。
パソコンのキーボードにある「Shift + B」でも太字にすることが可能です。
文章中に書かれている文字は、ドラッグして選択範囲を指定してから「Ｂ」アイコンを選択することで、範囲すべての文字を太字に一括変更できます。
太字の解除はその逆の方法で使用します。
文字を太字にすると、こんな感じに目立たせることができるようになります。
ただし、あまり多様しすぎると読みづらくなってしまうので、自分で確認して問題がない程度に使用しましょう。
引用の追加
他のサイトやニュースなどの情報を、そのまま一部分を抜粋してブログに書きたい時にこの「引用」アイコンを使用します。
例えば「エディタ」についての記事を書くときに、ネット検索してWikipediaの情報をそのまま一部参考にする場合は、このように引用を使います。
エディタ（またはエディター、editor）は、コンピュータ上で各種のオブジェクトを編集するソフトウェア。
引用：Wikipedia
引用元のURLの表記と内容は著作物になるので、勝手に改変はしないように注意して使用する必要があります。
自分では説明しきれない詳細な内容を書きたい時や、引用した内容について自分なりにわかりやすく解説するなど、色々と使い道はありますね。
リストスタイル
「リスト」アイコンを使用することで内容を項目順に並べたり、ポイントをまとめて紹介したりする時なんかに便利です。
使えるリストスタイルは「番号なしリスト」「番号付きリスト」の２種類があり、「▼」マークから以下のようなものが使えます。
どれがオススメとかは特にないので使用するリストは記事の内容によって、使いやすいものを選ぶといいかと思います。
文字の配置
記事中の文字の配置はデフォルトで「左寄せ」になっていますが、上記赤枠のアイコンから「中央揃え」「右寄せ」に変更することができます。
「これが中央だ！」
「右に寄ってるね。」
右寄せはあまり使う機会はありませんが、中央揃えは結構な頻度で使用することが多いですね。
記事中に挿入した画像などにもこれは適応されるので、上手く活用していきましょう。
リンクの挿入・削除
「リンク」アイコンからは通常のテキストにリンクを挿入したり、逆に削除を行うこともできます。
リンクを挿入する場合は対象となるテキストをドラッグしてから、「リンクの挿入/編集」アイコンを選択します。
そうするとテキスト下にURLを入力できるメニューバーが出てくるので、リンク先となるURLを入力して右にある設定マークを選択します。
リンクを追加する項目が表示されるので、設定するリンクを新しいタブで開くか、同一のページで開くかを選んで、『リンクを追加』をクリックします。
これでテキストリンクの完成です。
また、既存のコンテンツページをキーワードで検索することもできるので、URLを毎回入力する手間もなくて良いですね。
作成したリンクを削除する場合は、リンクを選択すると削除アイコンが表示されるので、そこから１クリックで行うことが可能です。
取り消し・やり直し
アイコン左側が「取り消し」、右側が「やり直し」になっていて、文章の修正時に使用することがあります。
例えば、直前に打ち込んだ文章を一度で消したい時に「取り消し」を使ったり、間違って消し過ぎてしまった時に「やり直し」で復元させることができます。
私の場合は記事を作成しながら他のこともしているので、たまにキーボードにあたって文章が消えてしまうことがあるんですが、そんな時にもありがたい機能です。
フォントサイズの指定
「▼」からフォントサイズを指定することで、記事中の文字の大きさに強弱をつけることができ、段階別にサイズを調整することもできます。
ブログ記事の読みやすい文字サイズとしては、一般的に15px～18px程度と言われているので、私のブログでは17pxを採用しています。
これが14px これが20px これが24px これが32pxでかいね
基本的にはワードプレスで使用中の各テーマごとに、CSSで記事中のフォントサイズが設定されています。
その為、エディタでフォントサイズを指定する時は、一部の文字を既存のサイズから大きくして目立たせたり、逆に縮小したりする場合になります。
STINGER8をテーマにされている方は、こちらの記事を参考にCSSでのサイズ指定、行間、段落などの設定を行うことができます。
| 参考：STINGER8の基本的だけど重要なCSSカスタマイズを６項目にまとめたよ |
テキストの配色
「テキスト色」アイコンの「▼」マークから配色の選択を行い、対象テキストをドラッグしてから「Ａ」アイコンをクリックすると、文字色を変更することができます。
情熱があふれるレッド 集中力しやすいイエロー ちょっと気分がブルー
太字と組み合わせると、より読者に印象付けることができますね。
また、「カスタム」を選択すると詳細な色彩を設定することも可能です。
テーブルの挿入
「テーブル」アイコンの「▼」マークを選択すると、メニューが出てくるので「テーブル」からマス目を指定して表を挿入します。
試しに「３×３」のテーブルを挿入してテキストを入力すると、こんな感じの表が出来上がります。
| こんにちわ | やっほー | おはよう |
| 元気ですか | ありがとう | こんばんわ |
| おやすみ | よろしく | どうもどうも |
この表に「行」を上下に追加したり「列」を左右に追加したり、セルを結合したりすることが可能で、そのすべてはテーブルアイコンの「▼」マークから行います。
「表のプロパティ」の「一般」からはテーブルの幅や高さ、枠線の太さなどを変更することができます。
「詳細」では色の指定ができ、幅を変更した時にテーブルが中央にならない場合は、「スタイル」に「margin-left: auto; margin-right: auto;」を入力してみて下さい。
また、テーブルの幅はマウスドラッグでも調整ができますが、その場合だとpxで幅が指定されてしまう為、レスポンシブに対応できなくなります。
なので幅の変更はプロパティに「％」で直接入力するようにしましょう。
ただし、STINGER8の場合はなぜか反映されないのでご注意を。
エディタ機能まとめ
ここでご紹介した内容は記事を作成していく中で、基本中の基本のようなものなので覚えておいた方がいいでしょう。
基本とは言え、大抵のことはこれだけでできてしまうので、私も他のエディタ機能はそんなに使う機会がありませんね。
ただ、エディタの機能自体はまだまだあるので、使い方に慣れてきたら他の機能も色々試してみて下さい。
| 合わせて読んでほしい ワードプレスで記事の書き方がわかる！ブログ更新までの10ステップ |
