WordPressで記事を書く方法。テキスト装飾やブロックの使い方も解説!

当記事では、WordPressで記事を書く方法を解説していきます。

いわゆる「操作方法」という意味合いで、記事を書くうえで使う機能を一通り解説していますので、これからWordPressで記事を書くという方はぜひ参考にしてみてください。

時間割

\ この記事を書いた人 /

たくろー
Webディレクター
ライティングから編集、校正、ディレクション、SEO対策、アクセス解析、撮影、画像編集、Web制作と、なんでもやってるwebディレクターです。
現在はIT企業でインハウスSEO担当兼、メディア運営責任者・編集者として働きながら、札幌でWebライティングの講師として活動。「良いWebライターが増えれば仕事が楽になるなぁ」と思いながら、一人でひっそりと文亭を運営中。著書『Webライターが書いてはいけない文章28選』

WordPressの記事とは

WordPressの記事ページには2種類あります。

まずは違いを知っておいてください。

投稿ページ|一覧に表示させる記事

WordPressのメニュー「投稿→投稿一覧」と進んだところから編集できる記事ページは「投稿ページ」です。

「新着記事一覧」に表示される、一般的なブログ記事を書くときは投稿ページを使います。

固定ページ|一覧に表示させない記事

WordPressのメニュー「固定ページ」の一覧から編集できるのが「固定ページ」です。

新着記事一覧に表示されず、プロフィールページやプライバシーポリシー、免責事項などのページを書く際に使います。

WordPressの記事を書くエディタの種類

WordPressの記事を書くときに使うエディタ(編集画面)には、下記の2種類があります。

  • クラシックエディタ
  • ブロックエディタ

今回の記事では「ブロックエディタ」を取り上げて書き方を解説していきますが、一応違いを知っておいてください。

クラシックエディタ

クラシックエディタは、以前のバージョンのWordPressに搭載されていたエディタです。今はプラグインを入れると使えるようになります。

例えば「ワード」や「Googleドキュメント」と似たような、昔ながらの文章エディタの体裁をしています。

「ビジュアル」と「テキスト」を切り替えて、HTMLタグを直接書きやすいのがメリットですが、一方でコードを知らなければ装飾しにくいのがデメリットです。

まだまだ愛好家も多いのですが、どんどん対応するWordPressテーマは少なくなってきているのが現状です。

ブロックエディタ

ブロックエディタは、WordPressにデフォルトで搭載されているエディタです。HTMLなどがわからなくても、直感的に操作しやすいこともあり、現在主流になっています。

現代の国産WordPressテーマはブロックエディタを基準にしているものがほとんどですので、ブロックエディタを使えるようになっておきましょう。

WordPressで記事を書く方法

まずはWordPressで記事を書くうえで、ごく基本的な書き方・操作を解説していきます。

ここを押さえておけば、まずは記事を書いて公開できるようになります。

記事編集画面の開き方

WordPressの記事を書くには、まず編集画面を開く必要があります。

プロフィールやプライバシーポリシーなど、ブログの「記事一覧」に表示させない記事を書く場合は、メニューの「固定ページ」へ進みます。

WordPressの固定ページ一覧画面

あるいは一般的なブログ記事を書く場合は、メニューの「投稿」のページに進みます。

WordPressの投稿ページ一覧画面

あらたに記事を書く場合は「新規追加」を。すでにある記事を編集する場合は、編集したい記事タイトルをクリックします。

試しにサンプル記事の「Hello world!」をクリックすると、下記のページへ。

Hello world!記事の編集画面

自由に編集できるようになります。あるいは「新規追加」を押すと、まっさらなページへ。

WordPress新規記事編集画面

ここから記事を書いていきましょう。

タイトルの書き方

WordPress記事のタイトルの書き方

タイトルを編集する場合、タイトル欄にカーソルを合わせて文字を入力します。

WordPress記事のタイトルの書き方

「タイトルは32文字以内を目処に端的に書く」というタイトルを付けてみました。(ちなみにGoogle検索結果で表示されるタイトル文字数のMAXが、だいたい32文字くらいです)

これでタイトルが書けました。

通常テキストの書き方

WordPress記事のテキストの書き方

普通のテキストを入力するには、空白ブロックを直接クリックするか「+」からメニューを開いて「段落」を選択します。

あとは普通にテキストを入力するだけ。

WordPress記事のテキストの書き方

文字サイズの変更や太字装飾などもできますが、それは文字装飾の項目でまとめて解説します。

見出しの書き方

WordPress記事の見出しの書き方

適度に見出しで区切りながら、きれいな構成になるよう記事を書いていきましょう。

見出しを書くには「+」からメニューを開いて「見出し」を選択して記入します。

WordPress記事の見出しの書き方

通常のテキストを入力してから、そのブロックを「見出し」に設定することも可能です。操作は下記の通り動画にしました。

なお設定した見出しはデフォルトだと「H2」になっています。これはH3やH4に切り替えるには、下記の通りメニューから選びます。

WordPress記事の見出しの書き方

H1はタイトルに使われる見出しですから、なにかあえて狙いがない限り、記事中では使わないようにしましょう。

基本的には下記の3つで整理していくことをおすすめします。

  • H2:大見出し
  • H3:中見出し
  • H4:小見出し
WordPress記事の見出しの書き方

保存の仕方

書いた記事はこまめに保存しておきましょう。右上の「下書き保存」を押します。

WordPress記事の下書き保存の仕方

もし保存せず、ふいにブラウザを閉じてしまったりすると、せっかく書いた記事が台無しになります。

気づいたら保存ボタンを押す癖をつけていきましょう。

プレビューの見方

書いた記事は、実際の見た目をチェックしておくのも大切です。PC表示とSP(スマホ)表示の両方を確認しましょう。

右上のプレビューから「デスクトップ・タブレット・モバイル」を切り替えると、現在の編集画面がそれぞれのデバイスサイズに変更されます。

しかし実際に表示される画面を確認するには「新しいタブでプレビュー」からプレビューページを開くことをおすすめします。

WordPress記事のプレビュー表示方法

設定しているWordPressテーマや外観設定に応じたプレビュー画面が表示されます。

WordPress記事のプレビュー表示方法

プレビュー画面をスマホ表示で確認するには、GoogleChromeの「検証」機能を使うのがおすすめです。

「右クリック→検証→スマホマークをクリック」の手順ですが、下記の通り動画にしました。

PC表示はもちろん、SP表示でもきれいに表示されるよう調整することが大切です。

パーマリンクの編集方法

パーマリンク(記事ごとのURL)は、右側メニュー「パーマリンク」項目内の「URLスラッグ」を編集します。

WordPress記事のパーマリンク編集方法

「パーマリンク」項目自体が見当たらない場合、メニューがブロックではなく「投稿」になっているか確認してください。

なおURLスラッグ編集部分は、一度「下書き保存」を押していないと編集できるようになりませんので、保存してから編集しましょう。

それでも編集できるようにならない場合、そもそもパーマリンクの設定が必要な場合もあります。

WordPress記事のパーマリンク設定

設定については、また別の記事で解説します。

記事ごとのパーマリンクは、できれば日本語など2バイト文字ではなく、英数字で記事内容を示す文字列にしておくのがおすすめです。

WordPress記事のパーマリンク編集方法

記事内容を示すパーマリンクにしておくと、読者がURLを見たときにも安心感がありますし、後々Googleアナリティクスなどで分析するときにも便利です。

カテゴリーの設定方法

記事のカテゴリーを設定するには、右側メニュー「カテゴリー」から選択します。

WordPress記事のカテゴリー設定方法

あらかじめ設定していたカテゴリーが一覧表示されており、その中から選択できます。また、新規カテゴリーを追加することもできます。

なお投稿ページから新規カテゴリーを追加した場合、のちほどカテゴリーページのURLを編集しておくことをおすすめします。

WordPress記事のカテゴリーページ設定方法

カテゴリ名を示す英数字がおすすめです。なお、できれば検索エンジンにインデックスされる前に変更したいので、早めに修正しておきましょう。

タグの設定方法

右メニューの「タグ」から、任意のタグを設定できます。

WordPress記事のタグの書き方

すでに設定してあるタグを設定することもできますし、あらたなタグを設定することもできます。

あらたなタグを設定した場合は、カテゴリー同様にのちほどURLスラッグを修正しておくことをおすすめします。

WordPress記事のタグページ設定方法

タグページも、タグ内容を示す英数字文字列にしておくと便利です。

アイキャッチ画像の設定方法

右メニュー「アイキャッチ画像」から、記事冒頭に表示する画像を設定できます。

WordPress記事のアイキャッチ画像設定方法

実際に画像を設定すると、正方形のアイコンで設定したアイキャッチ画像が表示されます。

WordPress記事のアイキャッチ画像設定方法

ここで設定した画像は、プレビューで見ると確認できます。

WordPress記事のアイキャッチ画像設定方法

表示のデザインは、WordPressテーマや設定に応じて変わります。

抜粋の書き方

抜粋文を書くには、右側メニュー「抜粋」から入力します。

WordPress記事の抜粋の書き方

ここで書く抜粋文は、投稿記事一覧などで表示されます。

WordPress記事の抜粋の書き方

抜粋文を書かなかった場合、記事の本文テキストが冒頭から自動的に表示されます。無理に書く必要はありません。

なおSEO対策で設定するメタディスクリプションとはまた別物ですから、それだけ注意しておいてください。

公開・下書き・非公開の切り替え方

記事が書きあがったら、右上の「公開」を押すと公開されます。タイトルと記事本文を執筆するほか、最低限パーマリンクの設定は済ませてから公開しましょう。

なお公開設定を「今すぐ」から切り替えることで、記事を公開する時間を指定できます。

WordPress記事の公開日時設定方法

また「表示状態」を切り替えて「非公開記事」や「パスワード保護記事」として公開することもできます。

WordPress記事の公開状態選択方法
表示状態
  • 公開:誰からでも見れるように公開します
  • 非公開:WordPressにログインしている人にだけ見れる状態で公開します。記事一覧にも、ログインしている人からしか見れません
  • パスワード保護:記事タイトルは一覧に表示されますが、パスワードを入れなければ記事内容が見れない状態で公開します

場合により使い分けてください。

WordPress記事本文テキストの装飾方法

次に、記事本文のテキストを装飾する方法を解説していきます。

太字

WordPress記事のテキストを太字にする方法

テキストを太字に設定する場合、設定したいテキストを選択して、メニューの「B」を押します。

斜体

WordPress記事のテキストを斜体にする方法

テキストを斜体(イタリック)に設定する場合、設定したいテキストを選択して、メニューの「/」を押します。

打ち消し線

WordPress記事のテキストに打ち消し線を引く方法

テキストに打ち消し線を引きたい場合、設定したいテキストを選択して、メニュー下矢印から「打ち消し線」を選びます。

色変更

WordPress記事のテキスト色を変える方法

テキストの色を変更したい場合、設定したいテキストを選択して、メニュー下矢印から「ハイライト」を選びます。テキスト色と、テキストの背景色を変更できます。

リンク

WordPress記事のテキストにリンクを設定する方法

リンクを設定したい場合は、設定したいテキストを選択して、メニューのリンクボタンを押します。

左よせ・中央寄せ・右よせ

WordPress記事のテキストを中央よせや右寄せにする方法

テキストを中央よせや右寄せにしたい場合、設定したいテキストを選択して、メニューの3本線マークを押して選択します。

その他のブロックを使った書き方

WordPressには、その他にも色々と便利なブロックがあります。

より見やすくわかりやすい記事を書くために、使い方を押さえておきましょう。

引用ブロックを使った書き方

WordPress記事で引用ブロックを使う方法

出典がある引用テキストを掲載する場合は、引用ブロックを使います。具体的な書き方は下記の記事を参考にしてください。

リストを使った書き方

WordPress記事でリストを使う方法

物事を箇条書きで並べるときには、リスト機能を使うと便利です。

テーブル(表)を使った書き方

WordPress記事でテーブルを使う方法
WordPress記事でテーブルを使う方法

整然とデータを並べるときは、テーブル機能を使います。比較表を作るときなどに便利です。

カスタムHTMLの書き方

WordPress記事でカスタムHTMLを使う方法
WordPress記事でカスタムHTMLを使う方法

HTMLを直接記入するときは、カスタムHTMLブロックを使います。例えばアフィリエイトリンクなどを掲載するときに便利です。

WordPressで記事を書いていこう!

ここまでの操作方法を覚えておけば、あとは文章の中身だけです。

WordPressの操作方法を理解しておけば、Webライターとして受注できる仕事の幅も広がりますから、ぜひ習得しておいて下さい。

記事をシェア
  • URLをコピーしました!
  • URLをコピーしました!
時間割