悩む人コピーボタンを設置するのにプラグインの「Copy Anything to Clipboard」を導入したんだけど、本家と見た目が違うし、使い方が分からない。
こういった悩みにお答えします。
本記事で解決できること
- 本家の見た目を再現できる。
- 本家をアレンジした「Copy Anything to Clipboard」を作成できる。
- 【WordPressテーマ「SWELL」愛用者向け】「SWELL」バージョンの「Copy Anything to Clipboard」を作成できる。
※エディターとフロントでほぼ同じ見た目を再現できます。
是非、最後までご覧ください。
「Copy Anything to Clipboard」の使い方を解説する前に、まずは使えるようにしていきます。
管理画面メニューから、「プラグイン」＞「新規追加」を選択します。
「プラグインの検索…」にプラグイン名を入力します。
検索でヒットした後、「今すぐインストール」＞「有効化」します。
下記をコピペ用として置いておきますので必要な方はお使い下さい。
「有効化」後、下記の画面が表示されます。
お好きな方を選択して次に進みます。 ※僕はスキップを選択しました。
※実際は英語表記ですが日本語訳にしています。
「選択」後、下記の画面が表示されます。
これで「Copy to Clipboard」が使えるようになりました。
「Copy Anything to Clipboard」の使い方を解説します。
管理画面メニューから、「設定」＞「Copy to Clipboard」を選択します。
すると既に公開済みのセレクタ（下記画像）があり、追加で作成します。
セレクタとは
下記記事を読むと分かります。
「Add New」をクリックします。
セレクタを作成する画面が表示されます。
「Selector」を決めます。
※【注意】同じセレクタを作成することはできません（下記画像）。
Selectorを「copy」にしました（下記画像）。
ボタンの「Style」や「Button Position」を決めます。
下記を「Style」や「Button Position」を決める参考として置いておきます。
「Copy Format」を決めます。
「Preview」にも反映されず、調べても分からずで根拠もありませんが、たぶん「Default」で大丈夫だと思います🙇♂️
「Button Text」や「Button Title」を決めます。
Button Textを「コピー」、Button Titleを「クリップボードにコピー」にしました（下記画像）。
「Button Copy Text」を決めます。
Button Copy Textを「コピーしました！」にしました。
「Create」をクリックで新たなセレクタの完成です。
作成したセレクタを編集する方法を紹介します。
編集したいセレクタを選択します。
編集する画面が表示されました。
編集は全て手打ちで変更しますので、下記画像を編集の参考にして頂ければと思います。
本家と同じ見た目を再現する方法を紹介します。
管理画面メニューから、「投稿」＞「新規追加」を選択します。
「ブロック挿入ツールを切り替え」をクリックします。
ブロック挿入ツールを切り替えから、「ブロック」＞「ウィジェット」＞「カスタムHTML」を選択します。
挿入された「カスタムHTML」にタグを入力します。
<copy></copy>と入力します。※Add Newで作成したセレクタです。
テキストを入力します。
<copy></copy>の間に入力します。
下記をテキストの入力用として置いておきますので必要な方はお使い下さい。
入力後に「プレビュー」＞「新しいタブでプレビュー」で表示の確認をします（下記画像）。
プレビュー画面が表示されました。
見た目が整っていないため、本家を再現するためにコードを書いていきます。
「カスタマイズ」をクリックします（下記画像）。
カスタマイズの画面が表示されました。
「追加CSS」を選択します。
追加CSSにコードを入力できるようになりました。
下記のコードを「追加CSS」にコピペします。
.copy-the-code-target {
display: block;
background-color: #f5f6f7;
border: 2px solid #ccd0d4;
font-family: monospace;
margin: 0;
overflow: auto;
padding: 1em 2em 1em 2em;
white-space: pre;
word-wrap: normal;
}
.copy-the-code-inside-wrap .copy-the-code-button {
position: absolute;
right: 2px;
top: 2px;
}
見た目が整いました（下記画像）。
下記から本家の見た目を再現した「Style」や「Button Position」を確認できます。
※テキストが見切れていますが、横にスクロールさせることで全文を確認することができます。
続いては、本家のアレンジバーションを紹介します。
本家のアレンジバージョンは、スクロールバーを使用せず全文を表示させ、サイドバーも突き抜けることはありません。
また、「改行せずにテキストを表示させたい」「改行してテキストを表示させたい」、どちらにも対応しています。
本家のアレンジバージョンを紹介します。
※途中までは「本家と同じ見た目を再現する方法」と同じ手順なので「追加CSS」の所から解説を始めます。
「追加CSS」に下記のコードをコピペします。
.copy-the-code-wrap.copy-the-code-style-cover {
display: block;
}
.copy-the-code-target {
display: block;
background-color: #f5f6f7;
border: 2px solid #ccd0d4;
padding: 1.5em;
font-family: monospace;
word-wrap: normal;
}
.copy-the-code-outside {
margin-bottom: -1.5px;
}
.copy-the-code-wrap .copy-the-code-button {
padding: 0px 10px;
}
.copy-the-code-inside-wrap .copy-the-code-button {
position: absolute;
right: 2px;
top: 2px;
}
見た目が整いました（下記画像）。
下記から「本家のアレンジバージョン」の「Style」や「Button Position」を確認できます。
最後に、WordPressテーマ「SWELL」バーションを紹介します。
コピーボタンは表示されませんが、それ以外はエディターとフロントで同じ見た目にすることができます。
【WordPressテーマ「SWELL」愛用者向け】「SWELL」バージョンを紹介します。
「ブロック」＞「ボーダー設定」＞「ボーダーセット管理ページ」を選択します。
「ボーダーセット管理ページ」に移動しました。
ボーダーセットをカスタマイズしていきます。
- ボーダーの太さ：2px
- ボーダーの色：#ccd0d4
「ボーダー設定」からブロックを挿入します。
※変更したボーダーセットが反映されていない場合はページを再読み込みしてみて下さい。
ブロックに背景色を付けます。
- 背景色：f5f6f7
「ブロック」＞「色」＞「背景」を選択します。
タグとテキストを入力します。
「オプション」＞「HTMLとして編集」を選択します。
要素の中身が表示されました（下記画像）。
<p></p>の間に<copy></copy>を入力します（下記画像）。
続いて<copy></copy>の間にテキストを入力します（下記画像）。
下記をテキストの入力用として置いておきますので必要な方はコピーしてお使い下さい。
テキストを入力後、ビジュアル編集をクリックします（下記画像）。
ボーダー内にテキストが入力されおり、背景色も付いています（下記画像）。
では、「プレビュー」＞「新しいタブでプレビュー」で表示の確認をします。
プレビュー画面が表示されました。
※ここからは、「本家と同じ見た目を再現する方法」と同じ手順なので「追加CSS」の所から解説を始めます。
「追加CSS」に下記のコードをコピペします。
.has-border.-border01 {
border: none;
}
.has-border.-border01 {
padding: 0;
}
.copy-the-code-wrap.copy-the-code-style-cover {
display: block;
}
.copy-the-code-target {
display: block;
background-color: #f5f6f7;
border: 2px solid #ccd0d4;
padding: 1.5em;
font-family: monospace;
}
.copy-the-code-outside {
background-color: #fff;
margin-bottom: -1.5px;
}
.copy-the-code-wrap .copy-the-code-button {
padding: 0 10px;
}
.copy-the-code-inside-wrap .copy-the-code-button {
position: absolute;
right: 2px;
top: 2px;
}
見た目が整いました（下記画像）。
※僕はこの作成した「Copy Anything to Clipboard」をブログパーツに登録して、いつでも呼び出せるようにしています。
追加CSSの1行目の.has-border.-border01の「01」ですが、「ボーダーセット: 01」をカスタマイズしたので、「01」であって、「ボーダーセット: 02」をカスタマイズした場合は、「02」となります。
下記からWordPressテーマ「SWELL」バージョンを確認できます。
テキストを入力（追記）する際の注意点です。
ビジュアル編集の状態でテキストを追記します。
テキストを追記しました（下記画像）。
では、「プレビュー」＞「新しいタブでプレビュー」で表示を確認します。
プレビュー画面が表示されました（下記画像）。
見た目が整っていないですが、この状態でコピーします。
テキストをペーストしましたが、追記されたテキストはペーストされていません（下記画像）。
このことから、テキストは「HTMLとして編集」へと変換してから入力（追記）するようにします。
「Copy Anything to Clipboard」の使い方の注意点を解説します。
「ブロック挿入ツールを切り替え」をクリックします。
ブロック挿入ツールを切り替えから、「ブロック」＞「テキスト」＞「整形済みテキスト」を選択します。
「オプション」＞「HTMLとして編集」を選択します。
整形済みテキストの要素が表示されました。
下記画像の通り、整形済みテキストの要素は<pre></pre>です。
では、「プレビュー」＞「新しいタブでプレビュー」で表示を確認します。
プレビュー画面が表示されました。
コピーボタンが表示されています（下記画像）。
これは、「Copy to Clipboard」を導入した段階からデフォルトでセレクタpreが作成されているからです。
ですので、整形済みテキストを使った時にコピーボタンを表示させないようにするためにも「pre」は削除しておきます（下記画像）。
今回は以上です。