これから 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 テーマ Nishiki の基本的操作などをちょっと聞いてみたい」という時など、日々のウェブサイト運営にご活用ください。マニュアル・機能追加の要望やフィードバックなども受け付けています。まだ開始して間もないサービスなので、少しずつ利用いただける方が増えるといいな〜と思います。ご参加お待ちしております。

参加する

※サポトピアにログインしてください

このページをシェアする

著者

bouya Imamura

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