THE THOR はクラシックエディターが推奨のWordPressテーマです。
ブロックエディターは「使いやすいけど出来ることが少ない」というのが個人的な感想。しかしブロックエディターの中には便利な機能があるのも事実。そのうちの一つが「スペーサー」です。
「スペーサー」は余白調整用のブロック。改行での余白取りより細かくスペースを調整することができます。今回はブロックエディターの「スペーサー」と同様の機能をクラシックエディターで再現します。
余白 を作る「スペーサー」のHTML
余白を作るHTMLは以下の通り
これはブロックエディターのブロックをHTML表示してそのまま持ってきたものです。
コードの解説
コードの内容を理解する必要はありません。コピペでOKです。備忘録的に内容を記載しておきます。
height: 50px;の部分が余白の大きさ（縦幅）になります。数値を変更すると余白のサイズが変わります。
aria-hidden=”true”の部分は、スクリーンリーダーで読み上げをしないという指示でブラウザに非表示であることを宣言しています。これは無くても問題ないと思いますが、あれば親切といった感じ。
最期のclass=”wp-block-spacer”にはフロートされた要素を解除するclear:both;が設定されています。これも無くても良いと思いますが一応つけたままにしておきましょう。
余談ですが、class=”wp-block-spacer”の動作を見る限り、ブロックエディターで実装されているcssはクラシックエディターでも実装されていることがわかります。つまりブロックエディターを調べればクラシックエディターで同等の機能を使うことが可能になるということ。ちょっと面白いですね。
普段使用しているスペースは「 」
僕が普段使用している余白を作る方法は「 」です。いわゆる普通の改行(enter)です。
改行での余白は微調整ができません。大きい余白を作ろうとすると内部では「 」が繰り返され見た目が良くありません。そんなときはこのコードを使用しましょう。
余白 を作る「スペーサー」の記述方法
クラシックエディターをテキストに切り替えて任意の場所に上記コードを挿入。またはビジュアルのメニューにある【<>】から挿入することができます。余白のサイズはその都度適切に打ち替える必要があります。
コードは前述どおりです。数値は好みで変更しましょう。
あとがき
スペーサーのコードをTHE THOR の機能で登録して簡単に呼び出し使用できるように試みましたが残念ながら良い結果が得られませんでした。場所に合わせ数値を変化させることを考えると基本のコードをテキストに保存しておいてコピペする方法が便利そうですね。
クラシックエディターでは基本的に要素同士のmarginが適切に設定されていると思うのであまり役立つことは無いかもしれません。極端に大きな余白を取りたいときなど限定的ですが知っておくと役に立つかと思います。
コメント