iPhone・Mac・ウェブサービス・文房具について「生活に活かせる実用的な活用術」を提供するメディア

ブログ記事に「タイトルとURLをコピーするボタン」を実装してユーザーもハッピーに!

この記事のURLとタイトルをコピーする

最近は当ブログもスマートフォンで閲覧するユーザーさんが多くて、「あぁ時代はモバイルファーストなんだなぁ」と感じている今日このごろ。

確かに私も、ウェブサイトの閲覧はスマートフォンを利用している時間の方が多いように思います。

さてそうなると、「パソコンなら簡単な作業もスマートフォンだとちょっと手間で面倒」ということも多々あるわけで。その一つに「コピー&ペースト」が挙げられます。

スマホの場合、コピーする範囲をいちいち指でなぞって、それからコピーするボタンを押す。手間が多いです。しかも範囲選択がなかなかシビアで、イライラを感じたことは誰にでもあるでしょう。

そのコピペの手間を減らしてあげれば、記事のシェアなどがもっと簡単になって便利かなと思い、当ブログに「記事のタイトルとURLをコピーするだけボタン」を設置しました。

記事タイトルとURLをコピーするだけのボタン

今日現在、記事のタイトル下と記事の末尾に、このようなボタンを設置しています。

この記事のURLとタイトルをコピーする

このボタンをクリックすると、こんな感じで「コピーしました」というボタンに変わります。

Copy paste btn 02

これだけでコピーが完了。あとは貼り付けたい場所に「ペースト」していただければ、記事タイトルとURLの入力が完了します。

Copy paste btn 03

Twitter、Facebook、LINEなどなど。友達にシェアする際はぜひご活用ください。

自分も実装したい!というブロガーさんへ

同じように自分も実装してみたい!というブロガーさん用に、設置方法をご紹介しておきます。

と言っても、私も以下のサイトの受け売りで、真似ただけです。こちらの記事も是非参考にしてみてください。

さて、私のブログの実装手順は大きく3つ。それぞれのコードは、Evernoteの方にまとめてありますので、以下のリンクから取得してください。

実装手順は以下の通り。

まず最初にhtml。これを表示させたい場所に書きます。私は今のところ「single.php」にのみ記述していて、タイトル下と記事の末尾に書き込んでいます。

 

次にcss。自分の好きなデザインを作ってみてください。レスポンシブの場合、あまり画像は使わず、cssのみでボタンをデザインする方がおすすめです。

cssだけで作るボタンのサンプルもいっぱいありますので、ぜひ参考にしてみて、自分だけのボタンデザインを作ってみましょう。

 

最後にjquery。これを設置することで、コピーする挙動とコピー後のデザインが作られます。設置場所は、私は</body>の直前に設置しています。触ったファイルは「footer.php」でした。


以上です。実際にどれだけ使われるかは未知数ですが、個人的にはあったら嬉しいボタンだったので、勢いで実装してみました。いかがでしょう?

この記事のURLとタイトルをコピーする
当ブログの管理人
ばんか (bamka)
ばんか (bamka)ウェブディレクター・ブログ運営
iPhone・iPad・Mac。Evernoteなどのウェブサービス。ときどき文房具など。これらを使った『生活に活かせる実用的な活用術』をご提供しています。 管理人は当ブログの運営の他に、ウェブディレクター・ライター・セミナー講師など、いろいろな分野で活動しています。詳細は当ブログのプロフィールページをご覧ください。 各種仕事のご依頼も承っておりますので、ご希望の方はお問い合わせフォームからご連絡ください。
執筆著書
    SNSでフォローする

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です