今回は特定の文字をワンクリックでコピーする機能を、プラグインを使用して、
追加する方法をご紹介します！
実際に追加する機能はこちらです！
この文字はコピーできます！
背景や文字色を変更することもできるので、
気になったものを使ってみてくださいね！
今回紹介する機能は、自由に使用してください！（エンジニアとして嬉しい気持ちになります）
Copy Anything to Clipboardをインストールする
今回使用するプラグインは「Copy Anything to Clipboard」になります！
ジンプルなデザインのコピーボタンを追加できるので、特にデザインへのこだわりがない方におすすめです！
新規プラグイン追加
直接Wordpressの管理画面からインストールする場合は、
新規プラグイン追加メニューから、「Copy Anything to Clipboard」を検索して、
インストールし、有効にします。
Copyボタンを使えるように設定する
インストールした「Copy Anything to Clipboard」が有効になっていることを確認し、
プラグインメニュー
⬇︎
インストール済みプラグイン
⬇︎
Copy Anything to Clipboard
から、「Add new」を選択します
コピーボタンのデザイン設定
ここでは、簡単なコピーボタン機能の設定を行います！
任意のタイトル名と、ボタンの簡単なデザインを設定を行いましょう！
特にこだわりがない方は、デフォルトのまま「Create」ボタンを押下しても問題ございません！
デザインにこだわりたい方は有料プランへ
・ボタンの位置（線の内側か外側か）
・コピーボタンをアイコンにする
など、各種設定は無料で行うことが可能です。
もし、こだわった設定を行いたい場合は、「Upgrade to Premium to Access」を押下して、
有料プランを使ってみるといいと思います。
（料金は年間 $39〜から使えるようです。2026年3月時点)
CSSをブログ内に追加する
上記までは、プラグインを使用して、簡単にコピーボタンを使えるように設定しました。
ここからはCSSを使用して、周りの線や背景色等を設定し、表示できるようにします！
CSSを追加する箇所
外観 ➡︎ テーマ ➡︎ カスタマイズ
を選択しましょう。
私はテーマを「SWELL」を使用しています。
↓
「追加CSS」という項目があるので、こちらにCSSを追加していきます！
追加するCSSのサンプルコード
少し長いですが、追加するソースコードは、下記になります！
下記のコードをコピーし、追加CSSへ貼り付けてください！
もし、CSSについて興味がある方は、それぞれのコードの意味を調べてみるといいかもしれないですね！
今ならChatGPTやGeminiなどのAIに聞いたら、すぐに教えてくれますよ！
html {
font-size: 16px;
}
.code-container {
background-color: #f4f4f4;
border: 1px solid #ddd;
border-radius: 5px;
padding: 0px;
max-width: 100%;
overflow-x: auto;
box-sizing: border-box;
text-align: center;
}
.code-container pre {
margin: 0;
text-align: left;
padding-left: 2rem;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
color: #333;
display: block;
white-space: pre-wrap;
padding: 0;
font-size: 1rem;
}
これでコピー機能のデザイン設定は完了です！
デザインを変更したい方へ
もしコピー機能のデザインを変更したい方は、これから紹介するCSSサンプルコードを参考にしてください！
追加CSS上へ気になるデザインのコードを追加してもらえたら変更できます！
安定の黒と白
これは完全にソースコードやコマンドの紹介に適していますね！
html {
font-size: 16px;
}
.code-container {
background-color: #000;
border: 1px solid #333;
border-radius: 8px;
padding: 15px;
max-width: 90%;
margin: 15px auto;
overflow-x: auto;
box-sizing: border-box;
text-align: center;
box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.1);
}
.code-container pre {
margin: 0;
text-align: left;
padding-left: 1rem;
}
code {
font-family: 'Courier New', Courier, monospace;
color: #FFF;
display: block;
white-space: pre-wrap;
padding: 0;
font-size: 0.9rem;
}
背景色を黄色にして、少しサイズを小さく変更
実際ご自身のブログに貼り付けてみて、デザインがマッチするか試すのもいいかもしれません
html {
font-size: 16px;
}
.code-container {
background-color: #feda75;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px;
max-width: 90%;
margin: 15px auto;
overflow-x: auto;
box-sizing: border-box;
text-align: center;
}
.code-container pre {
margin: 0;
text-align: left;
padding-left: 1rem;
}
code {
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
color: #333;
display: block;
white-space: pre-wrap;
padding: 0;
font-size: 0.9rem;
}
木を連想させるようなデザイン
少し見づらいような気もするけど、これはこれでアリ…？（笑）
html {
font-size: 16px;
}
.code-container {
background-color: #8B5A2B;
border: 1px solid #6B4226;
border-radius: 8px;
padding: 15px;
max-width: 90%;
margin: 15px auto;
overflow-x: auto;
box-sizing: border-box;
text-align: center;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.code-container pre {
margin: 0;
text-align: left;
padding-left: 1rem;
}
code {
font-family: 'Courier New', Courier, monospace;
color: #FFF;
display: block;
white-space: pre-wrap;
padding: 0;
font-size: 0.9rem;
}
爽やかな雰囲気のデザイン
割とこのデザインは見やすいのでは…？
html {
font-size: 16px;
}
.code-container {
background-color: #E6E6FA;
border: 1px solid #9370DB;
border-radius: 8px;
padding: 15px;
max-width: 90%;
margin: 15px auto;
overflow-x: auto;
box-sizing: border-box;
text-align: center;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}
.code-container pre {
margin: 0;
text-align: left;
padding-left: 1rem;
}
code {
font-family: 'Courier New', Courier, monospace;
color: #000;
display: block;
white-space: pre-wrap;
padding: 0;
font-size: 0.9rem;
}
最後に記事内へ追加する
お好みのCSSのサンプルコードを、追加CSSに追加し、デザインの準備が完了したら、
実際にブログ内にコピーボタン機能を追加していきましょう！
カスタムHTMLブロックを追加
記事内で、「カスタムHTML」を追加します
↓
追加できたら、下記のように表示されます
HTMLのサンプルを追加
「カスタムHTML」のブロックの中に、下記のソースを貼り付けましょう！
<div class="code-container">
<pre>
<code>
ここにコピーさせたい文字を、入力する
</code>
</pre>
</div>
下書きを保存して、投稿を表示し、実際に確認してみてください！
このように表示されていると思います！
ここにコピーさせたい文字を、入力する
これでワンクリックコピー機能の設定は完了になります！
最後まで読んでいただきありがとうございました！
