今回は特定の文字をワンクリックでコピーする機能を、プラグインを使用して、
追加する方法をご紹介します！
実際に追加する機能はこちらです！
この文字はコピーできます！
背景や文字色を変更するもできるので、
気になったものを使ってみてくださいね！
Copy Anything to Clipboardをインストールする
今回使用するプラグインは「Copy Anything to Clipboard」になります！
ジンプルなデザインのコピーボタンを追加できるので、特にデザインへのこだわりがない方におすすめです！
新規プラグイン追加
新規プラグインのイントールをされたことがない方は、下記を参照してみてください！
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>
下書きを保存して、投稿を表示し、実際に確認してみてください！
これでワンクリックコピー機能の設定は完了になります！
最後まで読んでいただきありがとうございました！
コメント