やまやまブログ

IT技術ブログ

【WordPress】ワンクリックコピー機能を簡単に追加する方法

WordPressの記事に、ワンクリックで文字をコピーできるボタンを付ける方法です。無料プラグイン「Copy Anything to Clipboard」の入れ方と設定、追加CSSでの見た目の変え方、カスタムHTMLへの貼り方を紹介します。

公開日 最終更新日 by 津嘉山 洸

この記事の結論： WordPressの記事に、ワンクリックで文字をコピーできるボタンを付けるなら、無料のプラグイン「Copy Anything to Clipboard」が手軽です。プラグインを入れて有効にし、設定画面の「Add new」でコピーボタンを作ったら、記事の「カスタムHTML」ブロックにサンプルのHTMLを貼るだけでボタンが表示されます。枠線や背景色は「追加CSS」に貼るCSSで変えられます。

今回は特定の文字をワンクリックでコピーする機能を、プラグインを使用して、
追加する方法をご紹介します！

実際に追加する機能はこちらです！

この文字はコピーできます！
背景や文字色を変更することもできるので、
気になったものを使ってみてくださいね！

今回紹介する機能は、自由に使用してください！（エンジニアとして嬉しい気持ちになります）

Copy Anything to Clipboardをインストールする

今回使用するプラグインは「Copy Anything to Clipboard」になります！
シンプルなデザインのコピーボタンを追加できるので、特にデザインへのこだわりがない方におすすめです！

https://ja.wordpress.org/plugins/copy-the-code

新規プラグイン追加

直接Wordpressの管理画面からインストールする場合は、
新規プラグイン追加メニューから、「Copy Anything to Clipboard」を検索して、
インストールし、有効にします。

WordPressの「新規プラグインを追加」で「Copy Anything to Clipboard」を検索した画面

Copyボタンを使えるように設定する

インストールした「Copy Anything to Clipboard」が有効になっていることを確認し、

プラグインメニュー
⬇︎
インストール済みプラグイン
⬇︎
Copy Anything to Clipboard

から、「Add new」を選択します

インストール済みプラグインの一覧で、Copy Anything to Clipboardの「Add new」を選ぶ画面

コピーボタンのデザイン設定

ここでは、簡単なコピーボタン機能の設定を行います！
任意のタイトル名と、ボタンの簡単なデザインを設定を行いましょう！

特にこだわりがない方は、デフォルトのまま「Create」ボタンを押下しても問題ございません！

コピーボタンの設定画面（Selector・Style・Positionなど）とプレビュー、「Create」ボタン

デザインにこだわりたい方は有料プランへ

・ボタンの位置（線の内側か外側か）
・コピーボタンをアイコンにする

など、各種設定は無料で行うことが可能です。
もし、こだわった設定を行いたい場合は、「Upgrade to Premium to Access」を押下して、
有料プランを使ってみるといいと思います。
（料金は年間 $39〜から使えるようです。2026年3月時点)

StyleをIcon、PositionをInsideにした設定画面。色やサイズの設定は「Upgrade to Premium to Access」と表示される

CSSをブログ内に追加する

上記までは、プラグインを使用して、簡単にコピーボタンを使えるように設定しました。
ここからはCSSを使用して、周りの線や背景色等を設定し、表示できるようにします！

CSSを追加する箇所

外観 ➡︎ テーマ ➡︎ カスタマイズ　

を選択しましょう。
私はテーマを「SWELL」を使用しています。

WordPressの管理画面で「外観」→「テーマ」を開き、SWELLの「カスタマイズ」を選ぶ画面

↓

「追加CSS」という項目があるので、こちらにCSSを追加していきます！

カスタマイズ画面の「追加CSS」にコピーボタン用のCSSを貼り付けた画面

追加するCSSのサンプルコード

少し長いですが、追加するソースコードは、下記になります！
下記のコードをコピーし、追加CSSへ貼り付けてください！

もし、CSSについて興味がある方は、それぞれのコードの意味を調べてみるといいかもしれないですね！
今ならChatGPTやGeminiなどのAIに聞いたら、すぐに教えてくれますよ！

css
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上へ気になるデザインのコードを追加してもらえたら変更できます！

安定の黒と白

これは完全にソースコードやコマンドの紹介に適していますね！

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;
}

背景色を黄色にして、少しサイズを小さく変更

実際ご自身のブログに貼り付けてみて、デザインがマッチするか試すのもいいかもしれません

css
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;
}

木を連想させるようなデザイン

少し見づらいような気もするけど、これはこれでアリ…？（笑）

css
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;
}

爽やかな雰囲気のデザイン

割とこのデザインは見やすいのでは…？

css
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を入力…」と表示されるカスタムHTMLブロック

HTMLのサンプルを追加

「カスタムHTML」のブロックの中に、下記のソースを貼り付けましょう！

html
<div class="code-container">
    <pre>
        <code>
ここにコピーさせたい文字を、入力する
        </code>
    </pre>
</div>

下書きを保存して、投稿を表示し、実際に確認してみてください！
このように表示されていると思います！

ここにコピーさせたい文字を、入力する

これでワンクリックコピー機能の設定は完了になります！

株式会社bundlyzeでは、自社サイトでLLMO（AI検索に見つけてもらうための対策）を実践しています。コピーボタンのような小さな使い勝手も含めて、サイト全体を見直したくなったときの判断の材料は、ホームページは作り直すか直すか｜リニューアルの判断基準にまとめています。

最後まで読んでいただきありがとうございました！

よくある質問

Copy Anything to Clipboardは無料で使えますか？

使えます。コピーボタンの追加と、ボタンの位置やアイコン表示などの設定は無料の範囲でできます。デザインをさらに細かく変えたい場合は有料プランがあるので、料金は公式の料金ページで確かめてください。

管理画面で検索しても、同じ名前のプラグインが見つからないときは？

2026年10月2日時点で、WordPress.orgでの正式な名前は「Copy Anything to Clipboard for WordPress – Copy Button, Copy Text & Copy Code」です（WordPress.org のプラグインページ、2026年10月2日確認）。「Copy Anything to Clipboard」で検索すれば候補に出てきます。

プラグインを使わずにコピーボタンを付けられますか？

付けられます。JavaScriptの navigator.clipboard.writeText() を使えば、ボタンを押したときに文字をコピーする処理を自分で書けます。ただし、見た目やテーマとの兼ね合いも自分で整える必要があるので、手軽さを優先するならプラグインのほうが向いています。

#エンジニア