リンクボタン作成くん(長文用)

今回は長文用リンクボタンの使い方とどんなふうにカスタマイズができるか説明していきます。

URL : https://k-editor.com/editor/button/

## 基本

長文用リンクボタンは文字通り長文用のリンクボタンを作るためのものです。通常のリンクボタンは文字が多くなると崩れてしまいますが、このリンクボタンでは崩れません。デフォルトでは以下のコードが出力されます。

<div style="text-align:center;font-size:16px;background:#1cb7cd;border:2px solid #1cb7cd;padding:.5em;line-height:1.25;width:150px;max-width:320px;margin:auto;"><a style="color:#ffffff;" href="https://syosetu.com/" >ボタン</a></div>

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

・text-align: 位置ぞろえ

・font-size: 文字サイズ

・color: 文字色

・background:背景色

・border：枠線

・margin:外余白

・padding：内余白

・line-height：行間

・width:横幅

・max-width:最大横幅

2つのタグで構成されています。

<div><a>ボタン</a></div>

これだけを見ると1つ前のリンクボタンと何が違うのかと思われるかもしれませんが、

こちらでは外側のdivでボタンの見た目を設定、その中にリンクを仕込んでいます。背景色なども全部divの方で設定してボタンのように見せています。aに設定しているのは文字色だけです。

詳細設定を開くと、文字サイズ、文字色など色の変更が可能になります。

またリンク設定は現在のブラウザのタブではなく別のタブで開くようにも設定可能です。

文字の多いリンクボタンを作りたいときに使うといいと思います。

## テンプレート

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

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

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

自分用のボタンカラーを決めて保存しておくとよいでしょう。

## コード説明

基本的にはリンクボタンと同じです。文字色とか背景色を設定してください。

一つ違う点はボタン幅を設定できる点です。ボタン幅は320pxまで設定できます。好きなサイズにしてみてください。

全部こちらのボタンを使えばいいじゃないかと思われるかもしれません。ただ、それではあまりうまくない部分があります。

このボタンのリンクの当たり判定は文字の上だけです。ボタン全体がリンクになっているわけではないのです。短文用のリンクボタンではボタン全体に当たり判定がありますので通常はこちらを使う方が良いと思います。

なぜそうなっているかはブロック要素とインライン要素の関係によるものです。通常はリンクをブロック要素化させることで対応できるのですが、小説家になろうでは対応していません。なので苦肉の策としてリンクボタンを長文用と短文用に分けてます。

ブロック要素全体にリンクをかければいいだけでは？と思われるかもしれません。

試しに以下のタグを入れましょう。

<a href="URL"><div>ボタン</div></a>

こうなります。

<a href="URL"></a><div><a href="URL">ボタン</a></div><a href="URL"></a>

見てお分かりの通り、aタグが増殖します。

ふぁ！？　なんでぇ？

小説家になろうの活動報告ではきちんとインライン要素の中にブロック要素を入れた場合ブロック要素に入れないようにしてタグが閉じられます。

なので

<a href="URL"><div>ボタン</div></a>

としても実質、

<div><a href="URL">ボタン</a></div>

と修正されます。これはaタグに限らずbとかspanとのインライン要素でも同じです。

まぁそんなわけで、このくｓ……仕様のためにリンクボタンを短文用と長文用に分けているわけです。

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

ということでリンクボタン作成くんの使い方でした。もしよくわからない点などあれば感想などでお知らせください。