ランキングタグ用ボックス

今回はランキングタグ用Boxデザインの使い方とどんなふうにカスタマイズができるか説明していきます。

https://k-editor.com/editor/rankingtag/box/

## 基本

ランキングタグ用Boxは文字通りランキングタグ用Boxブロックを作るためのものです。仕様的にはBoxデザイン君と同じですが、ランキングタグ用にちょっと修正しています。ランキングタグでは改行が自動では有効にならないのでなるようにスタイルを変えてます。デフォルトでは以下のコードが出力されます。

<div style="text-align:left;max-width: 600px;margin:auto;color:#555555;background-color:#ffffff;font-size:14px;padding:7px;line-height:1.7;border:1px none #000000;white-space:pre-wrap;">ここに本文を入力</div>

それぞれの意味は以下の通り。

・color: 文字色

・background:背景色

・border：枠線

・font-size: 文字サイズ

・padding：内余白

・line-height：行間

・text-align: 位置ぞろえ

・white-space: 改行記号の扱い

最後のwhite-spaceで改行の扱いを変更しています。

詳細設定を開くと、余白、枠線、位置ぞろえの変更が可能になります。

## テンプレート

デフォルトの設定としていくつか用意しています。上部にあるテンプレから選択すると開発者が適当に設定したものが選べます。

また、カスタムテンプレートの設定の項目で”この設定を保存する”ボタンを押すと現在設定しているものがブラウザに保存されます。

保存した場合、次に同じページを訪問した時にテンプレの選択肢に表示されます。

## コード説明

ランキングタグでは改行が改行されません。white-spaceのスタイルが明示的に設定されていないからです。基本的にデフォルトでは改行記号で改行されないようにブラウザではなっています。

なのでスタイルで明示的に改行するように設定します。それがwhite-space:pre-wrap;の設定です。

あとはテキストの位置ぞろえを調整しているので、割烹エディターのテンプレートが使えるようになります。

例えばランキングテンプレートとかレビューフォーマットだと普通に入れるとこうなります。

中央寄せになりますし、幅がウインドウまで広がり、改行が使えないので見た目が悪くなります。

それを今回のタグの中に入れるとこうなります。

割烹と同じような見た目になりましたね。

-　-　- ✂切り取り✂ -　-　-

ということでランキングタグ用のBoxデザインくんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。