無料ブログに記事タイトルとURLコピーボタンを実装する

Web制作 - 無料ブログ
この記事は約 2 分で読めます ( 約 1017 文字 )

無料ブログに 記事タイトルとURLコピーボタン を実装する方法を紹介します。

記事タイトルとURLコピーボタンは昨今ではSNSボタンより利用度が高いとも言われています。ご紹介する方法で簡単に実装できますので必要に応じてお試しください。

 

 

記事タイトルと URL コピーボタンの実装に必要なソース構成

 

実装に必要なソースは以下で構成されます。

 

  1. コピーボタンの動作用 JavaScript
  2. コピーボタンの HTML ( 無料ブログ別に異なります )
  3. コピーボタンの CSS

 

 

記事タイトルと URL コピーボタンの実装方法

 

  • 実装は 自己責任 でお願いします
  • HTML / CSS ( スタイルシート ) を編集します。記述や追加場所を間違うとブログが正しく表示しない場合があります

 

 

【 1 】コピーボタンの動作用 JavaScript 設定

 

HTML の </body> の上に次を記述する。

 

 

  • クラス名 copy-button でのサンプルとなります
  • クラス名は任意値でも可ですが HTML / CSS も変更が必要です

 

 

【 2 】コピーボタンの HTML 設定

 

HTML の記事関連 ( または記事のコンテンツ HTML ) の任意の場所 ( カエテンジョイの場合は <!-- エントリフッター --> の上など ) に次を記述する。

記事タイトル変数 記事URL変数 は無料ブログ別に変更する。

 

 

項目 記事タイトル変数 記事 URL 変数
FC2 <%topentry_title> <%topentry_link>
Seesaa・さくら <% article.subject | nl2br | tag_strip | remove_emoji -%> <% article.page_url -%>

 

 

【 3 】コピーボタンの CSS 設定

 

スタイルシート ( style.css ) に次を記述する。

 

 

上記 CSS での表示サンプル

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

 

 

記事タイトルとURLコピーボタンは昨今ではSNSボタンより利用度が高いとも言われています。ご紹介する方法で簡単に実装できますので必要に応じてお試しください。

 

記事タイトルとURLをコピーする
関連記事
記事はありませんでした