これから Nishiki Pro または Nishiki
テーマを使うなら1度は確認しよう!

Nishiki テーマおすすめ設定 テーマおすすめ設定を見る

WordPress の投稿や固定ページで、画像や段落などのあいだにスペース(間隔)をあける際には、どうやっていますか。

やり方はいろいろとあるのですが、「改行(br)タグを複数使ってスペースを空ける」という方法が巷ではそこそこ使われているようです。それを実現するため、「改行を入れる専用のプラグインを使う」なんてこともよく聞きます。

目次

Gutenberg のブロックエディターでもスペース(間隔)あけられるの?

Gutenberg のブロックエディターでは、改行(br)タグを使わなくても OK です。スペース(間隔)をあける「スペーサー」ブロックを使った方法を YouTube で動画にしましたのでご参考ください(動画は 4 分弱ほどで短くまとめています)。

中・上級者向け:「スペーサー」ブロックのソースコードはどうなっているの?

ここからはウェブサイト制作に少し詳しい方向けの話題となります。「スペーサー」ブロックを使うとどんな HTML が生成されるのか、少し見ていきましょう。

上の画像のように、高さ 68 px の「スペーサー」ブロックを入れると、以下のような HTML が生成されます。

<div style="height:68px" aria-hidden="true" class="wp-block-spacer"></div>

インラインで高さを指定する CSS が適用され、「wp-block-spacer」というクラスが設定され、「aria-hidden」は true に設定されています。

aria-hidden とは?

aria-hidden について初めて知った方もいらっしゃると思いますが、aria-hidden はアクセシビリティ確保のための仕様 WAI-ARIA で定義されている属性の 1 つです。

aria-hidden を入れることで、スクリーンリーダーなどウェブサイトの情報を音声で読み上げる際に「aria-hidden が有効な箇所は読み上げなくてもいいよ。スキップしてね」という設定をすることができます。

これは僕個人の考えですが、「スペーサー」ブロックに aria-hidden が設定されている理由としては、スペース(間隔)をあけるためだけに使用されるブロックをわざわざ音声で読み上げなくてもいいですよね、ということでしょうね。

そういう意味では、旧エディターで連続で改行(br)タグを入れるよりも「親切なウェブサイト作りができる」とも言えるのではないか、と思います。

ブロックエディターの「スペーサー」ブロックを、ぜひ活用してみましょう。

このページをシェアする

サポトピア おすすめ WordPress テーマ

WordPress テーマ Nishiki Pro

WordPress 公式テーマ Nishiki の洗練されたデザインを継承したプロフェッショナル版テーマです。「本当に必要とされる機能」をテーマ内にすべて搭載しているので、プラグインをたくさん入れなくても OK。メンテナンスコストも抑えることができ、効率の良いウェブサイト運営を行うことができます。

EC サイト対応テーマ Nishiki Pro for WooCommerce

今の時代、誰もが商材を持ち、ネット上で販売できる仕組みを持ってもいいと思います。WordPress を使って EC サイトが構築できる「Nishiki for WooCommerce」を使って、お持ちの商材を販売しませんか。ドロップシッピングサイトも作れます。

著者

bouya Imamura

東京都北区十条にあるウェブサイト(ホームページ)制作会社 AnimaGate(アニマゲート) という会社をやっています。サポトピアでは自社製品・サービスの全般的な開発・管理などを行っています。これまで数多くのウェブサイトの新規作成・リニューアル・運営などを経験し、WordPress(ワードプレス)公式テーマ・公式プラグインなど、ウェブサイト運営に役立つ様々なツールを開発・公開しています。サポートの一環として YouTube のライブ配信などオンラインサポートを試験運用しています。ぜひチャンネル登録いただけると大変嬉しいです。→ブログはこちら

他のマニュアルを見る

WordPress(ワードプレス)の使い方

マニュアルTOPへ戻る