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

前回、コピペで使えるボタン風リンクのインラインCSS(1)では、文章中に配置したり、1行中に複数OK、ボタンの長さは文字長に連動のボタン風リンクを紹介しました。

今回は、文字数によらず横幅固定、1行に一つずつのボタン風リンク装飾です。

使い方

  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編集」でリンクを入れたい場所にペースト(貼り付け)

濃色

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ffc1c1; border-radius:10px; background-color:#ff8e8e; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ffe0c1; border-radius:10px; background-color:#ffc68e; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #c1ffc1; border-radius:10px; background-color:#8eff8e; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #c1ffc1; border-radius:10px; background-color:#8eff8e; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #bcddff; border-radius:10px; background-color:#89c4ff; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #c1c1ff; border-radius:10px; background-color:#8e8eff; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #e0c1ff; border-radius:10px; background-color:#c68eff; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

オマケ
表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; height:26px; line-height:26px; text-align:center; text-decoration:none; border:2px solid #ffc1ff; border-radius:10px; background-color:#ff8eff; font-size:16px; font-weight:bold; color:#fff; padding:2px; margin:5px;">表示したいテキスト</a>

薄色

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

オマケ
表示したいテキスト<a href="リンクしたいURL" style="display:block; width:300px; 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; margin:5px;">表示したいテキスト</a>

おわりに

いくつか下に並べて使いたい時は、<a>〜</a>タグと次の<a>〜</a>タグ同士の間に改行を入れない方がいいです。
styleでdisplay:blockとしているので、表示されるときには後ろに自動で改行が入ります。
多くのブログサービスの編集機能では、改行(改行記号表示なし)を自動で<p>(段落)タグや<br>(改行)タグにしてくれるので、ムダに改行の隙間が空いてしまいます。

編集画面で改行を入れずに並べるとこんな感じ。

その他、簡単なカスタマイズについては、前回のコピペで使えるボタン風リンクのインラインCSS(1)を見てください。
このWordpressテーマでiPhone5sで確認したら、ボタンの右端が画面の外にはみ出していましたので、特にwidthはお使いのブログテーマやデバイスごとの表示を考慮して調整した方が良さそうです。

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

シェアする

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