東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。!】Cocoonトップページをスッキリとサイト型へカスタマイズ!2019.08.042019.12.11【Cocoon】ヘッダーメニューをオシャレに!上部に固定追従!2019.06.262019.12.19どこよりも簡単にJINのトップページをサイト型にカスタマイズ!2019.08.072020.01.29【Cocoon】プロフィールをオシャレで可愛くしてみた!2019.06.242020.02.01【Cocoon】全40通り!おしゃれなリスト(箇条書き)を作る!コピペOK!2019.02.182019.06.11Twitterはこちら仕事依頼はこちら【jQuery】ワンクリックでコピーするボタンを作る【WordPress】TwitterFacebook0はてブ1Pocket0LINE2020.01.03ワンクリック(タップ)でテキストをコピーするボタンを作ります。デモはこちら!このテキストをコピーします。何行あってもコピーします。一瞬でコピーできます。Copyリストでも問題なくコピーできます。リスト1リスト2リスト3CopyWordPressユーザー対象の記事です。知識がなくてもできるようになっていますが既存のテキストやボックスでコピーボタンを設置する場合は少しだけHTMLの知識が必要になります。JavaScriptを使ってるので基本的にAMPでは使えません。Web開発まとめを参考にしています。手順は以下の通りです。手順STEP1CSSコピペstyle.cssにコードをコピペこの手順を見るSTEP2PHPコピペJavaScript用にfunction.phpにコピペこの手順を見るSTEP3HTMLコピペ投稿画面でHTMLコピペこの手順を見るSTEP1:CSSをコピペ下記CSSをコピペしていきます。メモ「外観→テーマエディター→style.css(子テーマ)」。「外観→カスタマイズ→追加CSS」に貼り付けてください。CSSが反映されない場合はスーパーリロード(Ctrl+F5orShift+F5)してください。translateX(250%);}Copyボタンはカラーコードを変更すれば色を変えられます。STEP2:function.phpにコピペJavaScriptを入力するために下記コードをfunction.phpにコピペします。function.phpは少しでも誤るとサイトにアクセスできなくなるので必ずバックアップを取ってから行ってください。);CopySTEP3:HTMLコピペこれで準備はできたのであとはHTMLをコピペするだけです。クラシックエディタの方はAddQuicktag。グーテンベルクの方は「カスタムHTML+再利用ブロック」を使えばいつでも呼び出せます。class="btn-copy-text">Copy</span></div></div>Copy以上です!既存のテキストにコピーボタンを設置するには?テーマにあるボックスなど、デモ用のボックス以外で使うにはHTMLを編集する必要があります。ルール通りにHTMLを組めば、どんなものでもコピーボタンを設置できます。class=”box-name”><p>このテキストにコピーボタンをつけたい。</p></div>のようなHTMLを例に考えます。全体をdivタグで囲います。class=”box-name”><p>このテキストにコピーボタンをつけたい。</p></div></div>手順2:ボタン用のHTMLを入れる先ほどのコードの下から2行目(</div>の上)に下記コードを入れます。class=”box-name”><p>このテキストにコピーボタンをつけたい。class=”btn-copy-text”>Copy</span></div></div>ここのコードはコピーしないでください手順3:classを追加する最後です。コピーしたいテキストを囲ってるdivタグにclass(copy-text)を追加します。copy-text“><p>このテキストにコピーボタンをつけたい。class=”btn-copy-text”>Copy</span></div></div>ここのコードはコピーしないでくださいこれで使えるようになりますが場合によってはさらに工夫する必要があります。その際はコメント欄、もしくは問い合わせよりURL付きでご連絡ください。他にもコピペカスタマイズやってます他にもコピペでできるカスタマイズをやっているので良かったらご覧ください。あわせて読むコピペでできるブログカスタマイズまとめコピペでできるブログカスタマイズまとめ【HTML&CSS】ブロガー、アフィリエイターに役立つブログやサイトのカスタマイズをまとめていきます。HTML、CSSがわからなくてもコピペ可!WordPress(Cocoon、JIN、SANGO、Affingerなど)、はてなブログなど一部機能を除けば誰でも利用可能です。コメントをキャンセルメールアドレスが公開されることはありません。東京在住ぽんひろプロフィールはこちらWebデザイナー×ブロガーで現在3サイト運営してます。1サイト月間43万PV達成!当ブログは2019年2月START!デザインと動物が大好きなアラサーおじさん。