あなたはリンクを貼るときにどのような表示にしていますか？
私は自作していましたが、手間がかかるので、もっと簡単にリンクボタンを作りたいなと思いました。
なので、作っちゃいました！
ＣＳＳの知識不要でリンクボタンを作成するアプリ
使いかた
基本的な使いかた
背景色や文字の色など好きなようにカスタマイズを行います。
見た目に関わる設定項目はリアルタイムで【ボタンサンプル表示】下部のボタンにデザインが反映されます。
ボタン表示文字やリンク先URLなどを入力し、【データ反映】ボタンを押すと、設定した値が【ＨＴＭＬ】および【ＣＳＳ】に反映されます。
反映されたコードに関して、【ＨＴＭＬ】部分はブログやWebページの本文に、【ＣＳＳ】部分はそれぞれＣＳＳを記載する場所へコピペします。
操作中の動画
背景色を選ぶ
リンクボタンの背景色を選びます。
上から順に赤、緑、青の色情報を入力します。
スライダーでも変更可能ですし、数値を直接入力する事でも設定か可能です。
数値の範囲はそれぞれ０～２５５までとなります。
文字色を選ぶ
リンクボタンに表示する文字の色を選びます。
現在の色設定は「黒・青・白」とそれぞれ太字とノーマルの６種類のみです。
ご要望があれば追加いたします。
フォントサイズを設定
リンクボタンに表示するフォントのサイズを設定します。
設定可能な範囲は6～50pxです。
余白（上下）を設定
リンクボタンの上下の余白を設定します。
設定可能な範囲は０～３０pxです。
余白（左右）を設定
リンクボタンの左右の余白を設定します。
設定可能な範囲は０～３００pxです。
角の丸めを設定
リンクボタンの角の丸めを設定します。
値が大きいほど角が丸くなっていきます。
設定可能な範囲は０～１００pxです。
displayを設定
リンクボタンの「display」設定を行います。
| inline-block | 下記のブロック要素とインライン要素の中間です。 |
|---|---|
| block | ブロック要素です。この要素にすると1行を占領します。 縦に積まれるイメージです。 |
| inline | インライン要素です。通常の文字をリンクする際はこの設定がデフォルトです。 |
文字の装飾（下線の有無を選ぶ）
リンクボタンに表示する文字にアンダーラインを入れるかどうかを選択します。
クラス名を入力する
作成するボタンに「クラス」という名前を付けます。
クラス名が同じであれば、複数の記事で使いまわすことが可能です。
クラス名のルールは下記があります。
- 半角英数字のみ使用
- 必ずアルファベットから（【例】〇custom_button ×1_custom_button）
- スペースは入れない
- 記号はハイフン「‐」か、アンダースコア「_」のみ
また、クラス名は色々な所で使用しているので、他で宣言されているクラス名と一緒にならないように注意する必要があります。
クラス名が一緒の場合には他の所で宣言したCSSが反映されてしまいます。
表示文字を入力
リンクボタンに表示する文字を入力します。
URLを入力
リンク先のURLを入力します。
リンク先の開き方を選択します
リンク先の開き方を選択します。
「_blank」は新しいタブで開き、「_self」は現在のタブで開きます。
データ反映ボタンを押す
データ反映ボタンを押して、入力した値を反映します。
データ反映ボタンの下にある【HTML】および【CSS】に設定した値が反映されます。
これらをコピぺするだけで、今回作成したリンクボタンを使用する事が可能です。
使用例
CSSの設定
WordPressを使用されている方を例に説明します。
リンクボタンの見た目を変更するため、作成した【CSS】をコピーします。
【外観】→【カスタマイズ】→【追加CSS】にコピーしたコードを貼り付けます。
HTMLを本文に貼り付ける
本文に【HTML】からコピーした内容を貼り付けます。
このとき【ビジュアル】→【テキスト】に変更する必要があります。
これだけでリンクをボタン風にカスタマイズする事が可能です。是非お使いください。
