CSSでコピーボタンのテキストを「記事タイトルとURLをコピー」に変更する方法
ChatGPT先生お願いして今度は「COPY ボタン」の文字を「COPY」から「記事タイトルとURLをコピー」に変えてもらいました。
SNSボタンは基本「COPY ボタン」だけあれば良い
個人情報保護が叫ばれる昨今ですが、実はブログにSNSボタンを設置すると、ボタン経由で色々な情報がSNSに送られるって知っていましたか。
例えば、ユーザーがそのSNSにログインした状態で、とあるページを訪問した場合（SNSの「ボタン」のクリックの有無は関係なく）そのウェブサイトのURL、ボタンの種類、およびボタンがクリックされた日時などがSNSに送信されるのです。
これはSNSの運営者によって、ユーザー分析に使われ、より正確なターゲティング広告の提供などの目的で使用されます。
これらの情報は、住所や電話番号など個人を特定するものではないものの、外部送信規律という法律によりウェブサイト運営者は「これらの情報を取得していることを」開示しなくてはいけません。
改正電気通信事業法（外部送信規律）は個人ブログでもアフィリエイトやアクセス解析を導入している方は対象です
というのは建前で、実はブログを極力シンプルにしたかったのと、SNSボタンといってもXやフェイスブックなどの主要なSNSボタン以外は必要ないと思ったからです。
そこで大いに活用したいのが「COPY ボタン」です。このボタンは「記事タイトルとURLをコピー」してくれるボタンなのでこれがあれば、どのSNSにも貼り付け可能になりますよね。
しかし「COPY」の文字だけでは意味わからなくないですか。
現在記事下にはXとフェイスブックとLINEのボタンと「COPY ボタン」を置いていますが、上にも欲しいよねということで設置してみたのですが「COPY」だけでは意味不明です。
そこで「COPY」の文字を変えられないかと、ChatGPT先生に聞いてみました。
やり方はいつもの通り、ソースを確認し「COPY ボタン」のコードをChatGPTに貼り付けて、このCOPYの文字を「記事タイトルとURLをコピー」に変えてくださいとお願いするだけ。
COPYボタンのカスタマイズの方法は2つ
ChatGPT先生曰く、COPYボタンのカスタマイズは「HTMLを書き換え」と、「CSSを使う」の2つがあるそうです。
簡単に言うと、「HTML」は根本から変えるもので、「CSS」は見た目だけ変える方法です。
functions.phpなどを使い「HTML」そのものを書き換えると、ソースそのものが書き換わるので、音声読み上げブラウザや、Googleなどの検索エンジン上も見た目が変わりますが、「CSS」はあくまでも装飾なので、ソースそのものが書き換わるわけではありません。
私は見た目だけ変えたかったので、とりあえずいつものCSSのカスタマイズでお願いしました（簡単だしトラブルも少ない）。
※これはあくまでもLuxeritas用です。他のテーマで使えるかは分かりません。
/* ▼記事上のコピーボタンだけ「記事タイトルとURLをコピー」に変更（COPYを消す） */
#cp-button-tops .cpname {
font-size: 0; /* 元の「COPY」を見えなくする */
}
#cp-button-tops .cpname::after {
content: '記事タイトルとURLをコピー'; /* 新しいテキスト */
font-size: 14px; /* お好きな文字サイズ */
color: inherit; /* 元の色に戻す */
}これをCSS（「カスタマイズ」>「追加CSS」）に追記するだけです。
見事、書き換わりました！！
まとめ
単なる「COPY」では意味不明ですが「記事タイトルとURLをコピー」に書き換えることで、ユーザーも理解しやすくなりますよね！！
といっても、今回のこの施策は「ほぼ自分用」です！！
記事をXなどのSNSに投稿するときに、ページを開いてページを記事下までスクロールするのは面倒なので上にも欲しかっただけです。
ということで、今回は記事上だけ「COPY」の文字を「記事タイトルとURLをコピー」に変えてみましたというお話でした。
本当は記事下もこれで良いのだと思いますが、それはまた今度！！
ChatGPT先生に感謝です！！
https://t-blog.tgr-guitar.com/blog-sns-button.html