【HTML/CSS】クリックするだけでテキストをコピーできるボタン【ワードプレス】

ブログを書いていて思ったのが。ボタンをクリックしたら、招待コードなどのテキストがコピーできたら便利だよな～ということ

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

ということで、本記事は、htmlやCSSなどを使って、クリックしたらテキストをコピーできるボタンを実装する方法を記載します。

▼こんな感じのです▼

このページをコピーする

このボタンをクリックして、貼り付けを行うと、このページのURLが出てくると思います。

この作業は、必ずバックアップを取ってからやってください

クリックするだけでテキストをコピーできるボタンを作成

『テキストのコピーボタンを作る』を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タグに追加する

下記を、

</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>

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

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

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

<div class="copy_btn" data-clipboard-text="おはようございます">「おはようございます」をコピーする</div>

「おはようございます」をコピーする

HTMLの基本の書き方

基本のHTMLは、HTML宣言・htmlタグ・headタグ・titleタグ・bodyタグでできています。それぞれの書き方を紹介します。

HTML宣言

HTMLファイルは、1番初めに「HTML宣言（ドキュメントタイプ宣言）」を書きます。

<!DOCTYPE html> <-- HTML宣言
<html>
<head>
  <title>ページごとの内容</title>
</head>
<body>
  内容(コンテンツ)
</body>
</html>

HTML宣言は決まり文句のようなもので、 ↑と書くことで「このファイルはHTML文書です」という宣言の役割を果たします。HTML宣言には、終了タグは不要です。

htmlタグ

HTML宣言の下に「htmlタグ」を書き、コード全体を囲みます。

<!DOCTYPE html> 
<html> <-- HTML開始タグ
<head>
  <title>ページごとの内容</title>
</head>
<body>
  内容(コンテンツ)
</body>
</html> <-- HTML終了タグ

これによって、<html></html> で囲んだ部分が「HTMLコードです」という意味になるため、HTMLファイルを作成する際は必ず書くようにします。

headタグ

「htmlタグ」の中に「headタグ」を書きます。<head></head> で囲んだheadタグの中には、そのWebページの情報や設定を書きます。

<!DOCTYPE html> 
<html> 
<head> <-- head開始タグ
  <title>ページごとの内容</title>
</head> <-- head終了タグ
<body>
  内容(コンテンツ)
</body> 
</html>

headタグの中には、文字コード・検索ページで表示される概要・CSSファイル・タイトルなどが入ります。

head内に記入した内容は、あくまでもブラウザへの情報や設定ですので、Webページの画面には表示されません。

titleタグ

headタグの見出しでも触れたとおり、「titleタグ」はWebページのタイトルを示します。

titleタグ内の文は、ページ名としてブラウザのタブ・検索エンジン・SNSなどに表示されます。

<!DOCTYPE html> 
<html> 
<head> 
  <title> <-- title開始タグ
   ページごとの内容
  </title> <-- title終了タグ
</head>
<body>
  内容(コンテンツ)
</body> 
</html>

bodyタグ

「headタグ」の下に「bodyタグ」を書きます。<body></body> に囲まれた部分が、実際のWebページの画面に表示されます。

<!DOCTYPE html> 
<html> 
<head> 
  <title>ページごとの内容</title> 
</head>
<body> <-- body開始タグ
  内容(コンテンツ)
</body> <-- body終了タグ
</html>

プログラミング自習に最適な教本

CSS/HTML勉強におすすめの本

・「HTMLとCSSは少しなら分かる」という初心者〜中級者にオススメの本
・「実際にWebサイトをイチから作ってみよう」というコンセプト
・読みながら手を動かすという実習書的な要素が強い
・WEB制作の流れを掴むにはとても良い本。

リンク