MENU
\ このブログのテーマ /
シンプル美と機能性を両立させた、国内最高峰のWordPressテーマ『SWELL』
ブログ内リニューアル中

ボタンをクリックするだけでコピーできるcssカスタマイズ

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

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

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

こんなの

「ひちょコツ」をクリックでコピー

このボタンをクリックして、貼り付けを行うと「ひちょコツ」が出てくると思います♪

ひちょこのアイコン画像ひちょこ

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

目次

クリックしてコピーできるボタンを作る

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

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

コード

/* コピーボタン */
.copy_btn {
width:80%!important;
padding: 12px 0;
margin-left: auto!important;
margin-right: auto!important;
color:#ffffff;
font-weight:bold;
background:#000000;
border: solid 2px #000000;
border-radius: 3px;
transition: .4s;
text-align: center;
}

.copy_btn:hover {
background: #ffffff;
color: #000000;
}
.copy_btn:hover {
cursor: pointer;
}

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

BODYタグに追加する

テーマ「JIN」だと、ダッシュボードのHTMLタグ設定のBODY内に埋め込みます。

ここ

コピーするボタンを作る

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

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

コード

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>
<!– ↓クリップボード操作のために使用するjsを読み込む ( https://clipboardjs.com/ ) –>
<script src=”https://cdn.jsdelivr.net/clipboard.js/1.5.13/clipboard.min.js”></script>

<script>
var clipboard = new Clipboard(‘.copy_btn’); //clipboard.min.jsが動作する要素をクラス名で指定

//クリックしたときの挙動
$(function(){
$(‘.copy_btn’).click(function(){
$(this).addClass(‘copied’); //ボタンの色などを変更するためにクラスを追加
$(this).text(‘コピーしました’); //テキストの書き換え
});
});
</script>

WEB企画LABOさんの記事を参考にさせていただきました。

HTMLで書き出す

設定が終わったので、実際に記事投稿画面で入力してみます!

下記のhtmlを打ち出すとボタンが作れますよ♪

もし表示されない場合は、半角「”」が全角「”」になっている場合があります。半角に変更してくださいね。

コード

<div class=”copy_btn” data-clipboard-text=”おつかれさま!”>「おつかれさま!」をクリックでコピー</div>

「おつかれさま!」をクリックでコピー

まとめ

コピーしてほしい文章があれば使ってみてくださいね♪お読みいただきありがとうございました。

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

この記事が気に入ったら
フォローしてね!

目次
閉じる