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

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

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

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

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

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

WordPress.org 日本語
Copy Anything to Clipboard Copy Anything to Clipboard is the #1 WordPress plugin with 2,35,110+ downloads 🚀

新規プラグイン追加

新規プラグインのイントールをされたことがない方は、下記を参照してみてください!

        
Copy Anything to Clipboard
        
    

新規プラグイン追加メニューから、「Copy Anything to Clipboard」を検索して、有効にします

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

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

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

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

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

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

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

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

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

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

CSSをブログ内に追加する

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

CSSを追加する箇所

上記のソースを、私の場合テーマとして「SWELL」を使用していますが、

外観 > テーマ > カスタマイズ を選択しましょう

「追加CSS」という項目があるので、こちらCSSを追加し、公開ボタンを押下します

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

少し長いですが、追加するソースコードは、下記になります!
もし、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サンプルコードを参照してみてください!
全然コピーして、記事内で使ってもらって大丈夫です!


安定の黒と白

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

        
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のサンプルコードを選んだら、実際にブログ内にコピーボタン機能を追加していきましょう!

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

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

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

HTMLのサンプルを追加

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

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

下書きを保存して、投稿を表示し、実際に確認してみてください!
これでワンクリックコピー機能の設定は完了になります!

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

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次