以前からブログに設置したいと思っていた『この記事のタイトルとURLをコピーする』ボタンをようやく設置しました♪

今回はこの設置方法の紹介になります。

■【Blogger備忘録】『この記事のタイトルとURLをコピーする』ボタンを設置する（jQuery使用）

目次[非表示]

●使用するサービス？（jQuery）
●使い方・設定方法
●使用感
- ・PCサイト
- ・モバイルサイト
●改善したい点
●まとめ
○参照サイト（外部リンク ⧉）
○関連情報
- ・関連記事（本ブログ内🔗）

●使用するサービス？（jQuery）

コレです。

jQuery

jQueryとはJavaScriptのライブラリだそうで、

JavaScriptでは何行にも渡る処理を簡便に記載できるとのことです。

残念ながら私はjQueryの事を全く分かっていないのですが、次の記事（外部サイト）に今回のボタンの記事が詳しく載っていました。

コピペで使える！ブログ記事タイトルとリンクをワンタップでコピーするボタン実装 - メルマガ影織通信

以下の『●使い方・設定方法』で紹介しているソースコードはほぼほぼこの記事からの引用になります🙇。

（jQueryの有効化・およびボタンの装飾の一部は本記事のオリジナルです。）

●使い方・設定方法

Bloggerの『テーマ』>『HTMLを編集』画面で以下の編集を行います。

・jQueryの有効化（CDNの読み込み）

まず、BloggerでjQueryを使えるようにします。

『</head>』の前に以下のコードをコピペします。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js'/>

今回引用した記事には本件の紹介が無かったのですが、私の場合、この有効化をしないとボタンが動作しませんでした。

・ボタンの設置

ブログ内でボタンを置きたいところに以下のコードをコピペします。

<div class='copy_btn' data-clipboard-text=''>
  この記事のタイトルとURLをコピーする
</div>
 
<script src='https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js'/>
 
<script>
var clipboard = new Clipboard(&#39;.copy_btn&#39;);    //clipboard.min.jsが動作する要素をクラス名で指定
 
//クリックしたときの挙動
jQuery(function(){
  var title = jQuery(&#39;title&#39;).text(); //タイトル取得
  var url = location.href; //URL取得
  jQuery(&#39;.copy_btn&#39;).click(function(){
    jQuery(this)
      .attr(&#39;data-clipboard-text&#39;, title + &#39; &#39; + url) // コピー内容生成
      .text(&#39;コピーしました&#39;); // ボタンを押した後のテキスト切り替え
  });
});
</script>

・ボタンの装飾（CSS）

BloggerのテーマでCSSを記載する『]]></b:skin>』の前に以下のコードをコピペします。

div.copy_btn{
  display:block;
  width: 85%;
  padding:0.5em 0em;
  margin:1em 0.5em 0.5em 0;
  border-radius:0.5em;
  border: 2px solid;
  font-weight:bold;  /*文字の太さ*/
  text-align:center;  /*行揃え（中央寄せなど）、均等割り付けの設定*/
  position:relative; 
}
div.copy_btn:active{
  box-shadow:inset 0 0.6em 2em -0.3em rgba(0,0,0,0.15),inset 0 0 0em 0.05em rgba(255,255,255,0.12);
}

設定は以上です。

●使用感

実際にボタンを設置してみると以下のような感じです。

・PCサイト

無事に設置できました！

ボタンをクリックしてみると文字が変わります。狙い通りです♪

クリップボードにコピーされた文字列は

IFTTTの先へ: 【Blogger備忘録】トップページに表示される記事の件数が設定より少ない問題を対策する（『追記を挿入』タグ使用） https://beyondifttt.blogspot.com/2024/11/blogger.html

のような感じ（例）です。

バッチリですね😋。

・モバイルサイト

モバイルサイトでもいい感じです。

●改善したい点

PCサイトでカーソルをもっていった時にカーソルが手マーク（👆🏻）になりません。なんとかしたいと思っていますが、私はjQueryの知識が全く無く…😅。

●まとめ

jQueryを使って無事に『この記事のタイトルとURLをコピーする』ボタンを設置することができました。大満足です😋。

メニュー