ツイートボタン風のリンクを設置する

UserScriptを使えば、自分でツイートする機能（Twitterに投稿するページメニュー）は付けられるが、閲覧者全員には無理。

普通はそれで構わないが、ランディングページ・ポートフォリオページにはちょっと欲しい

→ボタンを設置する代わりに、ボタンに見えるリンクを置く

こういうの

https://gyazo.com/5db1d648b095a9f1b4a89ef9cc76b84f

中身はこう

https://gyazo.com/fd0844ce199e62ed56db91a64d8e72a6

二段構え

まず、Tweet（ツイートでもいい）を文字列とするリンクを作る。

URLは、Twitterにシェアするものを指定

書式

https://twitter.com/share?text=【ツイート文】&url=【共有するURL】&hashtags=【ハッシュタグ】

https://twitter.com/intent/tweet?textでもよさげ。

日本語などは使えないのでエンコードが必要。

しかしこのままでは見た目が非常に貧相

https://gyazo.com/0d7bc7d2ee72d548a142c8c3a851c04b

よって拡張装飾記法でそれっぽく仕上げる。

code:style.css

.line .deco-\& {

display: inline-block;

padding: 0.2em 0.4em;

text-decoration: none;

background: #55acee;

color: #fff;

border-radius: 4px;

transition: .3s;

-webkit-transform: scale(1);

transform: scale(1);

}

line .deco-\&{

-webkit-transform: scale(1.1);

transform: scale(1.1);

}

.line .deco-\& a{

text-decoration: none;

color: #fff;

}

あとはリンクを[& ]でかこって完成。

押してみると、無事動く。

https://gyazo.com/680d3ffbcc6e98e6f87e7808d7fdfc24