サイトマップ(全ページ一覧)

赤ちゃんに絵本はまだ早い?
絵本を、もっと身近に。
無料の絵本で気軽に読み聞かせ。

ワードプレスで記事を書こう!作業の流れを決めておくと執筆が楽だよ

ワードプレスで記事を書こう!

 

ちびこママです!
icon-twitter Chibiko_mama

絵本と全く関係ないですが、最近ワードプレス関連のお問い合わせが増えているので、こういった記事を書いています。

以前の記事で、固定ページやメニュー、ウィジェットを整えてブログの体裁を整える所までを書きました。

ワードプレスで固定ページを作ってメニューやウィジェットを整えよう!

これでやっと記事を書き始められますが、まっさらな状態からいきなり書くのって、意外とキツイですよね?(^-^;

そこで、私が記事を書くときの大まかな流れをご紹介します!ある程度、作業の流れを決めておくと楽ですよ!

タイトルと見出しを考える

あくまで私のやり方なんですが、まず始めに、どんな記事を書きたいのか?を紙に箇条書きで書き出すことが多いです。

↑字汚くてごめん(笑)

紙に書くって凄いんですよ。最初は頭の中でふわっとしていた内容が、書き出すことで自然に整理されていくんです。

スマホやパソコンに打ち込むのじゃダメ。特にまだ記事を書き慣れていない内は、思いついたことを片っ端から「書いて」みてください。あくまでメモ書きだから綺麗に書こうなんて思わなくていいです。騙されたと思ってやってみてください。

どうですか?なんとな~くまとまって来ましたか?^^ではワードプレスにログインして、投稿新規追加をクリックしてください。

タイトルはなるべく全角32文字以内。自分が検索するときの気持ちをヒントにしよう

これはね・・・過去の自分に言いたい(笑)最初に知っておくと楽だから。

理由は単純で。Google検索かけると、タイトルが表示されますよね。全角32文字超えると、タイトル切れちゃうから(^-^;

赤枠で囲った部分、私の記事なんですが、「ロリポップが無料の独自SSLを導入!WPのサイトを常時SSL化する手順」というタイトルです。

入りきらなかった・・・orz

半角英数字が入ると少しツメツメできます。

 

「自分が検索するときの気持ちをヒントに」というのは、勿体ぶらずにタイトルに答えを入れてね。ってことです。

SNSに流れてくる広告なんかでは、「~の理由は〇〇だった!」というタイトルを目にしますが、「〇〇」と書かずに答えを書いてしまった方が検索順位も上がりやすいし、検索する側としても手っ取り早く情報を得やすい。結果的に記事を読んでくれる可能性が高くなると思います。

試しに、何か適当な言葉で検索かけてみてください。「〇〇」って付いてるタイトルの記事、検索結果にどれだけありますか・・・?

「見出し」を先に考えれば迷子にならない

一般的な意味での「見出し」とは、短く端的に、この先にどんな文章が続くのかをお知らせする文のこと。太字や装飾で目立たせます。

 

昔の私がよくやってしまってたこと。

「見出し」を作らずにガンガン書き進め、話があっちこっちに飛ぶ。まとまらず何が言いたいのか自分でも分からなくなっちゃった・・・。って記事の量産!(今でもよくやっちゃうけど!笑)

これはもうね、迷子ですよ迷子!(笑)

後から修正(リライト)しようにも、話の軸がどこにあるのか分からないから直しようがない状態。

そこで、見出しだけ先に作ってしまう事をお勧めします。見出しの書き方は、起承転結とか箇条書きとかでいいと思います。多分。

 

ワードプレスで「見出し」を使うときはコチラから。↓

「見出し2」から使ってね。

ワードプレスで見出し1は選んじゃダメ。もうそういうルールなんだと受け入れてください。

詳しくはこちら↓

ワードプレスで固定ページを作ってメニューやウィジェットを整えよう!
【初心者向け】ワードプレスのパーマリンク設定、固定ページの作り方、メニューやウィジェットの設定方法を、画像や動画の解説つきで1ページにまとめました。

見出し3を使う場合は見出し2の中で使います。見出し4は見出し3の中で。見出し6まで使うことはまずないかと思います。せいぜい見出し4までかと。

 

ワードプレスのテーマで「Cocoon」を使っている方は、Cocoon設定目次で記事に目次を表示するか否かを設定できます。

ここで「目次を表示する」に✔を入れて保存しておけば、記事中に見出しを入れるだけで自動的に目次を表示してくれます。

Cocoon以外をご利用の方で、テーマに目次機能がない方は、プラグインをご利用ください。「TOC」で検索すると、目次系のプラグインが複数みつかります。

導入文を作る

導入文とは、冒頭、目次の前に書く3~4行の文章です。これがあると記事の中身をしっかり読んでもらえる・・・かもしれません。

導入文に何を書くべきか、というのは、私には語れる程のスキルがございません(泣)

世の中にはライティングスキル向上のためのサイトや書籍が多数あり、導入文の書き方に関する情報もありますので、興味のある方はそういったものを参考にしてもらえればと思います。

が、今は読まなくていいです。今、大事なのはそこじゃないから。今大事なのは、1記事を最後まで書き上げることです。

 

導入文はそこまで長く無くてOK。以下の2点を意識してサラッと書いてみてください。

  1. その記事を書こうと思った理由・きっかけなど
  2. その記事を読んだら読者にどんなメリットがあるのか

そんなに深く考えなくて大丈夫。

  1. 食洗機を買ったのでレビューを書きました。メーカーは○○で、××という機種です。
  2. これから買うならきっと参考になるし、家事の時短になるからあなたの時間が増えるよ!

こんな感じでいいと思います。後からいくらでも直せるので、サクサク行きましょう。この辺で一度「下書きとして保存」ボタンを押しておきましょう。

本文とまとめを書く

最初に目次(見出し)を考えているので、それに沿って書いていきます。

文章はお好きにお書きいただくとして、ワードプレスの操作などついて少しだけ解説します。

段落・見出し・整理済みテキストについて

ツールバーの中の「段落▼」と表示されている部分をクリックすると、段落・見出し1~6・整理済みテキストが選べるようになっています。

段落

普通の文章(導入文とか本文)を書くときに使います。

Enterで区切った文章のまとまりのことを「段落」といいます。Enterを押すと、1行分、間が空きます。

間を空けず、単に改行をしたい場合は、Shiftを押しながらEnterを押します。(これは「段落変更」扱いにはなりません。)

段落変更が多いと、検索エンジンに嫌がられるらしいです。一文ごとではなく、文章のまとまりごとに段落変更するようにしましょう。

見出し

くどいようですが、見出しを入れる場合は見出し2から。見出しを入れると目次を作れます。

 

見出しを使いこなしたい方はこちら↓(外部サイト)

【HTML】見出しタグの使い方:h1〜h6はどう使い分ける?
h1やh2などの見出しタグの「意味」と「正しい使い方」を分かりやすくまとめました。

整理済みテキスト

スペースや改行など、打ち込んだ文字をそのまま表示してくれるテキスト。

/*SNSシェアボタン太字*/
.sns-share-buttons a .button-caption{font-weight:bold;}

↑こういうやつです。

見出しなどを装飾したくて「CSS」でカスタマイズすることもあると思います。カスタマイズしたコードを紹介したい、というときに使うといいでしょう。

関連記事↓

【ワードプレス】追加CSSを使ってカスタマイズしてみよう!
ワードプレスの「追加CSS」機能について、動画付きでなるべく分かりやすく解説してみました。カスタマイズをしてみたい方へ。

 

このように、段落・見出し・整理済みテキストをきちんと使い分けることで、読者にとっても読みやすく、検索エンジンにも記事の内容が伝わりやすくなります。

最後にまとめを書く

記事の要約でもいいし、最後にアドバイスしたいことなんかを書いても良いと思います。

記事の内容にもよりますが、時間の無い方がまとめだけ読んでも記事の概要が掴めるよう、4~5行程度でも良いので書いておくと親切ですよね^^

私も「まとめ」書くの苦手なんだけどね(オイ笑)

 

あ、途中途中、「下書きとして保存」をお忘れなく!

本文にイメージ画像を入れる

文章だけのブログはなかなか読みづらいですよね(^-^;なので、適度に画像を入れてあげましょう。

記事の内容の補足になるような画像を、見出しひとつにつき1枚程度入れておけば、とりあえずOK。

自分で撮った写真・自分で描いた絵がベストです。

今はフリー素材があって便利ですよね。でも、多用すると「どこかで見た」感が強くなってしまい、それだけで読んでくれない人もいます。

絵はスキャナが無くても、今のスマホはカメラの性能が良いので、案外きれいに撮れますよ。

スマホで撮った画像は重い。リサイズ・圧縮プラグインを入れておくと安心

撮影した写真をそのままブログに載せてしまうと、サイズが大きすぎるので要注意!必ずリサイズ・圧縮して使うようにしましょう。

でも、画像編集ソフトを使って毎回手作業で加工するのは結構大変です。

「EWWW Image Optimizer」と「Imsanityというプラグインを入れておけば自動化できます。プラグイン新規追加から検索してインストールしておくことをおすすめします。

こちらの記事内で簡単に解説しています。↓

ワードプレスで趣味ブログを始めよう!ロリポップ×ムームードメイン
ロリポップ!とムームードメインの申し込み・契約の流れ、ワードプレスのインストール手順と初期設定、無料のおすすめテーマ「Cocoon」の導入方法を写真や動画で詳しく解説します。

今の時点では、細かい設定はせず有効化しておくだけでOKです。

画像は縦長よりは横長で。縦横比は3:2くらいに切り抜くときれいに見える

ブログに縦長の画像はちょっと相性が悪いです。やってみると分かると思いますが、縦長の画像は画面を占領して見づらいんです。

極力、横長の画像を使いましょう。

縦横の長さの比率である「アスペクト比」は、今は3:2くらいがちょうどいいのかな・・・と思います。

昔は4:3が主流だったと思います。一般的な写真の比率が4:3だからね。

今はスマホの普及で、小さい画面をなるべく占領しないよう、だんだん平べったくなってきました。

 

 

↑アスペクト比4パターン。3:2(一眼レフだとこの比率)、16:9(テレビ画面などの比率)は最近増えてきた印象。

 

5:4という比率はあまり一般的ではありません。

iPhoneだと切り抜き(トリミング)サイズの中に5:4という選択肢があるので、比較対象として入れてみました。

3:2だとまだ少し大きい、16:9だと平べった過ぎる、という場合には5:4でトリミングしてみるといいかもしれません。

 

スマホで写真を撮ると大体4:3になるので、トリミングすることを考慮した上で撮影できるといいですね^^

今はスマホ上でちょちょっとトリミングできるので便利になったものです。

【参考ページ】

画像の保存形式・JPGとPNGの使い分け

画像編集ソフトを使える方は、JPGとPNGを使い分けて保存することをおすすめします。

詳しくはこちら。

JPGとPNG、ブログに画像を貼るならどっち?使い分けが大事だよ!
ブログにおけるJPGとPNGの適切な使い分けについて、実際にデータサイズを比較して検証しました。写真、スクリーンショット、イラストでどちらを使うべきか、分かりやすく解説します。

 

上手に使い分ければ、画像の劣化を防ぎつつ、データ容量を減らすことができますよ。

iLoveIMG | 画像編集用オンラインツール
iLoveIMGは、使いやすくて完全無料の画像処理用オンラインサービスです。画像の圧縮、サイズ変更、切り抜き、変換などが可能です!

↑こちらのようなサイトをご活用ください。

画像の挿入方法

画像の貼り付けは、メディアを追加から行います。

挿入したい画像を選択します。

配置は「なし」か「中央」でいいと思います。リンク先はとりあえず「なし」で。

ブログ記事の横幅は、パソコンで見る場合でも1000pxを超えることはなかなかありません。

↑の写真の例で言えば、基本は「中」サイズ、どうしても大きく表示したい場合に「大サイズ」を選ぶといいでしょう。

文字を軽く装飾しつつ、ザっと記事を見直す

頭から読み直して、太字アンダーライン赤字程度の装飾を軽~くしつつ、分かりづらい表現はないか?誤字脱字はないか?などをチェックしていきます。

ここで大事なのは、あくまで軽く!ということ。

 

理由はふたつ。

  1. 装飾をしすぎると、かえって読みにくくなる
  2. 後でいくらでもリライトできる。まずは記事を書き切って「成功体験」を得ることが、ブログを継続するモチベーションに繋がる

です。

 

でも、↑みたいな囲い枠とか、吹き出しとか入れたいな~

・・・うんうん、分かりますよ、その気持ち。

でもね、意外と吹き出しや囲い枠を使いこなすの、難しいと思うんです。

デザインの領域になってくるし、テーマによってはそういう機能が無かったりするから。

 

吹き出しや囲い枠を使い始めるのは、文章を書くことに慣れてきて、過去の記事をリライトし始めるタイミングで十分だ、と私は思います。

アイキャッチを設定する

アイキャッチは記事の顏です!ブログ上で記事一覧のサムネイルになったり、TwitterなどのSNSでシェアされた時に表示されます。

気合を入れて作りましょう!

 

・・・と言いたいところですが、私も苦手です、アイキャッチ作り(笑)

アイキャッチも、後からいくらでも差し替えることができます。

とりあえずは、シンプルな背景+ちょこっと文字+イラスト、みたいな感じで作ってみたらいいと思います^^

 

アイキャッチ作りにはcanvaというオンラインサービスが相性よさそうです。

Collaborate & Create Amazing Graphic Design for Free – Canva
Create beautiful designs with your team. Use Canva's drag-and-drop feature and layouts to design, share and print business cards, logos, presentations and more.

使い方の説明は割愛しますが、直観的に操作できるのでそれほど難しくないと思います。^^

アイキャッチ作りの参考になる記事↓(外部サイト)

おしゃれなアイキャッチ画像の作り方&デザインのコツ8つ
ブログなどで使えるアイキャッチ画像のデザインのコツと作り方をまとめました。どのツールを使うのが良いのか、についても解説しています。

 

画像の準備ができたら、アイキャッチ画像を設定しましょう。

パーマリンク・カテゴリーを設定する

ここまできたら、あと一息です!(*^^*)

もうこのままでも公開できますが、ここでパーマリンクとカテゴリーの設定をやっておきましょう。

パーマリンクの設定

パーマリンクについての説明はこちら↓

ワードプレスで固定ページを作ってメニューやウィジェットを整えよう!
【初心者向け】ワードプレスのパーマリンク設定、固定ページの作り方、メニューやウィジェットの設定方法を、画像や動画の解説つきで1ページにまとめました。

↑を参考に、記事の内容を端的に説明できる英単語やローマ字で、パーマリンクを書き換えてください。

Google翻訳など活用しつつ、ガンバってください。

カテゴリーの設定

投稿画面からでもカテゴリーの追加はできます。

とりあえずは、ここで任意のカテゴリー名をつけてチェックをいれておきましょう。

 

ただ、余力があれば、あとでやっておいて欲しい作業があります。

投稿カテゴリーから、スラッグ名を変更しておいてください。

「名前」がブログ上での表示名、「スラッグ」はURLになる文字列です。

デフォルトでは、「名前」に入力した文字列がそのまま「スラッグ」になります。日本語を入れると日本語を含むURLとなります。

URLに日本語が含まれていると、ブログを長く続けるほどちょっと不便になってくるんですよ…^^;

できればシンプルな英語に直しておくことをオススメします。

タグは後回しでOK

「タグ」については、今の時点では設定しなくてOKです。「カテゴリ―」も「タグ」も、作るとその分ページ数が増えちゃうので。

記事自体が少ないのに「カテゴリー」や「タグ」のページがやたらと多いと、これまた検索エンジンに嫌がられるらしいです(^-^;)

20記事くらい書いて、「カテゴリー」だけでは分類が難しくなってきたらつけるといいでしょう。

 

私、やたらと「検索エンジンに嫌がられる」と書いていますね(^-^;)気になる方は、以下をチラ見してみてください。↓

魅力的なサイトの作り方を学ぶ│Googleウェブマスター

今はチラ見でいいです、ちゃんと読もうとすると嫌になっちゃうので(笑)

さあ、記事を公開しよう!

記事、最後まで書けましたか?^^

あとは「公開」ボタンを押すだけ。

はい、ポチッとね!お疲れ様でした♪

 

今回ご紹介したのは、あくまで私のやり方です。人それぞれ、やりやすい方法があるはずです。参考にしていただきつつ、自分なりのやり方を見つけてもらえたらな、と思います。

ちなみに、私はどうしても一つの記事の文字数が多くなってしまうんですが、普通はこんなボリューム要りません(笑)

この記事の半分くらいの文量が、読みやすい長さだと思います(^-^;)

一つの記事に100%の力で臨むのではなく、60%くらいの気持ちで書き上げ、残りの40%は次の記事を書くためのモチベーション維持や、リライトに充ててくださいね!

一緒にブログライフを楽しみましょう♪(*^^*)

最後までお読みいただき、ありがとうございました。