コピペで使えるボタン風リンクのインラインCSS(1)

テキストでリンク1リンク2リンク3ってリンクを貼られると、スマホからだと押しづらくないですか?
スペースを入れてみたり、リンク1 リンク2 リンク3
改行してみたり、
リンク1
リンク2
リンク3
でもいいですが、リンクが貼ってあるテキストが短いときはちょっと大変です。

試しに、.←Twitterアカウントへのリンクを貼ってみました。
押せるもんなら押してみろwって感じですね。

リンクとその他のテキストの見わけがつきやすいように、.と囲んでみても、押せるのは文字だけなので、押しづらさには変わりがありません。

こういうスイッチだと文字の周りを押しても機能するのになー。

ってわけで、囲み線の中のどこを押してもリンクとして機能するようにしてみましょう。
ちょっと大げさに大きく囲ってみました。(領域が分かりやすいように背景も塗っています)
.

いかがでしょう。
テキストは「.」ですが、赤線枠内の領域全体がリンクとして機能しています。

この手法を使って、文字だけでなく領域のどこを押してもリンク先に飛べるボタン風リンクのインラインCSSです。

シンプルに境界と背景色のみ設定して7虹色+ピンクの8種類ご用意しました。

使い方

  1. 使いたいボタン装飾済みリンクのコード(<a href="リンクしたいURL" style="display:inline-block; …">表示したいテキスト</a>)をコピー。
  2. スマホのメモ帳などテキスト編集できるものにペースト(貼り付け)
  3. コード中のhref="リンクしたいURL"のリンクしたいURLをリンクしたいURL(http://…、https://…)に書き換え(ex. href=";https://twitter.com/")
  4. 同じくコード中の表示したいテキストをリンクとして表示したい文章に書き換え(ex.ここをクリック)
  5. 修正したコードをコピーし、ブログ編集アプリの「HTML編集」でリンクを入れたい場所にペースト(貼り付け)

メモ帳アプリに残しておけば、同じものを別の記事で繰り返し使いたいときに便利ですね。

文章中に配置したり、1行中に複数OK。ボタンの長さは文字長に連動。

表示サンプル
リンク赤リンクオレンジリンク黄色リンクグリーンリンク青リンク紺青リンク紫リンクピンク
タグクラウドにこんな感じのありますよね。
画面幅でボタンは自動で改行(通常のテキストと同じ扱い)されますので、このサンプルイメージでは、パソコンからだと2行に表示、iPhone5くらいだと2つずつ、4行表示になります。
冒頭に示した押せないリンク同様、.という風に短すぎるリンクテキストだと押しやすくなる効果はあまりありません。

個別サンプルとコード

表示したいテキスト
<a href="リンクしたいURL" style=”display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ff8e8e; border-radius:10px; background-color:#ffc1c1; font-size:16px; font-weight:bold; color:#fff; padding:2px 10px; margin:5px;”>表示したいテキスト</a>
表示したいテキスト
<a href="リンクしたいURL" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ffc68e; border-radius:10px; background-color:#ffe0c1; font-size:16px; font-weight:bold; color:#fff; padding:2px 10px; margin:5px;">表示したいテキスト</a>
表示したいテキスト
<a href="リンクしたいURL" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ffffc1; border-radius:10px; background-color:#ffff8e; font-size:16px; font-weight:bold; color:#ccc; padding:2px 10px; margin:5px;">表示したいテキスト</a>
表示したいテキスト
<a href="#" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #8eff8e; border-radius:10px; background-color:#c1ffc1; font-size:16px; font-weight:bold; color:#ccc; padding:2px 10px; margin:5px;">表示したいテキスト</a>
表示したいテキスト
<a href="リンクしたいURL" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #89c4ff; border-radius:10px; background-color:#bcddff; font-size:16px; font-weight:bold; color:#fff; padding:2px 10px; margin:5px;">表示したいテキスト</a>
表示したいテキスト
<a href="リンクしたいURL" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #8e8eff; border-radius:10px; background-color:#c1c1ff; font-size:16px; font-weight:bold; color:#fff; padding:2px 10px; margin:5px;">表示したいテキスト</a>
表示したいテキスト
<a href="リンクしたいURL" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #c68eff; border-radius:10px; background-color:#e0c1ff; font-size:16px; font-weight:bold; color:#fff; padding:2px 10px; margin:5px;">表示したいテキスト</a>
表示したいテキスト
<a href="リンクしたいURL" style="display:inline-block; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ff8eff; border-radius:10px; background-color:#ffc1ff; font-size:16px; font-weight:bold; color:#fff; padding:2px 10px; margin:5px;">表示したいテキスト</a>

カスタマイズ

style=" "内をちょこっと改変。

横幅固定(200px)
width:200px; を追記します。
表示したいテキスト

高さ変更(40px)
height:26px;の26pxとline-height:26px;の26pxを 40pxに変更。
※line-heightを合わせるのは、上下中央にテキストを配置するためです。
line-heightを指定しない(削除する)場合、テキストは上揃えになります。
表示したいテキスト

角丸なし、縁取り線なしのフラットデザイン風。
border:2px solid #***; border-radius:10px;を削除するだけです。
表示したいテキスト

縁取りなし、影付き。
border:2px solid #***;を削除し、box-shadow: 3px 3px 3px rgba(0,0,0,0.4);を追記。
表示したいテキスト

次回につづく!

ムダにレインボーカラー+1色を用意したため、疲れました(笑)
次回は、
リンク赤
リンクオレンジ
リンク黄色
のように文字数によらず横幅固定、1行に一つずつのボタン風リンク装飾です。

スポンサーリンク
レクタングル(大)

シェアする

スポンサーリンク
レクタングル(大)