任意の場所にボタンを追加する

HTMLフリー入力モジュールを使って、ページ内の任意の場所にボタンを設置できます。

テキストリンクのHTMLコード例

<a href="ページURL"> 【 ITEM CHECK 】 </a>

• ページURLの部分に、遷移先のURLを記載してください。

• 【 ITEM CHECK 】はリンクとして表示する文字列です。お好きな文言に変更してください。

ボタン風リンクのHTMLコード例

<a href="ページURL" style="display: inline-block;
background-color: #000000;
color: #ffffff;
padding: 6px 20px;
border-radius: 5px;"
>ITEM CHECK</a>

• ページURLの部分に、遷移先のURLを記載してください。

• ITEM CHECKはボタンのマイクロコピーです。お好きな文言に変更してください。

• background-colorはボタンの背景カラーです。#000000のようにカラーコードを指定して変更できます。

• colorはボタンテキストのカラーです。#ffffffのようにカラーコードを指定して変更できます。

• paddingはボタンの周囲の幅を変更する項目です。

• border-radiusはボタンの角の丸みを変更する項目です。

応用｜ボタンの配置を中央揃えにしたい場合

<div style="text-align: center;">
<a href="ページURL" style="display: inline-block;
 background-color: #000000;
 color: #ffffff;
 padding: 6px 20px;
 border-radius: 5px;">ITEM CHECK ▶</a>
</div>

参考

ChatGPT・Geminiなどの AIチャットツールを使うと、コードのカスタマイズを相談できます。

AIへの質問例：

> テキストリンク（テキストリンクでボタンの装飾をした）のHTMLを作成してください。
> ボタンの名前：詳細をみる
> テキストのカラー：黒（#000000）