記事の手順番号が見えないときは？順序と公開表示の確かめ方

番号付きで書いたはずの手順が、公開ページでは番号なしに見える。まず、保存した手順と、実際に見える番号を分けて確かめましょう。

順に行う手順は番号付きリストで作り、項目の並びを保存します。そのうえで公開ページを開き、番号・字下げ・文章を確認します。構造があるのに番号が見えない場合は、そのリストの表示指定を調べます。

順にする必要がある操作を決める

番号付きリストは、先に行うこと、次に行うことを順に伝える書き方です。順番を入れ替えると作業の意味が変わるなら、番号を付けます。「案内文を開く」の後に「時間を直す」と読む手順は、その例です。

一方、「写真を用意したか」「受付時間を確認したか」のように、確認する順が決まっていない項目なら、丸印などの箇条書きで足ります。本文を見て、手順と点検項目を区別してから、リストの種類を選びましょう。W3Cのリストの説明も、順序が必要なものと不要なものを分けています。

文章へ「1.」「2.」と直接入力しただけでは、項目のまとまりや順序が、ページの構造にも設定されているとは限りません。数字が見えるかに加えて、どのリストの、どの項目として保存するかを確認します。

WordPressで番号付きの手順を作る

まず、編集してよい作業用ページで、手順を入れる場所を開きます。WordPressのブロックは、文章やリストなどを置く部品です。「＋」から「リスト」を選ぶか、空のブロックで「/list」を使って、List block（リストのブロック）を追加します。

リストのブロックを選び、丸印の箇条書きではなく、番号付きに切り替えます。一つの操作を一つの項目へ書き、次の項目を追加します。List Itemは、その一項目を指します。画面の名称や使える設定は、利用中のWordPressとテーマで照らしてください。WordPress公式のリストの操作説明が確認先です。

入力したら、項目ごとの移動操作で、読む順番が意図どおりかを見ます。横へ下げた項目は、内側のリストになっている場合があります。単に文字の位置をそろえるために、操作の順序や階層を変えないようにします。

番号の開始値は、最初に何番を表示するかの指定です。逆順の設定は、数字を大きい方から並べます。続きの手順を途中の番号から始める場合など、原稿で意図した順と設定が合うかを確かめます。全リストを一律に「1から」に戻す作業ではありません。

保存した項目と番号の設定を確かめる

下書きを保存したら、項目の順と文章をもう一度読みます。番号の付いた段落が並んでいるだけなのか、番号付きリストとして保存されているのかを分けて確認します。

HTMLは、ページの文章や部品を表す記述です。番号付きリストを表すタグはol、各項目はliです。タグは部品の始まりと終わりを示す目印。権限のある制作担当は、対象ブロックのHTML表示などで、olの内側にliが並んでいるか、意図しない途中分割がないかを読みます。MDNのol要素の説明では、順序が意味を持つリストと開始値などを確認できます。

以下は、書き方を説明するために二項目だけを置いた別のコード例です。後の架空記録にある「保存項目数3」を、この二項目へ置き換えたものではありません。

<ol>
  <li>案内文を開く</li>
  <li>時間を直す</li>
</ol>

原稿に続きがある場合は、その原文と項目数を照合します。今回の架空記録では、保存項目数は3ですが、提供されている文章は先頭の二項目だけです。三番目の手順文は提示されていないため、推測して埋めません。

公開ページの番号と文章を別に見る

保存と公開表示は別の確認です。下書きのプレビューだけで終えず、公開してよい段階になったら、訪問者が使うページを同じ幅で開きます。番号が見えるか、文章が画面外へはみ出さないか、字下げで項目のまとまりが分かるかを見ます。

下の図は、別々の営業時間ページを表す架空記録です。店舗案内Aは番号の表示あり、店舗案内Bは番号の表示なし。どちらも保存されたタグはolで、項目数は3と記録されています。二つのページは修正前後の実験ではありません。

PC用の図を原寸で開く / スマホ用の図を原寸で開く

Bの計算済みの番号の形式はnoneです。計算済みとは、複数の表示指定を踏まえて、その要素に適用された値のこと。制作担当はブラウザーの開発者ツールで対象リストを選び、Computed（計算済み）などからlist-style-typeを確認します。この項目は番号や丸印の形式を指定し、noneは項目の目印を表示しない値です。MDNのlist-style-typeの説明で意味を照らせます。

ただし、Bの個別原因は未確認です。noneという値だけで、どのテーマのどの指定が原因か、直せばすべての環境で読めるかまでは決まりません。数字が見えないことを、手順本文が消えたことにも置き換えません。

対象のリストだけ、構造と表示を直す

先に、文章が番号付きの手順として保存されているかを確かめます。段落へ数字を手入力していただけなら、元原稿の順を保ってリストへ整えます。すでにolとliになっているなら、内容を作り直す前に、対象リストに適用された表示指定を調べます。

CSSは、番号の形式や余白など、部品の見た目を指定する記述です。制作担当は、対象リストに適用されているlist-style-type、左側の余白、外にはみ出た部分を隠す指定などを、画面の現象と対応させて読みます。項目が階層化されている場合は、内側のリストも別に見ます。

直す前の保存版と、変更するリスト・表示指定の範囲を控え、作業用の場所で必要な箇所を直します。元原稿に必要な開始値や逆順は保ちます。数字を本文へ重ね書きして、その場の見た目だけを合わせないようにしてください。

全ページのリストやテーマをまとめて初期化する必要があるとは限りません。関係のないメニューや箇条書きまで番号付きにしないため、対象を限定した変更で、番号・字下げ・本文がどう変わるかを確かめます。

同じ条件で読み直し、公開先でも確かめる

直したら、同じページ、同じ手順、同じ画面幅で読み直します。最初の項目から次へ自然に進めるか、番号の抜けや重複がないか、文章の折り返しで順が分かりにくくならないかを見ます。関連する内側のリストも確認します。

編集画面で見えたことと、訪問者が公開先で読めたことは別です。作業用ページの結果を、そのまま公開先の結果に移しません。公開先での表示は、実際に開いて確認した後に記録します。今回の三例目は未取得の予定なので、番号の表示を「なし」や「正常」とは決めていません。

読み上げを使う場合は、実際の利用環境でも、項目や順序が伝わるかを確かめます。olが保存されているだけで、読み上げ成功やすべてのアクセシビリティ基準への適合が確認できたわけではありません。

記事の手順以外にも、キー操作やフォームなどの広い点検が必要なら、事業サイトの操作と表示を点検する記事へ進めます。ここでは、今回の番号付き手順を、保存構造と公開表示の両方から確認するところまでを扱います。

全三記録は図の下の補足で、保存形式と番号の表示を項目ごとに読み比べられます。項目数は三つという記録を保ち、原票にない第三の手順文は追加していません。