コピペで使える!ブログ記事タイトルとリンクをワンタップでコピーするボタン実装 - 切り絵Blog 影織文庫

コピペで使える!ブログ記事タイトルとリンクをワンタップでコピーするボタン実装

記事の末尾に、「この記事のタイトルとリンクをコピーする」というボタンを設置しました。

普段、この記事を誰かに教えたいとか、SNSでシェアしたいという時…
Twitterのログインをいちいち求められたり、
ツイッターからシェアしづらい


コピー領域選択で手間取ったり、
スマホからコピーしづらい

イライラすること、ないでしょうか?
私はめっちゃあります。

そこで、こちらの記事を参考にさせていただきながら、記事コピーのボタンを実装してみましたよ。

実装方法

まず、ボタンを置きたい部分を探します。
私は記事の直下に置きたいので、post-footerというdivタグの中に書くことにしました。
 post-bodyの最後の部分に置いても良いかもしれません。
そして以下のコードをコピペします。 さらに、こちらをCSSに追記してください(スタイルタグで囲まれた中のどこかに書けばOKです)。
上記2つのコードの中ではそれぞれ、#から始まる6文字で、ボタンの色を指定しています。 色検索はこちらのサイトが便利ですよ。

 ということで、みなさん、このボタンを使って是非どんどん記事シェアしてくださいね~!
コピペで使える!ブログ記事タイトルとリンクをワンタップでコピーするボタン実装 コピペで使える!ブログ記事タイトルとリンクをワンタップでコピーするボタン実装 Reviewed by 影織 on 5月 11, 2018 Rating: 5