コピペで使える布風、ステッチ装飾リンクのインラインCSS

使い方

  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 style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ff8e8e; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ff8e8e; border: dashed 2px #ffc1c1;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ffc68e; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffc68e; border: dashed 2px #ffe0c1;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ffec47; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffec47; border: dashed 2px #ffff99;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #8eff8e; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #8eff8e; border: dashed 2px #c1ffc1;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #89c4ff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #89c4ff; border: dashed 2px #bcddff;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #c68eff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #c68eff; border: dashed 2px #e0c1ff;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ff8eff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ff8eff; border: dashed 2px #ffc1ff;" href="リンクしたいURL">リンクテキスト</a>

背景薄め

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ffc1c1; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffc1c1; border: dashed 2px #ff8e8e;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ffe0c1; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffe0c1; border: dashed 2px #ffc68e;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ffff99; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffff99; border: dashed 2px #ffec47;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #c1ffc1; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #c1ffc1; border: dashed 2px #8eff8e;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #bcddff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #bcddff; border: dashed 2px #89c4ff;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #e0c1ff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #e0c1ff; border: dashed 2px #c68eff;" href="リンクしたいURL">リンクテキスト</a>

リンクテキスト
<a style="display: inline-block; margin: 12px; padding: 0.5em 1em; text-decoration: none; background: #ffc1ff; color: #fff; border-radius: 4px; box-shadow: 0px 0px 0px 5px #ffc1ff; border: dashed 2px #ff8eff;" href="リンクしたいURL">リンクテキスト</a>

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

シェアする

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