マイクロコピーテキストを中央・右寄せにする方法【ブロックエディター】

ブロックエディターにマイクロテキストという補足や注釈などに使用する小文字のブロックがあります。マイクロテキストを追加するとデフォルトだと左寄せになりますが、スマホ編集だと中央・右寄せにする項目が見当たりません。※あれっ、PCでも無い？

これがマイクロテキスト(左寄せ)

例えば上記の様な位置だとバランスが悪いですね。この場合だとセンターに合わせたいところです。ということで、マイクロテキストを中央・左寄せに変更する方法をまとめました。

マイクロテキストの呼び方

呼び方ががいくつかある様ですが、本記事ではブロックエディターの表示に従ってマイクロテキストとしています。しかし、マイクロテキストを追加するとマイクロコピーテキストという文字サンプルが表示されるので、その辺は臨機応変にご認識ください。

一般的にはマイクロコピーがしっくりきますが、Webの世界に限るとテキストという言葉を入れたのは優しさかなとも思います。ブロックエディターでは(正式には)マイクロコピーテキストとしているのかと思いますが、表示に関しては幅の問題でマイクロテキストと略したのかと勝手に推測します。

マイクロテキストのブロックでHTMLとして編集を選択し、以下の様にHTMLコードを表示させます。

HTML編集の画面

この赤枠の部分にコードを追加するだけで、中央・右寄せにすることが可能です。コードもシンプルなので簡単に追加できるかと思います。

中央に配置する場合はaligncenterを先程の赤丸の位置に追加します。注意点として、前後のコードとの間に半角スペースが必要です。

マイクロコピーテキスト(中央に配置)

右寄せの場合はalignrightを追加します。

マイクロコピーテキスト(右寄せ)

リンクボタンの近くにマイクロテキストを追加したことで、クリック率が上がったという情報もあります。

＼無料キャンペーン中／

利用者数1,000万人！

確かにマイクロテキストの有無によって印象が少し変わります。クリックを躊躇している人の不安や疑問をワンフレーズで解消して背中を押してあげる感じです。確かにネット上の様々な広告を見てみると、最終的にクリックしてほしいリンクやボタンの近くにマイクロテキスト等を表示しているケースが多いです。