こんなお悩みを解決します。
この記事を読むと何ができるの？
ブログにコピーボタンを設置することができます。
コピーボタンとは、そのボタンを押すことで対象のテキストがクリップボードにコピーできるボタンのことで、CSSやjavascriptなどのコードを掲載するときに設置しているとブログの読者的に便利です。
この記事を読んで実装できるのは↓のような見た目のコピーボタンです。
実装できるコピーボタンの例
実装できるのは３パターン
- 右上に「Copy」ボタンが表示されるやつ
- 右上にアイコンが表示されるやつ
- 対象のテキストにカーソルを合わせるとボタンが表示されるやつ
いずれも表示される文字列は変更できます。
WordPress（ワードプレス）のブログにコピーボタンを設置方法
早速やり方を説明していきます。
流れとしてはこんな感じ。
- プラグイン『Copy Anything to Clipboard』をインストールする
- 表示するコピーボタンの詳細を設定する
- 実際に記事で使ってみる
手順①：プラグイン『Copy Anything to Clipboard』をインストールする
step
1Wordpressの管理画面にログインして左のメニューから［プラグイン］→［新規追加］を選択します
［プラグイン］→［新規追加］を選択
step
2右上のキーワード入力欄に「Copy Anything to Clipboard」を入力する
入力するキーワードをコピーする（右上のアイコンからコピーできます）：
step
3下記の「Copy Anything to Clipboard」をインストールする
書類二枚重なってるやつ
step
3インストールした「Copy Anything to Clipboard」を有効化する
有効化をぽち
手順②：表示するコピーボタンの詳細を設定する
プラグインを有効にしたら、コピーボタンの詳細を設定します。
step
1管理画面の左メニューから［Copy to Clipboard］→［Add New］をクリックする
新規作成の方法
step
2表示された画面で詳細設定をし、［Create］ボタンをクリックする
下記の画面が表示されるので、詳細を設定していきます。
設定内容の説明は後述しますが、画面右側にある［Preview］欄に今のまま保存したらどのように表示されるかがお試し表示されているので、確認しながらやっていくのが◎です。
赤枠のところに現在の見え方が表示される！便利！
設定項目を順番に説明すると
| 項目 | 設定内容 | 備考 |
|---|---|---|
| Selector | 投稿内で使うタグ名を設定する |
例えば「pre」とした場合、投稿内で <pre>あああああ</pre> とすることで「あああああ」がコピーの対象になる ここで設定した文字を<>の中に入れて使う |
| Style |
ボタンの表示スタイルを下記から選択する
|
|
| Button Position |
ボタンの表示位置を下記から選択する
|
枠線の内側（inside）が外側（outside）を選択できる ※［Style］で「Button」「SVG Icon」を選んだ時だけ表示される |
| Botton Text | ボタンの表示名を設定する |
例えば「コピー」と入力すると、ボタンが「コピー」ってなる ※［Style］で「Button」「Cover」を選んだ時だけ表示される |
| Button Copy Text | コピーしたあとに表示される文言を設定する | 例えば「コピーしました！」とか「コピーに成功しました！」とかに変更できる。 |
| Button Title | ボタンにカーソルを合わせたときに表示される文言を設定する |
このボタンを押すと何するのか？を説明する文を設定できる。 例えば「クリップボードにコピーする」とかに変更できる。 |
| Create | 設定保存ボタン | 設定が終わったら最後に押す |
手順③：実際に記事で使ってみる
step
1記事の編集画面で先ほど設定したタグを使用し、コピーしたい文を囲む
<pre>これをコピーする</pre>
と記述すると
これをコピーする
みたいになります
<>で囲んだコードを使用するときはエディタをテキストモードに切り替える必要があります。
もっと便利に使う
っていう場合は、便利なプラグイン『AddQuickTag』を使うのがおすすめです。
-
-
便利なプラグイン『AddQuickTag』で快適にブログを書く！
続きを見る
まとめ：『Copy Anything to Clipboard』でコピーボタンを設定する！
以上でコピーボタンを設定する方法の説明は終わりです。
他にも『これどうするの？』等があればお気軽にコメントください！
可能な限りで答えますし、一緒に調べます(^^)/
おまけ：お手軽にコピーボタンを表示する方法
自分でカスタムはできないですが、もっとお手軽にコピーボタンを表示する方法も併せて紹介しておきます。
- 『Copy Anything to Clipboard』をインストール→有効化する
- 投稿記事でショートカットコード［copy］［/copy］を利用する
例えば、投稿記事で↓のようなコードを記載したとします。
[copy]と[/copy]でコピーさせたい文章を囲む
↓↓↓するとこんな感じで表示されます↓↓↓
コピーしたい文字列↑↑↑こんな感じ↑↑↑
ボタンの表示は「Copy」に限定され、コピー成功時は「Copied!」に限定されます。
でもめっちゃ簡単。
