THE THOR スペーサー 余白 調整 スペース

THE THOR 余白 の作り方(ブロックエディターのスペーサー)

THE THOR はクラシックエディターが推奨のWordPressテーマです。

公式THE THOR について

ブロックエディターは「使いやすいけど出来ることが少ない」というのが個人的な感想。しかしブロックエディターの中には便利な機能があるのも事実。そのうちの一つが「スペーサー」です。

「スペーサー」は余白調整用のブロック。改行での余白取りより細かくスペースを調整することができます。今回はブロックエディターの「スペーサー」と同様の機能をクラシックエディターで再現します。

この記事を書いたのは…
からあげ棒です。THE THOR を発売直後から使用。WordPressは2015年から。グラフィックデザイナー10年、オンラインショップ3年、現在は力仕事をこなしつつ空いた時間に自社サイトを担当。Adobe系ソフト/Mac歴は20年over。技術や知識ではなく経験と時間でゴリ押しするタイプのデザイナー。

 

余白 を作る「スペーサー」のHTML

カスタマイズお役立ち度 

 

余白を作るHTMLは以下の通り

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

これはブロックエディターのブロックをHTML表示してそのまま持ってきたものです。

 

コードの解説

コードの内容を理解する必要はありません。コピペでOKです。備忘録的に内容を記載しておきます。


height: 50px;の部分が余白の大きさ(縦幅)になります。数値を変更すると余白のサイズが変わります。

aria-hidden=”true”の部分は、スクリーンリーダーで読み上げをしないという指示でブラウザに非表示であることを宣言しています。これは無くても問題ないと思いますが、あれば親切といった感じ。

最期のclass=”wp-block-spacer”にはフロートされた要素を解除するclear:both;が設定されています。これも無くても良いと思いますが一応つけたままにしておきましょう。


 

余談ですが、class=”wp-block-spacer”の動作を見る限り、ブロックエディターで実装されているcssはクラシックエディターでも実装されていることがわかります。つまりブロックエディターを調べればクラシックエディターで同等の機能を使うことが可能になるということ。ちょっと面白いですね。

 

普段使用しているスペースは「&nbsp;」

僕が普段使用している余白を作る方法は「&nbsp;」です。いわゆる普通の改行(enter)です。

改行での余白は微調整ができません。大きい余白を作ろうとすると内部では「&nbsp;」が繰り返され見た目が良くありません。そんなときはこのコードを使用しましょう。

 

余白 を作る「スペーサー」の記述方法

 

クラシックエディターをテキストに切り替えて任意の場所に上記コードを挿入。またはビジュアルのメニューにある【<>】から挿入することができます。余白のサイズはその都度適切に打ち替える必要があります。

コードは前述どおりです。数値は好みで変更しましょう。

<div style=”height:50px” aria-hidden=”true” class=”wp-block-spacer”></div>
コードの挿入に便利

THE THOR は AdSense を含め広告を表示する方法がいくつもあります。 ※当サイトは THE THOR を使用しています。 記事内最初のH2うえに自動で広告を挿入したり、ウイジェットで任意の場所に表示したり、ショート[…]

アドセンス 広告設置 THE THOR

 

あとがき

 

スペーサーのコードをTHE THOR の機能で登録して簡単に呼び出し使用できるように試みましたが残念ながら良い結果が得られませんでした。場所に合わせ数値を変化させることを考えると基本のコードをテキストに保存しておいてコピペする方法が便利そうですね。

クラシックエディターでは基本的に要素同士のmarginが適切に設定されていると思うのであまり役立つことは無いかもしれません。極端に大きな余白を取りたいときなど限定的ですが知っておくと役に立つかと思います。

>