Skip to content

ボリュームの多い縦長記事をページ分割で読みやすくする方法

スマホを意識したページ作り

中身のある充実したページにしようと思えば思うほど、掲載する画像やテキストの量がどんどん増えていって、いつの間にか縦に長い巻物みたいなページになってしまうことって、意外とあったりするのではないでしょうか?

パソコンから閲覧する場合は、マウスで容易にスクロール操作できるので、よほど長くない限り、読みにくさはさほど感じないものですが、スマホの場合は、画面上に一度に表示できるテキストの量がそもそも非常に少ないことと、スクロール操作も指ではじくフリック動作が基本となるため、縦に長くなればなるほどスクロール速度の調節も難しくなってしまいます。

そこでよく用いられるのが、WordPressのページ分割機能というもので、ひとつの投稿ページを簡単に適度な長さに分割して表示してくれる、情報量の多いブログには欠かせない機能のひとつとなっています。

ブロックエディタでページ分割を行う方法

WordPressの投稿画面は、バージョン5.0からブロックエディター(グーテンベルクと呼称)と呼ばれる新しいエディタに変更されました。

それまでのワープロ感覚で入力できるエディターは、クラシックエディター(Classic Editor)という公式プラグインを導入することで今も引き続き利用可能です。ただ、あくまでも現在のメインは、文中の全ての要素をブロックと呼ばれるパーツ単位で視覚的に操作できるよう改良されたブロックエディターですので、これからWordPressでブログをはじめようとお考えの方は、最初からブロックエディターを利用したほうが将来性もあっていいように思います。

以下では、ブロックエディターによってページ分割を行うまでの流れを画像付きで記載しています。画像クリックで拡大表示できます。

分割する場所を決めます

赤い線のところでページを2つに分割します。

ブロックの挿入ボタン(+マーク)を表示させます

分割したい場所にマウスを近づけていくと、画像のように+マークが表示されます。この+マークは、マウスをあまり早く動かしてしまうと、すぐに消えてしまうので、ゆっくりと近づけて動かしてください。

+マークをクリック

+マークをクリックすると、その場所に挿入できるブロックの一覧が表示されます。

最初に表示されるのは、画像のように使用頻度の高い6種類のブロックのみなので、ここにページ分割のブロックが出てこない場合は、すぐ下にあるすべて表示をクリックします。

左の画像では、直近のブログパーツとして以下の6つのブロックパーツが表示されています。

  • 段落
  • スペーサー
  • 見出し
  • 画像
  • リスト
  • メディアとテキスト

ページ分割のブロックがないので、その下にあるすべて表示をクリックします。

左サイドにブロック一覧が表示されます

編集画面の左サイドに、使用可能なブロックの一覧がアイコンとともに一覧表示されます。ページ分割のブロックはまだ見えないので、スクロールバーを下方向へスクロールして探します。

下方向へスクロール

「ページ区切り」と表記されているブロックが、ページを分割するためのブロックです。見つけたらクリックします。

ページ分割完了

ブログ本文中に、改ページと表記されたページ分割ブロックが挿入されました。

操作はこれで完了ですが、ブロック挿入後に、分割する場所を変えたい場合や、分割を取り消したい場合は、当該ブロックを選択すると画像のようにメニューが表示されるので、赤丸の部分をクリックします。

ブロックのオプションメニューを表示したい場合は・・・

選択したブロックに対するオプションメニューが表示されます。移動や削除のほかに、複製もクリックひとつで作成できます。

プレビュー表示でページの分割を確認する

投稿を更新(公開前の記事の場合は下書き保存)したらプレビュー表示して、ページが思った通り分割されているか確認します。

指定した場所にページャー(各ページへの連番リンク)が表示されました。

2ページ目です

2ページ目の画像です。

今回の事例では、ページャーのデザインがオレンジ色の丸形となっていますが、これはWordPressに導入しているテンプレートデザインの種類によって、それぞれ異なってきます。弊社ではページャーのデザインカスタマイズも随時承っていますのでお気軽にご相談ください。

クラシックエディターでページ分割を行う方法

旧来のクラシックエディターでページ分割を行う場合は、ブログの投稿編集画面を開いて、本文中のページを分けたい箇所に、以下のコードをコピーして貼り付けるだけとなります。

<!--nextpage-->

プラグインのClassic EditorがWordPressにインストールされていない場合は、あらかじめ以下のようにClassic Editorをインストールしておきます。

プラグインを追加します

プラグインの新規追加ページを開いたら、キーワード欄にClassic Editorと入力します。自動的にプラグインの候補が一覧表示されますので、その中からClassic Editorを探して、「今すぐインストール」ボタンをクリックします。

有効化します

有効化ボタンが表示されたら、そちらをクリックします。

ブログの投稿編集画面を開きます

プラグインのClassic Editorを有効化するだけで、左の画像のようにブログの編集画面がブロックエディターからクラシックエディターに変更されます。

画面右上に入力モードの切り替えタブがありますので、テキストモードにしてから分割したい箇所に上記のコードを挿入してください。

Category

Archive