【177日目】ページのURLをコピーするボタンを作ってみた
Posted: Last Update:
「記事の投稿ページを作成する」プロジェクトはいったんお休みして、、昨日からシェアボタンをお洒落にしようと奮闘しています。
シェアボタンをお洒落に
簡単にブログを入力できるように、「記事の投稿ページを作成する」プロジェクトに専念していましたが、一昨日からちょっと休憩中。
一昨日Googleに「カバレッジの問題が新たに検出されました」と連絡をもらい、対処していましたが、その結果はまだ出ていませんでした。ゆっくり待ちます…。
昨日からはページの下の方に設置しているリンクボタンをお洒落にしようと格闘しています。予想外に時間がかかっています。一日でちょいちょい、とできる予定だったのに！ちよっとだけ弄って、昨日の時点ではこのようになりました。
自分のURLをコピーするボタンを作りたい
デザインの参考に、と思って他のサイトを見て回っていたら、「自分のURLをクリップボードにコピーするボタン」を設置しているサイトがありました。
facebookやInstagramは使っていないので、対応するボタンは設置しないつもりです。「自分のURLをクリップボードにコピーするボタン」があれば、facebookやInstagramのユーザーさんが拡散してくれるかも！という淡い期待が生まれます！
というわけで、設置方法を検索してみることに。
たくさん検索した結果、HTMLとPHPでは実装できないことが分かりました。JavaScriptが必要そうです。とうとうJavascriptにも手を出してしまいますか…。まっ、いっか！
javascriptに手を出してみた
仕方がないのでJavaScriptで作成。検索しまくり、もっと簡単そうなものを実装してみました。これ、スマホ対応できてるのかな…？
function copyToClipboard()
var copyTarget = location.href ;
navigator.clipboard.writeText(copyTarget);
}
</script>
<button id="sharebutton" onclick="copyToClipboard()"><i class="icon-share2"></i></button>
ちゃんとクリップボードにURLをコピーできました！機能は完成です。
スタイルシートをいじって、ボタンをそれらしくしてみました。出来上がったボタンはスクリーンショットの最初のボタンです。緑色の奴ですね。他のデザインが統一されていないので、全体として今一ですが…
ボタンのアイコンはIcoMoonで作成しています。アイコン作成方法は記事にまとめてありますので、ご興味がありましたら、ご参考にどうぞ。
関連記事
サイトのアイコンをフォントで表示できる「Font Awesome」。自分の好きにアイコンだけ使いたいのにたくさんおまけがついてきて困っていませんか？IcoMoonというWEBソフトを使って、自分の好きなフォントだけサイトに反映させる方法を詳しく紹介します。IcoMoonでファイルの軽量化もできちゃいます！
今日はここまで
今日はここで時間切れ！明日はシェアボタン全体のデザインを整えて、完成したいと思います。では、また明日！
記事をシェアする
亀の子に連絡
ランキング参加中！ぽちっとしてね
