記事ページの表示サンプル — 見出し・リスト・表・画像などの見え方
このページは、お知らせ記事で使える装飾の見え方を確認するためのサンプルです。パソコンとスマートフォンの両方で、文字の大きさや余白のバランスをご確認ください。
本文は通常の段落です。ブロックエディタで文章を入力すると、この見た目になります。文中では太字、斜体、下線、打ち消し線、マーカー、インラインコード、リンクといった装飾が使えます。上付き文字※1や下付き文字2、Ctrl
のようなキー表記にも対応しています。
見出し1
いちばん大きな見出しです。ただし実際の記事では使わないでください。ページの見出し1は、上にある記事タイトルがすでに使っているためです(1ページに見出し1は1つが原則です)。ここでは大きさの確認のために置いています。
見出し2(記事の大きな区切り)
記事の中で最もよく使う見出しです。本文はこの「見出し2」から使いはじめてください。
見出し3(見出し2の中の小分け)
見出し2の下にぶら下がる中見出しです。話題が変わるところで使うと、読み手が迷いません。
見出し4(さらに細かい項目)
手順の各ステップや、細かい条件を並べるときに使います。
見出し5
ここまで細かく分けることは多くありませんが、必要なときのために用意しています。
見出し6(ラベル・注記の見出し)
補足やラベルとして使う、いちばん小さな見出しです。
リスト(箇条書き・番号つき)
箇条書き
- 診察券と保険証をお持ちください
-
お薬を服用中の方は、お薬手帳もあわせてご持参ください
- 入れ子にすると、点が白抜きに変わります
- 階層の深さが見た目で分かるようにしています
- 駐車場は医院前に8台ございます
番号つきリスト
- 受付で問診票をお渡しします
-
お口の中を確認し、必要な検査を行います
- 入れ子の番号は a. b. c. に変わります
- 手順の中の細かい分岐に使えます
- 検査結果をご説明し、治療方針を一緒に決めます
定義リスト
- 診療時間
- 平日 9:00〜12:30 / 14:00〜18:00
- 休診日
- 木曜午後・日曜・祝日
引用
歯医者さんは、少し緊張する場所かもしれません。だからこそ私たちは、清潔で明るい空間と、やさしい言葉でのご説明を大切にしています。
しらなみ歯科医院 院長
地域に根ざした、安心できる治療を提供したい。
院長 峰元 洋光
画像
画像+キャプション
文章に回り込ませる配置
画像を「左寄せ」にすると、パソコンでは文章が右側に回り込みます。スマートフォンでは回り込まず、画像が横幅いっぱいに表示されるので、文字が細長く詰まってしまう心配はありません。
カウンセリングルームでは、検査結果の画像を一緒に見ながら、治療の選択肢をご説明します。分からないことは何度でもお尋ねください。
ギャラリー(複数枚を並べる)
メディアと文章
駐車場は医院前に8台
お車でお越しの際は、医院前の駐車場をご利用ください。道路沿いの時計付きの看板が目印です。満車の場合は受付までお声がけください。
表(テーブル)
| 診療時間 | 月 | 火 | 水 | 木 | 金 | 土 |
|---|---|---|---|---|---|---|
| 9:00〜12:30 | ● | ● | ● | ● | ● | ● |
| 14:00〜18:00 | ● | ● | ● | — | ● | ▲ |
列が多い表は、スマートフォンでは横にスクロールして全体をご覧いただけます。
ボタン
囲み(注意書き・補足)
ご来院前のお願い
発熱や咳の症状がある場合は、恐れ入りますが事前にお電話でご相談ください。お薬を服用中の方は、お薬手帳をお持ちいただけると安心です。
背景色を変えると、補足やお願いごとを本文から切り分けられます。色は医院のトーンに合わせた2色を用意しています。
折りたたみ(クリックで開く)
駐車場はありますか?
医院前に8台分の駐車スペースをご用意しています。満車の場合は受付までお声がけください。
予約なしでも受診できますか?
お受けしていますが、お待たせする場合があります。お電話でご予約いただくとスムーズです。
2カラム
左のカラム
パソコンでは横に並び、スマートフォンでは縦に積み重なります。料金表や比較の説明に使えます。
右のカラム
それぞれのカラムの中でも、見出し・段落・リストなど通常のブロックがそのまま使えます。
区切り線
既定の区切り線(中央の短い線)
幅広の区切り線
点の区切り線
整形済みテキスト・コード
しらなみ歯科医院 〒898-0011 鹿児島県枕崎市緑町143 TEL 0993-72-4321
文字の配置と大きさ
中央寄せの段落です。
右寄せの段落です。
小さい文字。注記や補足に使います。
特大の文字。色も変えられます。
※1 このページはレイアウト確認用のサンプルです。記載している内容は実際の診療内容を示すものではありません。