こんにちは、しらたまです。
今日も忙しいママのためのネットビジネスキャリアアップ講座を開始します。
このブログでは、これまで
・稼げるブログを作りたければ、無料ブログは絶対ダメ！
・WordPressでブログを書くと、初心者でも簡単にカッコいいブログが作れる
こんなことをお伝えしてきました。
ブログの作り方については、
稼げるブログを作っちゃおう！WordPress構築関連の記事一覧
こちらに記事の一覧があります。
自分のブログがまだないよ〜とか、ブログの作り方がわからないという場合は、こちらの記事を順に読んでみて下さいね。
さて、今日のテーマはWordPressでブログ記事を書くための基本的な方法について、です。
記事を書くためには、
・文字入力
・改行
・段落を設定する
・画像の挿入
・文字の装飾
・リンクの挿入
基本的には、こんなスキルが必要ですね。
難しいことは抜きにして、今日はまず基本のスキルを覚えてしまいましょう。
では、始めます。
この記事に書いてあること
ブログ記事を書くための基本の入力操作
では、ブログ記事を書くために必要となる基本の入力操作について、1つ1つ解説していきますね。
まず始めに、新しい記事を作成する画面を開きます。
WordPressの管理画面にログインし、左側のメニューから…
「投稿」→「新規追加」をクリックすると、新しい記事を作成する画面が開きます。
1. 仮のタイトルとパーマリンクをつける
一番上の横長の四角にブログのタイトルを書くのですが…
タイトルは、記事が出来上がってから初めてぴったりのタイトルが思い浮かぶことが多いです。
一生懸命タイトルを考えても、記事を書いていく内に内容とタイトルが合わなくなってしまうこともしばしば。
最初から良いものを考えようとせず、とりあえず仮のタイトルをつけておき、記事が出来上がってから変更するという手順で進めるのがおすすめです。
また、タイトルに合わせて、パーマリンクも変更しておきましょう。
パーマリンクについては、
【WordPress】パーマリンクって何？SEOを考慮した最適なパーマリンクの設定方法を解説します
こちらの記事で詳しく解説していますので、チェックしてみて下さいね。
1. 記事の入力モードを切り替える
記事を編集するには、
・ビジュアル
・テキスト
の2つのモードがあり、必要に応じて使い分けていきます。
本文を入力する枠の右上に、「ビジュアル」「テキスト」を切り替えるタブがついています。
ビジュアルは 、出来上がったブログの画面に近い見た目で編集することができるモード。
ですので、基本的にはビジュアルの画面でずっと入力していくことになります。
テキストは、HTMLというWebページを作成するための”言葉”で編集するモードです。
ビジュアルと比べるとちょっと難解な印象を受けるかもしれませんが、WordPressにはHTMLの言葉をボタン一つで書いてくれる機能が備わっているので、実はそれほど難しくありません。
テキストで入力したものは、必ずビジュアルで仕上がりを確認すると良いでしょう。
2. 記事本文に文字を入力する
次は、記事本文に文字を入力していきましょう。
今はビジュアルのモードになっています。
左上の赤い四角で囲ったところ、ここが文字のフォントとサイズを選択する部分です。
左側の「Lucida Gra…」がフォント、右の「16px」がサイズです。
あなたの好きなフォントを選んでOKですが、こだわりがなければこのままの設定でいいと思います。
本文の文字の大きさは、通常は16pxで書くとちょうど良いです。（この記事は見出し以外の文字は16pxで書いていますよ。）
目立たせたいところでは少し大きくしたり、目立たせたくないところでは小さくしたりと調節して下さい。
3. 改行する
ビジュアルモードで改行を入力する時には、
② shift＋return（enter）キーを押す
この2つの改行方法があります。
① return（enter）キーを押す方法では、行間の少し開いた改行になり、
② shift＋return（enter）キーを押す方法では、行間が詰まった改行になります。
文章のまとまりを考えて改行を使い分けると、読者さんに読みやすい記事に仕上がりますよ。
何回か連続で改行を入れれば、より広く行間を取ることもできます。
4. 段落を設定する
次は、段落を設定してみましょう。
左上に「段落」というボタンがあるので押してみると、見出し1〜6が選べるようになっています。
入力してみると、それぞれこんな感じに。
見出し1から順に、段々と文字が小さくなり、目立たなくなっていっていますね。
見出しは基本的には、大きいものが大見出し。
大見出しの段落の中で、更に細かく段落を分けた方がわかりやすい場合には、より小さい見出しを使っていきます。
この記事では基本的に…
・必要に応じて小さい見出し（見出し3〜5位まで）を利用
という感じで使っています。
見出しに使用する言葉は、検索エンジンでの検索ワードとしても大切になります。
見出しの文章は読者さんがどんな言葉で検索するのかな〜ということを意識して書くようにしましょう。
5. 画像を挿入する
WordPressで画像を挿入するには、
①画像をメディアライブラリに登録
②画像のURLをビジュアルモードで貼り付けるか、「メディアを追加」ボタンを利用して挿入
という2ステップが必要です。
こちらについては、前回の記事
WordPressで画像を挿入する方法とは？メディアライブラリの使い方とEnhanced Media Libraryで画像を整理する方法を解説
こちらで詳しく解説していますので、読んでみて下さいね。
6. 文字を装飾する
WordPressでは、HTMLと呼ばれるWebページを作るための言葉が分からない人でも簡単に記事が書けるように、様々なボタンが用意されています。
初期設定のままでもそれなりに使えるのですが、ボタンの種類を増やしたり、使いたいボタンだけにカスタマイズしたりできるプラグイン「TinyMCE Advanced」を導入しておくと、とっても便利。
実は上記の画面は、TinyMCE Advancedを使っている状態の表示でした。
TinyMCE Advancedのインストールから初期設定までは、
【TinyMCE Advanced】はWordPress投稿画面の入力ボタンを増やせるプラグイン！導入方法と初期設定を解説します。
こちらの記事で解説していますので、導入がまだの方はまず導入してしまいましょう！
各ボタンの役割は、こんな感じです。
太字
イタリック（斜体）
引用を表示
番号なしのリスト表示
番号ありのリスト表示
左寄せ
中央揃え
右寄せ
インデントを増やす
インデントを減らす
テキストとして貼り付ける
表を挿入
文字の色を変える
マウスのポインターをマークの上に持っていくと、それぞれのボタンの機能が表示されます。
Wordと同じような感覚で使えるものがたくさんありますので、実際に使って確かめてみて下さいね。
次に、文章に線を引いてみましょう。
線を引く時には、「テキスト」画面を利用します。
テキスト画面でボタン一つでできるのは、
・赤アンダーライン
・黄色マーカー
・黄色アンダーラインマーカー
の３種類です。
まず、ビジュアルの画面で文字を書きます。
次に、テキストに画面を変更してみるとこんな感じになっています。
赤アンダーラインを引きたい文字を選択した状態で…
「赤アンダーライン」をクリックします。
すると、こんな画面に。
これを”ビジュアル”画面で確認すると、赤アンダーラインが引けています。
黄色マーカー、黄色アンダーラインマーカーも同様の操作でできるので、やってみて下さいね。
このように、テキストにだけある機能も、ビジュアルで確認しながら利用すると簡単にわかりやすく操作することができます。
色々試してみて下さいね。
7. リンクの挿入
最後にご紹介するのは、リンクを挿入する方法です。
実はこの操作、ブログの読者さんがフィッシング詐欺に狙われないために工夫が必要となるので要注意。
フィッシング詐欺とは？
フィッシング詐欺とは、送信者を詐称した電子メールを送りつけたり、偽の電子メールから偽のホームページに接続させたりするなどの方法で、クレジットカード番号、アカウント情報（ユーザID、パスワードなど）といった重要な個人情報を盗み出す行為のことを言います。
総務省 国民のための情報セキュリティサイトより引用
記事にリンクを挿入する際、”あること”に気をつけないと、IDやパスワードなどを不正に盗み出すフィッシング詐欺につけ込まれてしまう危険があるんです。
恐ろしいですよね。
読者さんに安心してブログを読んでもらうために、ぜひ安全なリンクの挿入方法を覚えましょう。
リンクを挿入する2つの方法
リンクを貼る方法は大きく分けて２つあります。
１つ目はブログ内のあなたの記事を紹介するタイプ。（上）
これを「ブログカード」と呼びます。
２つ目は文章の中で下線の引いてある文字をクリックするとリンクに飛ぶことができるタイプです。（下）
１つ目、ブログカードを使ってブログ内のあなたの記事を紹介する方法は、とっても簡単です。
ビジュアルの画面で、あなたの記事のURLを貼り付ければOK。
ビジュアルの画面上は上記のようにURLがあるだけですが、実際には上の画像のように画像付きの表示に自動的に変更されます。
ビジュアルではブログカードとしては表示されませんが、「プレビュー」や実際に投稿した記事で確認すれば、ちゃ〜んとカードとして表示されますよ。
ただし、同じブログ内の記事でないと、このような画像付きの表示はされません。
２つ目の方法では、
①リンクをクリックした時に、そのままのページでリンク先に移動するパターン
②リンクをクリックした時に、別のタブが開いてリンク先のページが表示されるパターン
更にこの２パターンがあります。
では、まず①のパターンを解説します。
まず、ビジュアルの画面で何か文字を入力し、リンクを貼りたい箇所を選択した状態で鎖のマークをクリックします。
四角い吹き出しが出てくるので、リンクを入力し、リターンボタンをクリックすると、下のような表示に変わります。これでリンクの挿入は完了です。
もっと簡単な方法としては、
①挿入したいURLをコピーしておく
②リンクを挿入したい文字を選択した状態で、windowsならcontrol+v、Macならcommand+vでURLを貼り付ける
これでも、リンクが挿入されますよ。
さて、これまで紹介した①の方法の場合、リンク先の記事が表示されると、あなたの記事は表示されなくなります。
読者さんがあなたの記事に戻って来るには「戻る」ボタンを押さなければなりません。
文章の途中で別の記事を紹介する場合は、別のタブでリンク先が開く方が元の記事、つまりあなたのブログの続きをしっかり読んでもらいやすくなります。
という事で、今度は②の別のタブでリンク先のページが表示される方法を説明します。
基本的には、リンクは別タブで開く方法を使って挿入するようにしましょう。
先ほど①でリンクを挿入した状態で、テキストの表示に変更すると、このような画面になります。
<a href=”リンク先のURL”>リンクを貼り付けたい言葉</a>
このような構造ですね。
この構造に”別タブで開く”という一言を付け加えることで、別タブで開いてくれるようになります。その一言は
『 target=”_blank”』
です。
一言付け加えると、こうなりました。
これで、別のタブで開くようになりました…が、この一言がフィッシング詐欺に狙われる”隙”を作ってしまいます。
実は、『 target=”_blank”』で新しいタブが開く時に、不正にIDやパスワードを入力させるためのページを開かせてしまうという攻撃を受けてしまう恐れがあるんです！
そこで、攻撃を防ぐためにもう一言付け加える必要があります。
『 target=”_blank” rel=”noopener”』
この”no opener”をつけるだけで、攻撃を防ぐことができます。
テキスト表示の文章は、最終的にこのようになります。
これで、フィッシング詐欺に狙われることなく、別のタブでリンクを開いてもらうことができるようになりました。
この”no opener”は、自分で挿入しても良いのですが、実は…自動で付加されています。
WordPress4.7.4からは外部リンクに「target=”_blank”」が指定されていると、そのリンクに対しては自動で「noopener noreferrer」が付くようになっているんですね。
という事で、ちょっと脅かしてしまいましたが、ちゃんとWordPressを更新して使っていれば大丈夫です♪
スポンサーリンク
まとめ
今日は、ブログ記事を書くための基本的な操作方法について解説しました。
・一部はテキスト画面にしかボタンがないものがある
・テキスト画面で入力したものは、ビジュアル画面で確認
こんな流れで進めていけば、基本的な操作はOKです。
ご紹介に漏れたボタンについても、とりあえず使ってみて、ビジュアル画面で確認してみて下さい。
きっと気に入った機能が見つかるはずです。
ブログの記事を書くための基本操作がわかったら、いよいよ実際に記事を書いてみよう…ということになりますが、実際に書いてみると、
「どうやって書いていいかわからない…」
「記事を書くのにやたらと時間がかかってしまう…」
なんていうお悩みが出てきます。
文章を書くのが苦手…という場合には
ブログの記事は書き方を守ればスラスラ書ける！読まれる記事の構成と作成手順を解説します
是非こちらの記事も読んでみて下さいね。
では、また次回お会いしましょう🐾