ブロック | ユーザーガイド | シンプルテイスト

このページでは、投稿や固定ページで使用するブロック（テキスト・メディア・ウィジェット）を紹介いたします。

シンプルテイストは、WordPressをベースにして構築していますので、お知らせ記事、ブログ記事、そして新規の固定ページにてブロックエディタ（グーテンベルク）を活用して、直感的かつ柔軟にコンテンツを作成できます。
※ よろしければ同内容の管理会社AEDIのブログ記事もご確認ください。

各ブロックの機能や使い方を理解することで、記事やページの見やすさやデザイン性を向上させることができます。

段落（Paragraph）

段落ブロックは、文章を入力するための基本的なブロックです。

特徴

通常のテキスト入力が可能
文字の色、背景色、フォントサイズの変更が可能
改行する場合は「Enter」、段落内で改行したい場合は「Shift + Enter」

使い方のポイント

重要なキーワードを太字にすると、読者が重要な部分を把握しやすい
1つの段落を長くしすぎず、2〜3文ごとに改行を入れると読みやすくなる

見出し（Heading）

見出しブロックは、記事やページの構造を明確にし、読みやすさを向上させるために使用されます。

特徴

H1 から H6 まで6段階の見出しレベルを設定可能
H1 は通常ページタイトルに使用されるため、本文では H2 から H6 を使用するのが一般的
記事内の適切な場所に見出しを配置することで、読者が内容をスムーズに把握できる

使い方のポイント

検索エンジン（SEO）の観点からも、見出しを適切に使うことでコンテンツの構造を明確にできる。
H2 を大見出し、H3 を中見出し、H4 を小見出しとして活用すると整理しやすい

リスト（List）

リストブロックを使用すると、情報を箇条書きに整理できます。

特徴

箇条書きリスト（•）：簡潔なリストを作成する際に便利
番号付きリスト（1. 2. 3.）：手順を説明するときや、ランキングなどで活用

使い方のポイント

説明文が長くなる場合は、インデント（階層構造）を活用すると整理しやすい
リストの項目は短くし、必要に応じて改行や補足説明を加える

引用（Quote）

引用ブロックは、他の文章や情報源からの引用を示すために使用します。

特徴

一般的な引用ブロックは、文章を目立たせるデザインで表示
引用元を追加できる（例：「〜出典：○○」）
記事内の重要なメッセージを強調する用途にも利用できる

使い方のポイント

強調したいフレーズを囲むことで、読者の印象に残りやすくなる。
他のサイトや書籍からの引用を行う場合は、著作権に注意し、必ず引用元を明記する

コード（Code）

<code> タグを使用して、プログラムコードやスクリプトをそのまま表示できるブロックです。

特徴

HTML、CSS、JavaScript、PHP などのコードを整形された状態で表示可能
改行やスペースがそのまま反映されるため、コードのフォーマットが崩れない
テキストエディタと違い、ブラウザにコードが実行されることなく、読みやすく表示される

使い方のポイント

コードをハイライト表示するには、プラグイン（例：SyntaxHighlighter）が必要
プログラムのサンプルコードを記事内に掲載する場合に活用
pre タグと組み合わせることで、さらに視認性が向上

詳細（Details）

詳細ブロックは、クリックすると開閉するコンテンツを作成できるブロックです。

特徴

FAQ（よくある質問）のようなコンテンツに適している
折りたたみ機能を活用することで、ページの見た目をすっきりさせる

使い方のポイント

タイトル部分に短い質問を記載し、クリックすると回答が表示されるようにすると分かりやすい
長文を整理するためにも活用できる

整形済みテキスト（Preformatted）

整形済みテキストブロックは、入力したテキストの改行やスペースをそのまま保持し、フォーマットが崩れないように表示されるブロックです。

特徴

文章のスペースや改行をそのまま維持できる
フォントが等幅（モノスペース）になるため、テキストの揃え方を細かく調整できる
通常の段落ブロックとは異なり、ブラウザのスタイルによる影響を受けにくい

使い方のポイント

ソースコードやコマンド、フォーマットを崩したくない文章を表示するのに適している
通常の文章にはあまり向かないが、特定の配置を意図的に整えたいときに活用できる
コードブロックとは異なり、シンタックスハイライト（構文の色分け）はされない

プルクオート（Pullquote）

プルクオートは、引用をより目立たせるデザインのブロックです。

特徴

太字や装飾が加えられたデザインで、通常の引用よりも強調される
記事内で重要なメッセージやキャッチコピーを際立たせることが可能

使い方のポイント

文章の長さによって、中央揃えや左揃えを調整すると見た目が整う
記事内の強調したい部分をプルクオートで囲む

テーブル（Table）

表を作成するためのブロックで、データを整理して見やすくするのに役立ちます。

特徴

行と列を自由に追加・削除できる
セル内のテキストの中央揃え、左揃え、右揃えが可能
シンプルな表が簡単に作成できる

使い方のポイント

スタイルを調整するには、追加のCSSを適用することも可能
商品の比較表や価格表など、データを一覧化したいときに活用
行や列が多くなる場合は、余白や色を調整し、見やすさを保つ

詩（Verse）

詩ブロックは、詩や歌詞などの特殊な文章を記述するためのブロックです。改行や空白がそのまま保持されるため、詩的な表現に適しています。

特徴

入力した通りの改行やレイアウトを保持する。
フォントは等幅にならず、通常の文章と同じように表示される
詩や和歌、歌詞、短いセリフなどを美しく見せるために使える

使い方のポイント

詩や俳句、和歌など、リズムや行の流れが重要な文章に適している
文章のレイアウトを視覚的に伝えたい場合にも活用できる
一般的な文章には向かないため、適切な場面で利用することが重要

クラシック（Classic）

WordPressの旧エディタ（クラシックエディタ）を使用できるブロックです。

特徴

旧エディタのようなUIで、従来のテキスト入力が可能
「ビジュアル」「テキスト（HTML）」モードの切り替えができる
クラシックエディタのプラグインを使用しなくても、クラシックエディタの機能を利用可能

使い方のポイント

クラシックエディタに慣れている場合、新しいエディタよりも使いやすい場合がある
既存のクラシックエディタで作成されたコンテンツを編集する際に活用
HTMLやCSSを細かく調整する際に役立つ

画像（Image）

画像を挿入するためのブロックで、記事の視覚的な魅力を高めるのに役立ちます。

特徴

アップロード、メディアライブラリ、URL入力の3種類の方法で画像を追加可能
画像の配置（左寄せ、中央揃え、右寄せ）ができる
キャプション（説明文）を追加できる

使い方のポイント

記事の内容に合わせて適切な画像を選ぶ
画像サイズを最適化し、ページの読み込み速度を遅くしないようにする

ギャラリー（Gallery）

複数の画像をまとめて表示するためのブロックです。

特徴

カラム数を指定して、画像を均等に配置できる
画像のトリミング設定が可能

使い方のポイント

視覚的なバリエーションを増やすため、異なるアングルの写真を組み合わせると良い
旅行記や商品紹介ページなど、複数の写真を並べるときに活用

音声（Audio）

MP3、WAV、OGG などの音声ファイルを埋め込むためのブロックです。

特徴

直接音声ファイルをアップロード、または外部URL（SoundCloudなど）から挿入可能
プレイヤー形式で表示され、再生・停止ボタンを備える
ループ再生、音量調整、自動再生の設定が可能

使い方のポイント

ポッドキャストや音声ガイド付き記事などに最適
記事の内容を音声で説明したい場合に便利
自動再生はユーザーの操作性を損なう可能性があるため、適切に設定する

カバー（Cover）

カバーブロックは、背景画像または動画を設定し、その上にテキストやボタンを重ねられるブロックです。ページのヘッダーやセクションの見出しとして活用できます。

特徴

背景に画像または動画を設定できる
テキストを上に重ねられるため、視覚的に印象的なデザインが可能
背景にオーバーレイ（透明な色のレイヤー）を設定でき、テキストの視認性を向上させられる

使い方のポイント

目を引くビジュアルを作りたいときに最適
景の色やフィルターを調整し、テキストが読みやすいように工夫する
画像の代わりに動画を背景に設定することで、より動的なデザインが可能

ファイル（File）

PDF、Word、Excel などのファイルをアップロードし、ダウンロードリンクを提供するブロックです。

特徴

ファイルのダウンロードリンクを簡単に作成可能
「新しいタブで開く」オプションあり
PDFはブラウザ上でプレビュー表示も可能

使い方のポイント

資料やパンフレットの配布、マニュアルの提供に活用
ファイル名を分かりやすく設定すると、ダウンロード後の管理がしやすくなる
必要に応じて「パスワード保護」を設定することで、特定のユーザーだけがアクセス可能にできる

メディアとテキスト（Media & Text）

画像や動画とテキストを横並びで表示できるブロックです。

特徴

画像や動画の横にテキストを配置可能
レイアウトが整いやすく、デザイン性を向上できる
レスポンシブ対応で、スマホ表示でも自動調整される

使い方のポイント

商品説明やサービス紹介のページで、画像と説明文を並べて表示するのに最適
画像をクリック可能にして、詳細ページへ誘導することも可能

動画（Video）

YouTube、Vimeo などの動画を埋め込んだり、直接アップロードした動画を掲載できるブロックです。

特徴

外部動画サービスのURLを貼るだけで埋め込み可能
直接アップロードも可能だが、ファイルサイズが大きくなるため推奨されない
動画の開始位置を指定できる

使い方のポイント

動画のサムネイル画像を適切に設定し、視聴を促す
YouTubeやVimeoの動画を活用して、サーバー負荷を軽減
記事内で説明を補足する際に役立つ

ボタン（Button）

ボタンブロックは、リンクを設定できるボタンを作成するブロックです。CTA（Call to Action）の要素として使用し、訪問者の行動を促します。

特徴

ボタンの色、形、サイズをカスタマイズできる
リンクを設定し、外部ページや別の記事に誘導できる
ボタンのテキストを自由に編集できる

使い方のポイント

テキストリンクよりも目立たせたい場合に利用する
サイト内の重要なアクション（購入、問い合わせ、資料請求など）を誘導するために活用する
ボタンのデザインを統一することで、サイト全体のデザインの一貫性を持たせる

カラム（Columns）

複数のカラム（列）を作成し、コンテンツを整理できるブロックです。

特徴

最大6カラムまで作成可能
各カラム内に異なるブロックを配置できる

使い方のポイント

2列、3列レイアウトで情報を整理し、視認性を向上
画像とテキストをバランスよく並べるデザインに最適

グループ（Group）

複数のブロックをまとめて1つのグループとして扱えるブロックです。

特徴

グループ化することで、背景色や余白の調整が可能
一括でスタイルを適用できる

使い方のポイント

デザインの統一感を持たせるために活用

横並び（Row）

横並びブロックは、複数の要素を横方向に並べて配置できるブロックです。レイアウトの自由度を高め、視覚的に整ったデザインを作成するのに役立ちます。

特徴

テキスト、ボタン、画像などを横に並べて配置できる
配置オプション（左寄せ・中央・右寄せ・均等配置）を調整可能
幅や間隔をカスタマイズでき、デザインに合わせた調整が可能

使い方のポイント

ボタンやリンクを並べる: 例えば、「詳しく見る」ボタンと「お問い合わせ」ボタンを並べる際に便利
テキストとアイコンを並べる: サービスの特徴をアイコン付きで説明するときに役立つ
レスポンシブデザインに注意: スマートフォンでは縦積みに変わることがあるため、デバイスごとの表示を確認する

縦積み（Stack）

縦積みブロックは、複数のブロックを縦方向に積み上げて配置するためのブロックです。構造を整理し、直感的なレイアウトを作成するのに適しています。

特徴

複数の要素を縦に並べることで、読みやすく整ったデザインが作れる
文字サイズや間隔を調整しやすく、コンテンツの可読性が向上
スマートフォンやタブレットでの表示を最適化しやすい

使い方のポイント

見出しと文章を整理する: セクションごとにコンテンツを縦に配置することで、読みやすくなる
画像と説明をセットで配置する: 画像の下に説明文を入れると、ユーザーに内容が伝わりやすい
スペーサーと組み合わせて間隔を調整: 余白を入れることで、スッキリとしたデザインにできる

グリッド（Grid）

グリッドブロックは、コンテンツを均等に整列させて配置するためのブロックです。カードレイアウトや複数の情報を視覚的に整理したい場合に最適です。

特徴

複数のコンテンツを格子状（グリッド）に配置できる
列数を指定可能（2列、3列、4列など）
アイテムのサイズを統一して整然としたデザインが作れる
レスポンシブ対応: スマートフォンでは自動で1列表示になることも可能

使い方のポイント

画像とテキストのレイアウトに最適: 例えば、サービス一覧や商品一覧をグリッド形式で表示すると見やすくなる
ボックスレイアウトで情報を整理: 各グリッドにアイコンや見出しを配置すると、情報が伝わりやすい
均等なデザインを意識する: グリッド内のコンテンツのサイズや間隔を揃えることで、整然とした印象を与えられる

続き（More）

続きブロックは、記事の冒頭部分と本文を区切るためのブロックで、ブログの一覧ページでは「続きを読む」リンクとして表示されます。

特徴

記事の一覧ページでは「続きを読む」のリンクが表示される
投稿の一部だけを表示し、全文は詳細ページで読む形式にできる
読者の興味を引き、クリック率を向上させる効果がある

使い方のポイント

記事の導入部分を工夫する: 続きを読みたくなるような書き方を意識する
長文の記事に活用: 記事一覧ページで全文が表示されると読みにくくなるため、「続き」ブロックで区切るとスッキリする
適切な位置に配置: 文章の流れを考え、「続き」の前後で意味が途切れないようにする。

ページ区切り（Page Break）

ページ区切りブロックは、長い記事を複数のページに分割するために使用します。

特徴

記事を複数のページに分けることができる
ページ下部に「1 2 3…」といったページネーション（ページ番号リンク）が自動
長文の記事を読みやすく整理できる

使い方のポイント

記事の内容が長すぎる場合に、適切な箇所でページ区切りを入れることで、読者の負担を軽減できる
記事の閲覧数を増やしたい場合にも有効（特に広告収益を狙う場合）
すべてのテーマで適切に表示されるわけではないため、事前に動作確認を行うことが重要

区切り（Separator）

区切りブロックは、視覚的な区切り線を挿入し、コンテンツの流れを整理するためのブロックです。

特徴

ページ内のセクションを区切る水平線を追加できる
シンプルなデザインで、コンテンツの見た目を整えやすい
色やスタイルをカスタマイズできるテーマもある

使い方のポイント

コンテンツのまとまりを視覚的に区切りたいときに使用する
文章が長くなりすぎないよう、適度に入れることで読みやすくなる
過剰に使いすぎると視認性が落ちるため、適切な間隔で活用する要

スペーサー（Spacer）

スペーサーブロックは、余白を調整するためのブロックです。コンテンツの間に適切なスペースを確保し、見やすさを向上させます。

特徴

自由に高さを調整して、コンテンツ間のスペースを作成できる
デザインを整え、読みやすいレイアウトを構築できる
ページ内のバランスを調整するために使用される

使い方のポイント

余白が狭すぎると窮屈な印象を与えるため、適切なスペーサーを活用する
過剰に使うとスクロール量が増えてしまうため、バランスを考慮する
画像やテキストの間隔を調整し、読みやすいデザインにする

アーカイブ（Archives）

アーカイブブロックは、過去の投稿を月ごとに一覧表示するブロックです。ブログの過去記事を探しやすくするために使用されます。

特徴

記事の投稿年月ごとに整理されたリストを自動生成する
リスト形式またはドロップダウン形式で表示可能
サイト訪問者が過去のコンテンツを簡単に見つけられる

使い方のポイント

記事数が多いブログでは、アーカイブを設置すると便利
ドロップダウン表示にすると、ページのスペースを節約できる
「投稿数を表示」オプションを有効にすると、各月の投稿数が確認できる

カレンダー（Calendar）

カレンダーブロックは、記事の投稿日をカレンダー形式で表示するブロックです。

特徴

記事が投稿された日付を視覚的に表示できる
日付をクリックすると、その日に投稿された記事一覧へアクセス可能
ブログの更新頻度を示すのに適している

使い方のポイント

定期的に記事を更新するサイトでは、訪問者が過去の投稿を探しやすくなる
記事の投稿頻度をアピールしたい場合に便利
サイドバーやフッターに設置すると、読者が使いやすい

ターム一覧（Term List）

ターム一覧ブロックは、特定のカテゴリーやタグのリストを表示するブロックです。

特徴

投稿のカテゴリーやタグを一覧で表示できる
記事の分類を明確にし、訪問者が興味のあるテーマを探しやすくする
タームの並び順をカスタマイズ可能

使い方のポイント

記事が多くなってきたら、カテゴリーごとに整理して表示すると便利
「タグクラウド」とは異なり、リスト形式で表示される
フッターやサイドバーに配置すると、ユーザビリティが向上する。

カテゴリー一覧（Categories）

カテゴリー一覧ブロックは、サイト内のカテゴリーをリストまたはドロップダウン形式で表示するブロックです。

特徴

記事のカテゴリーを階層的に表示できる
ドロップダウン表示でコンパクトにまとめることが可能
投稿の整理やナビゲーションに役立つ

使い方のポイント

カテゴリーごとに記事を探しやすくするため、ナビゲーション要素として利用する
「投稿数を表示」オプションをオンにすると、各カテゴリーの投稿数を表示できる
サイドバーやフッターに配置すると、アクセスしやすくなる

カスタムHTML（Custom HTML）

カスタムHTMLブロックは、自由にHTMLコードを入力してカスタマイズできるブロックです。

特徴

HTMLやCSS、JavaScriptを直接記述できる
ショートコードや外部サービスの埋め込みにも対応
自由度の高いカスタマイズが可能

使い方のポイント

ウィジェットやカスタムデザインを作成する際に活用
SNSの埋め込みコードやGoogleマップの埋め込みにも使える
JavaScriptを含むコードを追加する場合は、動作確認を行う

固定ページリスト（Page List）

固定ページリストブロックは、サイト内の固定ページを一覧表示するブロックです。

特徴

サイト内のすべての固定ページを自動的にリスト化する
ページの階層構造を反映して表示できる
メニューとは異なり、すべての固定ページがリストに含まれる

使い方のポイント

固定ページが多い場合に整理するために活用
階層構造を活かして、ナビゲーションの補助として利用
フッターやサイドバーに配置すると便利。

RSS

RSSブロックは、外部のウェブサイトやブログの最新記事を自動的に取得し、サイト内に表示するためのブロックです。

特徴

指定したRSSフィード（外部サイトの更新情報）を取得し、リスト表示できる
記事のタイトル、抜粋、公開日を表示可能
自動更新されるため、手動で更新する必要がない

使い方のポイント

ウ他のブログやニュースサイトの最新情報を表示するのに適している
自社の他のサイト（例えば別のブログ）と連携し、新着情報を掲載することも可能
RSSフィードのURLを入力するだけで簡単にセットアップできる

検索（Search）

検索ブロックは、サイト内のコンテンツを検索できるフォームを設置するブロックです。

特徴

訪問者がキーワードを入力し、サイト内の記事やページを検索できる
プレースホルダー（入力欄の案内テキスト）をカスタマイズ可能
ボタンのラベルも変更できる

使い方のポイント

記事数が多いブログや情報サイトでは必須の機能
サイドバーやヘッダー、フッターに設置すると、訪問者が簡単に検索できる
「送信ボタン」を非表示にし、エンターキーで検索する設定も可能

ショートコード（Shortcode）

ショートコードブロックは、WordPressのショートコードを簡単に挿入できるブロックです。

特徴

[ショートコード] の形式で入力するだけで、特定の機能を追加可能
プラグインやテーマによって提供されるカスタム機能を呼び出せる
通常のテキストブロックでは動作しないコードを扱える

使い方のポイント

予約フォーム、ギャラリー、スライダーなど、プラグインで提供される機能を挿入するのに便利
ショートコードの内容によっては、プレビュー画面では表示されず、公開後に反映される場合がある

ソーシャルアイコンブロックは、Facebook、Twitter（X）、InstagramなどのSNSへのリンクアイコンを表示するブロックです。

特徴

主要なソーシャルメディアサービスのアイコンを追加できる
各アイコンにURLを設定することで、訪問者をSNSへ誘導可能
アイコンのスタイルやサイズをカスタマイズできる

使い方のポイント

企業サイトでは、公式SNSアカウントのリンクを設置することで、フォロワーを増やしやすくなる
ブログでは、筆者のSNSを紹介するのにも活用できる
「開くリンクの設定」で、新しいタブで開くようにするとユーザーの離脱を防げる

タグクラウドブロックは、サイト内で使用されているタグを一覧表示するブロックです。

特徴

各タグが視覚的にわかりやすく表示され、よく使用されているタグほど大きく表示される
記事数が多いサイトで、訪問者が関心のあるトピックを見つけやすくする
タグをクリックすると、そのタグが付いた記事一覧ページに遷移できる

使い方のポイント

記事数が増えてきたら、カテゴリだけでなくタグも活用すると、より細かい分類ができる
文章が中心のブログサイトでは、タグクラウドを活用することで、人気のトピックを一目で把握できる
サイドバーやフッターに設置すると、ユーザーが関心のあるテーマをすぐに探せる