ブログ

クリックするだけでテキストをコピーできるボタンを作る《ワードプレス》

メルカリの記事を書いていて思ったのが、ボタンをクリックしたら招待コードがコピーできたら便利だよな~ということ🤔

スマホで文章の一部分をコピーするのって、なかなか難しい!」

そんなこんなで調べ漁って、htmlやCSSなどを使って、クリックしたらテキストをコピーできるボタンを実装することができました。

こんなやつ!
 「ひちょコツ」を
クリックでコピー

 

このボタンをクリックして、貼り付けを行うと「ひちょこの暮らしレシピ」が出てくると思います✨

必ずバックアップを取ってからやってみてくださいね!

《テキストのコピーボタンを作る》CSSに追加する

まず、ボタンを作るコードを作ります。

サルワカさんの記事fas fa-external-link-altのボタンを参考にさせていただいたので、ご自身で好きな色や形に変更してみてくださいね☺

[color:#ffffff]の部分が文字色で、[background:#000000]の部分が背景になるので、お好きな色に変更してくださいね✨

 

《テキストのコピーボタンを作る》BODYタグに追加する

わたしが使っているテーマ「JIN」だと、ダッシュボードのHTMLタグ設定のBODY内に埋め込みます。

ここ!
コピーするボタンを作る

ない場合は、</BODY>タグの直前に埋め込んでくださいね!

スペースなどないように、慎重にコピペしてください!

WEB企画LABOさんの記事fas fa-external-link-altを参考にさせていただきました。

 


《テキストのコピーボタンを作る》HTMLで書き出す

こちらのコードを、htmlに貼り付けてると、下記のボタンが反映されます!

 おつかれさま(*´ω`*)!をコピーw

 

また、上のテキスト「おつかれさま」の左側にある矢印ボタンを入れたコードがこちらです👇

 

まとめ

あんまり需要がなさそうだけど…(笑)自分の備忘録として残しておきました!

お読みいただきありがとうございました。

参考になると嬉しいです!

JINカスタマイズまとめ★
ワードプレス「JIN」をカスタマイズして自分色のブログにしよう!ワードプレスのテーマ JIN は、カスタマイズ機能が豊富なのでマニュアルに沿っていけば、じゅうぶんすぎるくらい素敵なブログが出来上がりま...
関連記事