Copy Anything to Clipboardの使い方

Q: 文章の一部だけをコピーできるようにするには？

ショートコード [copy] を使います。コピーさせたい文字を [copy] と [/copy] で囲むと、その部分だけをクリックでコピーできます（プラグインの説明、2026年10月3日確認）。

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

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

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

この記事の内容のご相談は株式会社bundlyzeへbundlyzeのWebサイト制作について見てみる

この記事では、WordPressの記事に、特定の文字をワンクリックでコピーできるボタンを付ける方法を紹介します。完成するのは、次のような枠です。

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

紹介するCSSやHTMLは、自由に使ってください。

WordPressにコピーボタンを付ける流れ（Copy Anything to Clipboardの使い方）

Copy Anything to Clipboardの使い方は、「プラグインを入れる→設定画面でコピーボタンを作る→追加CSSで見た目を整える→記事のカスタムHTMLにHTMLを貼る」の4段階です。

プラグイン「Copy Anything to Clipboard」をインストールして有効にする
設定画面の「Add new」でコピーボタンを作る（初めはデフォルトのままでよい）
「外観」→「カスタマイズ」→「追加CSS」に、枠の見た目のCSSを貼る
記事に「カスタムHTML」ブロックを足し、コピーさせたい文字をHTMLで囲んで貼る

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

Copy Anything to Clipboardは、WordPress.orgで無料公開されているプラグインで、管理画面の「プラグインを追加」から検索して入れられます。2026年10月3日時点で、最新版は5.5.3（最終更新は2026年8月20日）、有効インストール数は1万件以上です（WordPress.org のプラグインページ、2026年10月3日確認）。

シンプルなデザインのコピーボタンを追加できるので、デザインに特にこだわりがない方に向いています。

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

新規プラグイン追加

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

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

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

コピーボタンは、プラグインの設定画面で「Add new」を押し、タイトルとボタンの見た目を決めて「Create」を押すと作れます。

インストールした「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」から有料プランに切り替えます。料金は、1サイト用のSingle Siteが年39ドル（買い切りなら119ドル）、サイト数無制限のUnlimited Sitesが年149ドル（買い切りなら249ドル）です（公式の料金ページ、2026年10月3日確認）。

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

CSSをブログ内に追加する

コピーする文字の枠線や背景色は、WordPressの「外観」→「カスタマイズ」→「追加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;
}

最後に記事内へ追加する

記事にコピーボタンを出すには、ブロックエディターで「カスタムHTML」ブロックを追加し、コピーさせたい文字を <pre><code> で囲んだHTMLを貼ります。

カスタムHTMLブロックを追加

記事内で、「カスタムHTML」を追加します

ブロックの追加メニューで「カスタムHTML」ブロックを選ぶ画面

↓

追加できたら、下記のように表示されます

記事に追加した、空の「HTMLを入力…」と表示されるカスタムHTMLブロック

HTMLのサンプルを追加

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

html

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

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

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

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

ショートコードで文中の一部だけをコピーさせる方法

文章の途中にあるメールアドレスやコマンドなど、一部だけをコピーさせたいときは、ショートコード [copy] が便利です。コピーさせたい文字を [copy] と [/copy] で囲むと、その部分をクリックするだけでコピーできるようになります。

ブロックエディターでは「ショートコード」ブロックを追加し、次のように書きます。

お問い合わせは [copy][email protected][/copy] までどうぞ

画面に見せる文字と、コピーされる中身を分けたいときは text を使います。[ctc] は [copy] と同じ働きをする短い名前です。

[copy text="https://example.com/"]URLをコピー[/copy]

ショートコードの書き方は、プラグインの説明（readme）に例がまとまっています（2026年10月3日確認）。プラグインには、ブロックエディター用のコピーボタンのブロックも用意されています。

プラグインを入れたら更新も忘れずに

プラグインは便利な反面、更新せずに古い版のまま置いておくと、サイトが攻撃される入口になることがあります。会社のサイトでプラグインを増やすときは、WordPressの改ざん対策と保守の手順｜企業サイト向けで、更新とバックアップの回し方を確かめておいてください。

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

出典

下の3つは、どれも 2026-10-03 に内容を確認しました。

よくある質問

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

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

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

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

文章の一部だけをコピーできるようにするには？

ショートコード [copy] を使います。コピーさせたい文字を [copy] と [/copy] で囲むと、その部分だけをクリックでコピーできます（プラグインの説明、2026年10月3日確認）。

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

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