さて、アメブロ用ブログパーツ作成とは銘打ったものの、
実態はアメブロで使用出来るようにアレンジしただけの
コピペがほとんどになると思いますが…
リンクボタンの作成を
したいと思います。
厚みのあるボタン
実際に表示したいリンク名
上のボタンのソースコード
<a href="リンク先URL" alt="エラー時等に表示する文字列" style=" display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8; color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px;">実際に表示したいリンク名</a>
シンプルな円形ボタン
表示名
<a href="リンク先URL" alt="エラー時等に表示する文字列" style="display: inline-block; text-decoration: none; width:150px; height:150px; border-radius:150px; line-height: 150px; font-size: 26px;text-align:center; background-color: #ccf;border: solid 4px #eee;box-shadow:0 0 8px;">表示名</a>
グラデーションボタン
表示名
<a href="#grad1" alt="エラー時等に表示する文字列" style=" display: inline-block;padding: 0.5em 1em;text-decoration: none;border-radius: 4px;color: #ffffff;background-image: linear-gradient(#6795fd 0%, #67ceff 100%);box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);border-bottom: solid 3px #5e7fca;
>表示名</a>
スマホのアイコン風ボタン
表示名
表示名
<p><a href="#sicon" alt="エラー時等に表示する文字列" style="display: inline-block;width: 100px;text-align: center;">表示名</a></p>
<a href="#sicon" alt="エラー時等に表示する文字列" style="display: inline-block;width: 100px; height: 100px; border-radius: 20px; border: solid 4px #880; font-weight: bold;text-decoration: none; color: #fff; text-align: center; line-height: 100px;background-image: url(画像URL);background-size: cover;">表示名</a>
シンプルなバナー風ボタン
表示名
<a href="#bana" style="display: inline-block; padding: 0.5em 1em; text-decoration: none; color: #fff;background-image: url(画像URL);background-size: cover;">表示名</a>
徐々に種類を増やしていき、後程目次のような形にしようかと思います。 