お知らせ

公開日2026.10.17

更新日2026.10.17

装飾一覧

記事で使える見出し・補足・表・FAQ・吹き出し・監修者カードなど、22種類の装飾の表示を確認できます。

メディア、お知らせ、導入事例、固定ページで使える記事パーツをまとめました。紫のアクセント、やさしい背景、角丸、読みやすい余白をサイトのデザインに合わせています。

監修者情報には、一神友郎さんの公式プロフィールに基づく情報を使用しています。このサンプルページ自体の監修実績を示すものではありません。引用人物・料金・感想・事例は表示確認用の入力例であり、実際の利用者の声や提供条件を表すものではありません。

更新日: 2026年10月17日
確認時点: 表示確認用
調査数: 22種類のパーツ
レビュー: PC・タブレット・スマートフォン

この記事でわかること

記事の情報を整理するパーツ
比較・手順・FAQの見せ方
プロフィール・引用・CTAの見せ方

見出しと強調

H2は記事の大きな区切り。サイトの紫と淡い背景で、読む位置を見つけやすくします。

H3は、ひとつのテーマを詳しく説明

H3は下線で区切り、本文から自然に目を移せる強さにしています。

H4は、補足や小さな論点に

H4は控えめな紫の見出しです。本文の大切なポイントは、文章の途中で強調できます。

補足とリスト

補足・おすすめ・注意・警告

補足

補足の入力例です。確認した条件や、読み進めるための小さなヒントを書きます。

✓

箇条書き・チェック・番号

箇条書きの例

記事のテーマを決める
伝えたいポイントを整理する

チェックリストの例

文章を読み返した
リンク先を確認した
スマートフォンで表示を確認した

番号付きリストの例

素材を用意する
内容を編集する
公開前に確認する

手順と機能

素材を用意
最初のステップ
公開に使う音声や画像を整理します。
編集する
次のステップ
伝えたい部分を選び、テキストを読みやすく整えます。
確認する
公開の前に
画面のサイズを変えて、文章と表示を確認します。

♪

音声

聴きどころを伝える構成に。

✂

編集

短い動画に必要な情報を整理。

テキスト

字幕や見出しを読みやすく。

✓

確認

公開前に内容をチェック。

比較と料金カード

良いところ

短い時間で伝えやすい
SNSで紹介しやすい

確認しておくこと

素材の権利確認が必要
内容の見直しが必要

おすすめの表示例

表示サンプル A

おすすめ表示のあるカード

0円 / 表示例

実際の料金を表すものではありません

機能の入力例 A
機能の入力例 B

対象外の機能の入力例

サンプルのリンク先を見る

このページ内の表示例へ移動します

表示サンプル B

通常のカード

要確認

機能の入力例 C
機能の入力例 D

条件を確認する

記事から使える共通CTAの表示例

リンク先や文言は記事ごとに指定できます

FAQ・表・用語

よくある質問

このページは何のサンプルですか？

記事で使えるショートコードと見出しの表示サンプルです。

どのページで使えますか？

メディア、お知らせ、導入事例、固定ページの本文で使えます。見出しの例に戻ることもできます。

入力した文章は変更できますか？

はい。本文と各属性に、記事で伝えたい内容を入力できます。

比較表

スマートフォンでは、表の中を横にスクロールして確認できます。

パーツの比較表（表示例）

確認項目	サンプル A	サンプル B	参考リンク
文章の入力	◎ 対応例	○ 対応例	見出しへ
画像の表示	○ 対応例	× 対象外の例	WordPress公式ドキュメント
公開前の確認	○ 確認する	○ 確認する	表示例へ

◎・○は対応例、×は対象外の例です。提供機能や条件を表すものではありません。

文章を読む表（左揃え）

説明文や手続きの内容が長くなる表には、align="left"を指定します。

手続きの入力例

区分	必要なもの
本人による請求	本人確認書類のコピー
代理人による請求	委任状と代理人本人を確認できる書類

CTA: 次に進むためのリンクやボタンを指します。
ショートコード: 本文に書いた短い記法から、共通の表示パーツを出力します。
レスポンシブ: 画面幅に合わせて読みやすい並びに調整することです。

引用と編集部メモ

番組の聴きどころを、短い文章で紹介したいと思いました。

これは実際の利用者の感想ではなく、引用パーツの表示例です。

表示例のユーザー引用パーツの入力例

導入事例の表示例

背景、取り組み、確認した結果を、順番に書くと伝わりやすくなります。

業種: メディア（表示例）
職種: 編集担当（表示例）
規模: チーム（表示例）
プラン: サンプル
期間: 表示確認
補足: 実際の導入実績ではありません

編集部メモの例

イニシャルを使う表示

公開前に、見出し・文章・リンクを確認しましょう。

画像を使うメモの例

プロフィール画像の表示サンプル

画像を使う場合は、内容が伝わる代替テキストも指定します。

左右の吹き出し

左と右の吹き出しを交互に置くと、質問と回答などの会話を表現できます。人物の写真・名前・本文をそれぞれ指定できます。

読者

音声からショート動画を作るには、何を用意すればいいですか？

編集部

まずは音声ファイルを用意しましょう。伝えたい場面を選ぶと、動画の構成を考えやすくなります。

読者

長い文章や改行も使えますか？

編集部

はい。画面幅に合わせて文章が折り返されます。

段落や強調、参考リンクも使えます。

出典・参考資料

本文や表、画像の近くに、参照した資料を添えるためのパーツです。「出典：」に続けて資料名を表示します。実際の記事では、参照した資料名とURLを入力してください。

出典：WordPress公式ドキュメント

出典：編集時に参照した紙の資料（入力例）

プロフィールと記事末尾

プロフィール

WebデザインとUI/UX設計を25年以上手がけ、企画から制作・運用まで幅広く支援。2017年にYouTubeで発信を始め、写真やカメラの情報を届けています。

Radio Choppitの共同開発では、製品企画、プロダクト設計、UI/UXデザイン、PR、コンテンツ運用を担当しています。

公式プロフィールを見る

複数の監修者を表示する場合は、監修者1人ごとにsupervisorショートコードを追加します。名前・肩書き・紹介文・写真・プロフィールURL・SNSのURLを、それぞれのショートコードで指定できます。

サンプルのリンク先

ボタンやプロフィール、表のリンクが、このページ内に移動することを確認できます。

編集ポリシーのリンク先の表示例

実際の記事では、サイトの編集ポリシーページのURLを指定してください。