リンクボタン作成くん

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

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

## 基本

リンクボタンは文字通りリンクボタンを作るためのものです。よくあるリンク付きのボタンを生成することができます。デフォルトでは以下のコードが出力されます。

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

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

・text-align: 位置ぞろえ

・font-size: 文字サイズ

・color: 文字色

・background:背景色

・border：枠線

・margin:外余白

・padding：内余白

・line-height：行間

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

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

外側のdivで内側の配置を設定、その中にリンクを仕込んでいます。背景色などはaの方に設定してボタンのように見せています。

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

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

普通のリンクだとあまり目立たないですが、目立つリンクを作りたいときに利用すると良いかと思います。

## テンプレート

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

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

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

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

## コード説明

color:

border:

background:

でボタンの色を変更します。組み合わせは枠線ありの場合は枠線の色と文字色を同じ、背景を別にするとよいでしょう。枠線なしにしたい場合は背景色と枠線色を同じにするといいでしょう。

またpadding:をいじることでボタンの余白を変更することができます。

なお使用する際の注意点を説明します。

通常のボタンではボックス内でのテキストの折り返しが可能ですが、このコードではこんな感じになります。

長文対応は通常ではa要素をブロック要素またはインラインブロック要素に変更するのですが小説家になろうでは対応していません。

なのでボタンの文字はあまり長い文章を入れないようにしてください。せいぜい15文字くらいがスマホデバイスで折り返さない限界です。それ以上に長い文章を入れる場合は次で説明するリンクボタン（長文用）をご利用ください。

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

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