ブログ始めるチャンス!初期費用0円・ドメイン永久無料詳細はこちら

【最新版】WordPressブログの書き方【装飾のコツも解説】

悩む人のアイコン画像悩む人

WordPressを始めたばかりのブログ初心者なので、記事の書き方や、投稿する手順を知りたいです。読みやすい記事にする装飾方法も知れたら良いなぁ。

こんな悩みを解決します。

本記事の内容

  • WordPressブログの書き方
  • WordPressブログの装飾方法
  • WordPressブログの投稿手順

この記事を書いてる僕は、ブログ歴9ヶ月です。
当ブログと別ブログ(ぽりけんVOD)を合わせて、これまで200記事以上書き続けてます。

今回は2018年に導入され、現在の標準エディタとなってるブロックエディタ:Gutenberg(グーテンベルク)を使って、ブログの書き方を解説した記事です。

ぽりけんのアイコン画像ぽりけん

画像つきで解説しつつ、読みやすくするための装飾方法も紹介してるので、初心者でも失敗せず記事作成することができるようになりますよ。

それでは、今回もサクッと本文をどうぞ!

タップできる目次

WordPressブログの書き方

WordPressブログの書き方

手順は次の8つです。

  • 手順①:投稿の新規追加
  • 手順②:タイトルを入力
  • 手順③:カテゴリー選択
  • 手順④:タグを入力
  • 手順⑤:本文の執筆
  • 手順⑥:見出しの設定
  • 手順⑦:画像の挿入
  • 手順⑧:アイキャッチの設定

1つずつスクショ付きで解説してるので、参考にしながら作業してみてくださいね。

手順①:投稿の新規追加

まずは投稿の新規追加をしていきます。

手順①:投稿の新規追加

左メニューの「投稿」→「新規追加」をクリックで、上記画像のように新規投稿ページになります。

ヘッダーメニューの「+新規」→「投稿」でも同じで、どちらの方法でもOKです。

手順②:タイトルを入力

手順②:タイトルを入力

枠線部分に直接タイトルを入力します。
あとから変更できるので、仮タイトルでもOK。

タイトルは32文字を目安に決めましょう。
理由は検索結果に表示される文字数が「32文字以内」だからですね。

32文字以上だと、検索結果に表示された時に後半が省略されるので、文字数カウントを使いつつ、文字数を見ながらタイトルを入力すれば簡単です。

手順③:カテゴリー選択

手順③:カテゴリー選択

右サイドバーにある「カテゴリー」をクリックして、記事に合うカテゴリーにチェックをいれましょう。

※初投稿の場合は「未分類」しかないと思うので、「+新規カテゴリーを追加」から、カテゴリーを追加することができます。

本記事のカテゴリーはブログのことなので「BLOG(ブログ)」にしてます。カテゴリーは下記画像をイメージするとかりやすいです。

カテゴリーのイメージ図

ブログのカテゴリー説明図

ブログ(トップページ)
 ∟ カテゴリー①
  ∟ 記事
  ∟ 記事
 ∟ カテゴリー②
  ∟ 記事
  ∟ 記事
 ∟ カテゴリー③
  ∟ 記事
  ∟ 記事
 ∟ プロフィール

上記の感じで、記事をまとめるフォルダが、カテゴリーということをイメージして、カテゴリー名を決めてください。

手順④:タグを入力

手順④:タグを入力

タグは記事に貼る付箋のイメージですね。

空白でも問題なしですが、カテゴリーと同じでOKです。

手順⑤:本文の執筆

手順⑤:本文の執筆

タイトルより下が本文を書くエディタで、「文章を入力 または / でブロックを選択」という枠線部分が1つのブロックです。

右側の「+」をクリックして、段落やリスト、見出しなどのブロック要素をつなげて、本文を執筆していく流れですね。

ブロックエディタの構造イメージ

ブロックエディタのイメージ

ブロックエディタなら、HTMLコードを知らなくても、パズル感覚で記事を作成できます。まずは、いろいろ試して、慣れましょう。

またWordPressテーマによって、独自のブロックもあり、使用できるブロックは様々。

当ブログではSWELL(スウェル)を使っていて、わかりやすい会話風の吹き出しや、リンクボタンが簡単に作れて、時間を節約しつつ、効果を最大化できるのでオススメですよ。

テーマについては【最強】WordPressブログおすすめテーマ6つ【未来に投資しよう】の記事で解説してるので、チェックしてみてください。

手順⑥:見出しの設定

見出しがない文章は、SEO的にも読者的にも読みにくいので、わかりやすくするために、見出しでまとめましょう。

見出しの設定①

ブロック右側の「+」→「見出し」をクリックします。

作成された見出しに、文字を入力するだけ。

見出しの設定②

上記画像のように見出しが設定でき、枠線をクリックすることで見出しの種類を変更できます。

よく使う見出しは以下の3つ。

  • H2:大見出し
  • H3:中見出し
  • H4:小見出し

上位以外にもH1やH5などもありますが、使わなくてOKです。

H2〜H4の3つあれば、下記のように、記事を見やすく、まとまります。

見出しの構造

「簡単!3分で作れる絶品プリンの作り方」

 H2:材料
  ∟ H3:牛乳
  ∟ H3:卵
  ∟ H3:砂糖
 H2:作り方
  ∟ H3:手順①:混ぜる
   ∟ H4:ゆっくり混ぜること
  ∟ H3:手順②:加熱する
   ∟ H4:注意点
  ∟ H3:手順③:カラメルを作る
  ∟ H3:手順④:完成

こんな感じで、記事に見出しがあるとわかりやすくなるので、見出しをつけて構造的にしましょう。

手順⑦:画像の挿入

手順⑦:画像の挿入

ブロック右側の「+」→「画像」をクリックします。(※一覧になければブロックの検索に「画像」と入力すれば表示されます。)

クリックすると下記画像のようになります。

手順⑦:画像の挿入②

画像の挿入は3パターンあり、使い分けは次のとおり。

  • アップロード:新しい画像を挿入する時
  • メディアライブラリ:過去画像を挿入する時
  • URLから挿入:別ブログの画像を挿入する時

アップロードした画像は自動的にWordPress内のメディアライブラリに保存されます。
メディアライブラリはブログ用の画像フォルダのことですね。

3つの方法で、記事に画像を挿入できます。

手順⑧:アイキャッチの設定

手順⑧:アイキャッチの設定

右メニューの「アイキャッチ画像を設定」をクリックすると、メディアライブラリから選びます。

※アイキャッチ画像の項目が出てない場合は、下記画像の「文章」が選択されてるか確認ください。

手順⑧:アイキャッチの設定②

アイキャッチ画像は記事一覧や、記事の最初に表示されるサムネイルでして、読者の目をひきつける効果があるので、設定必須。

YouTubeのサムネイルのイメージするとわかりやすく、ついつい見たくなるアイキャッチ画像を選びましょう。

アイキャッチや記事内に使う画像素材は【必須】ブログ用フリー素材・画像の神サイト6つ【素材の選び方も解説】の記事で紹介してます。

WordPressブログの装飾方法

WordPressブログの装飾方法

ブログの書き方がわかれば、次は記事を読みやすくするための装飾方法を紹介します。

当ブログでもよく使ってる装飾は以下の7つです。

  • ①:文字装飾
  • ②:箇条書き
  • ③:吹き出し
  • ④:引用する
  • ⑤:改行を知る
  • ⑥:行間スペース
  • ⑦:埋め込み

①:文字装飾

文字装飾は次の3つ。

文字色や文字サイズも装飾で変更できますが、個人的には不要かと思います。

理由は文字色を多用すると、リンク文字との区別がつきにくいし、チカチカして読みづらい。文字サイズを変更すると、本文と見出しの区別がわかりにくくなるからですね。

本記事を見てもらうとわかりますが、太字・斜め・リンクの3つで、見やすいと思います。

太字・斜め・リンク

太字・斜め・リンク

ブロックを選択すると表示されるツールバーから適用できます。

ブロック全体に適用できます。
また、こんな風に選択した部分だけ適用させたりもOK。

派手さはないけど文章にメリハリがつき、読みやすい文章になるので、活用しましょう。

②:箇条書き

②:箇条書き

箇条書きはブロック右の「+」→「リスト」をクリックで、できます。

見やすい記事には、ほぼ箇条書きが使われていて、箇条書きにすると以下のメリットがあります。

  • 見やすくなる
  • 読みやすくなる
  • 要点がわかりやすい

パッと見た印象から読みやすいですね。
箇条書きはメリットしかないので、ガシガシ使いましょう。

③:吹き出し

③:吹き出し

ブロック右の「+」→「STINGER:会話ふきだし」をクリックして、文字入力をすればOKです。

悩む人のアイコン画像悩む人

こんな感じに、読者の悩み(心の声)を代弁したりできます。

ぽりけんのアイコン画像ぽりけん

他にも、自分の意見を入れる時も便利ですね。

吹き出しがあることで、ポップな印象になり、会話風になり、わかりやすさがアップするので、活用しましょう。

※吹き出しはWordPressテーマによっては使えないこともあります。上記吹き出しはSWELL(スウェル)の機能の1つです。

④:引用する

④:引用する

ブロック右の「+」→「引用」をクリックして、文字入力をすればOKです。(※一覧になければ「引用」と検索すれば表示されます)

Google が掲げる 10 の事実

Google がこの「10 の事実」を策定したのは、会社設立から数年後のことでした。Google は随時このリストを見直し、事実に変わりがないかどうかを確認しています。Google は、これらが事実であることを願い、常にこのとおりであるよう努めています。

Google が掲げる 10 の事実

上記のように、他のサイトから文章を転載する時に引用を使います。簡単に言うと正式なコピペ方法ですね。

引用せずコピペした場合はコピーコンテンツ扱いになりSEO的にも、記事元にも良くないので、ちゃんと引用タグを使いましょう。

⑤:改行を知る

⑤:改行を知る

ここは初心者がつまずきやすいポイントで、上記画像のように、改行には次の2パターンあります。

  • SHIFT+ENTERキー:改行
  • ENTERキーだけの場合:次の段落へ

SHIFT+ENTERキー:改行

SHIFT+ENTERキーを押します。
そうすると、このように、改行されます。

ENTERキーだけの場合:次の段落へ

ENTERキーを押します。


そうすると、このように、次の段落に移動します。

ENTERキーばかりだと、間延びして読みにくいので、改行しつつ、文章のまとまりを意識することで読みやすい記事になります。

⑥:行間スペース

⑥:行間スペース

ブロック右の「+」→「スペーサー」をクリックすればOKです。(※一覧になければ「スペーサー」と検索すれば表示されます)

スペーサーの役目は、わざと余白をつくることです。
下記にわかりやすい比較画像を作りました。

左の文章は、行間が詰まってると読みづらいですね。もう、目が痛い。
読みにくいと言うより、読みたくない・・・。

右の文章はスッキリ感があり、違和感ないことから、スペーサーで余白をつくることでスッキリさせることは超重要。

スペーサーの高さを50〜60あたりに設定して、余白を作れば、スッキリした記事になります。

⑦:埋め込み

  • 商品紹介
  • Twitter
  • リンクカード

上記の3つを埋め込むことで、見た目にも、記事的にも読みやすくなります。

商品紹介

商品紹介

ブロック右の「+」→「カスタムHTML」をクリックして、アフィリエイトリンクや商品紹介リンクを貼り付けます。(※一覧になければ「スペーサー」と検索すれば表示されます)

エディタ画面では文字列で見えますが、記事画面だと下記のようになり、本など商品紹介ができます。

上記のような商品リンクは、もしもアフィリエイトのかんたんリンクを利用しており、無料会員登録すると使えるようになります。

上記画像のように、かんたんリンク画面で検索して、表示されたコードをカスタムHTMLにコピペするだけでOK。

収益を上げるためのアフィリエイトリンクも同様にコピペするだけでOK。アフィリエイトリンクは、各ASPに登録すれば使えます。

おすすめのASPは【結論】アフィリエイトASPおすすめ10社【これだけ押さえれば完璧】の記事で解説してるので、参考にしてください。

Twitter

ブロック右の「+」→「Twitter」をクリックして、埋め込みたいTwitterのURLを貼り付けて、埋め込みボタンをクリックすれば完了。(※一覧になければ「Twitter」と検索すれば表示されます)

TwitterのURL

Twitterを開き、掲載したいツイートのURL(上記画像の枠)をコピペするだけです。

上記のように、Twitterカードが表示されます。

Twitterを埋め込むこと、独自性を出したり、第3者の意見がわかりやすくなり、記事の信頼性につながるので、活用しましょう。

リンクカード

ブロック右の「+」→「WordPress」をクリックして、埋め込みたい記事URLを貼り付けて、埋め込みボタンをクリックすれば完了。(※一覧になければ「WordPress」と検索すれば表示されます)

ブログテーマによっては「ブログカード」という名前の場合もあり、以下のようにカード型リンクで別記事が紹介できます。

» 【ド素人OK】10分で出来るWordPressブログの作り方【初心者向け】

あわせて読みたい
【ド素人OK】10分で出来るWordPressブログの作り方【初心者向け】
【ド素人OK】10分で出来るWordPressブログの作り方【初心者向け】こんな悩みを解決します。本記事の内容WordPressブログの作り方【写真付きで詳しく解説】WordPressブログを作ったら最初にすべき設定この記事を書いてる僕は、38歳から...

見た目にわかりやすいので、テキストリンクと合わせて使うのもオススメです。

以上が、記事を読みやすくするための装飾方法でした。全てよく使う項目ばかりなので、試してみてください。

WordPressブログの投稿手順

WordPressブログの投稿手順

記事の書き方・装飾方法がわかれば、あとは投稿するのみ。

投稿前に最終チェックをかねて、最後に3つの作業をします。

  • ①:パーマリンクの設定
  • ②:プレビューで確認
  • ③:記事を投稿する

①:パーマリンクの設定

パーマリンクとは記事URLのこと。

本記事の場合だと「https://porikenblog.com/wordpress-blog-how-to-write」のことで、「wordpress-blog-how-to-write」の部分を設定することができます。

①:パーマリンクの設定

右サイドバーの「パーマリンク」から設定します。
※編集できない場合は、一度下書き保存すると編集できるようになります。

URLは日本語はNG。小文字の英語にしましょう。
決め方はブログタイトルや、狙うキーワードから選ぶだけ。

  • ブログ 継続:blog-continue
  • ブログ 書き方:blog-how-to-write
  • おすすめ簡単料理:easy-cooking-recommended

こんな感じで、日本語を英語にする。わからない単語はGoogle翻訳で調べて、「-(ハイフン)」でつなげればOKですね。

②:プレビューで確認

②:プレビューで確認

投稿前の最終チェック。

右上の「プレビュー」→「新しいタブでプレビュー」をクリックして、内容を最終チェックできます。

②:プレビューで確認2

文章を実際に読んで、誤字脱字や、言い回しを最終確認。

文章の確認は、口に出して読んでみるのがオススメ。
声が出せないなら、脳内音読でもOKです。

読むと、変な箇所がすぐわかりますよ。
僕も毎回、チェックすると手直しばかりです。笑

音読してOK、装飾OKなら、チェック完了。

③:記事を投稿する

③:記事を投稿する

プレビュー横の「公開」→「公開」をクリックして、記事の投稿完成です。
お疲れさまでした😊

予約投稿を活用する

プレビュー横の「公開」→下にある「公開:今すぐ」をクリックして、予約日付を入力します。

入力が終わると上の「公開」が「予約投稿」に変わってるので、クリックして予約完了。

毎回、同じ時間に投稿すると「このブログは決まった時間に更新されてるな」と認知されやすくなるので、予約投稿は使い方次第で効果アリです。

まとめ:習うより慣れろ!まずは手を動かそう。

まとめ:習うより慣れろ!まずは手を動かそう。

今回はWordPressブログの書き方から、装飾、投稿まで解説してきました。

こうして文章にして読むと、難しく感じるかもですが、実際に手を動かすと「なんだ、こんなことか。簡単だな。」となるので、まずは慣れるために記事を書くと、手が勝手に覚えます。

それでは、今回は以上です。
ブログに慣れる一番の方法は「記事を書くこと」なので、このブログと一緒に積み上げがんばりましょうね。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
タップできる目次
閉じる