Luxeritas & Cocoon｜CSSでコピーボタンのテキストを「記事タイトルとURLをコピー」に変更する方法

ChatGPT先生お願いして今度は「COPY ボタン」の文字を「COPY」から「記事タイトルとURLをコピー」に変えてもらいました。

これはサンプルです

SNSボタンは基本「COPY ボタン」だけあれば良い
COPYボタンのカスタマイズの方法は2つ
- Luxeritas用コピーボタン
- Cocoon用コピーボタン
まとめ
この記事を読んでいるあなたにおすすめ

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」）に追記するだけです。

見事、書き換わりました！！

Cocoon用コピーボタン

このブログはテーマをCocoonに変えたので、Cocoonでも同じようにやってみました。

▼

同じくCSS（「カスタマイズ」>「追加CSS」）に追記するだけです。

/* =========================================
コピーリンクボタンをアレンジ
========================================= */

/* ボタン全体 */
a.copy-share-button-sq {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
padding: 0.5em 1em !important;
background-color: #fafafa !important;
border: 1px solid #ddd !important;
border-radius: 6px !important;
box-sizing: border-box !important;
cursor: pointer !important;
}

/* 元のCocoonアイコンを非表示 */
a.copy-share-button-sq > .social-icon {
display: none !important;
}

/* 元の「コピー」を非表示 */
a.copy-share-button-sq > .button-caption {
font-size: 0 !important;
position: relative;
margin-left: 0 !important;
}

/* FontAwesome5アイコンと文字を横並びで表示 */
a.copy-share-button-sq > .button-caption::before {
content: "\f0c5";
font-family: "Font Awesome 5 Free" !important;
font-weight: 900;
font-size: 16px;
display: inline-block;
vertical-align: middle;
margin-right: 0.5em;
color: inherit;
}

a.copy-share-button-sq > .button-caption::after {
content: "記事タイトルとURLをコピー";
font-size: 14px;
display: inline-block;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: inherit;
}

@media (max-width: 600px) {
a.copy-share-button-sq {
padding: 0.4em 0.8em !important;
}

a.copy-share-button-sq > .button-caption::before {
font-size: 14px !important;
margin-right: 0.4em !important;
}

a.copy-share-button-sq > .button-caption::after {
font-size: 12px !important;
}
}