はてなブログにコピーボタンを実装する方法を難しい言葉を使わずに説明してみた HTML,CSS復習22

この記事でわかること

 

誰でもブログにコピーボタンを実装できてそのコードの意味も全部わかります。またテキストエリアの装飾方法もわかります。
プログラム？javascript？なにそれ？おいしいの？状態でも大丈夫です。コピペ用のスタイルシート、スクリプトはページの最後にあります。

こんにちは。
ブログ(はてなブログ)にコピーボタンを実装しようとして他のサイトを見てみたら

難しい言葉が並んでる...
javascript...何それ？おいしいの？
コピペして使おうと思っても作動しない！

そんな感じで無理って思って諦めたことはありませんか？

実ははてなブログではサポートしていない機能があるので
ややこしいスクリプトは作動しないんです。

そこで今回はブログにコピーボタンを実装する方法をすごくわかりやすく
難しい言葉を使わずに説明してみました。

ブログにコピーボタンを実装するには

まずはブログの編集モードをMarkdownに変更してください。

・それからまずコピーしてもらえるテキストエリアを作ります。

id="好きな名前"を入れておきます。

今回はcopy1にします。

<textarea id="copy1" readonly>
ここにコピーしてほしい文章を入力する
</textarea>

readonlyの意味は こっから好きに読み取ってもいいよ！どうぞどうぞ！っていう意味です。

・次にボタンを作ります。

またボタンに好きな名前をつけておきます。

今回はcopybutton(1)にしておきます。

(1)のように番号をつけておくとページ内にいくつもコピーボタンが作れるようになりますよ。

<button onclick="copybutton(1)">コピー</button>

onclickの意味は クリックしたら何か起きるボタンだよ！っていう意味です。

ここまでまとめると次のようになります。記事中に入力します。

<textarea id="copy1" readonly>
ここにコピーしてほしい文章を入力する
</textarea>

<br>

<button onclick="copybutton(1)">コピー</button>

実際にはこうなります。
ここにコピーしてほしい文章を入力する
コピー

でもこのままだと何も起きないのでコピーさせる機能を実装していきます。
まずは全部のせてから一つ一つ説明していきます。 <script> function copybutton(id) { var target = document.getElementById('copy1'); target.select(); document.execCommand("Copy"); alert("「 " + target.value + "」がコピーできました。"); } </script>

function copybutton(id) {

copybutton(id)はコピーボタンを作った時に作った名前です。

idはその時に作った番号1のことです

copybutton(1) copybutton(2)とすれば同じページにいくつもボタンが作成できます。

    var target = document.getElementById('copy1');

targetはテキストエリア内に入力した内容を入れる箱です。好きな名前で大丈夫です。

copy1は一番最初にテキストエリアを作った時のテキストエリアの名前です。

documentは文書の意味でgetElementByid('copy1')でその文書の内容を読み取りtargetに入れます。

    target.select();

targetに入ってる文章を選択してコピーできる準備をしています。

    document.execCommand("Copy");

document.execCommandでtargetに入ってる文章をついにコピーします。

    alert(target.value +" がコピーできました。");

alertでコピーしてもらった後に表示する文章を決めます。

targetにはいってる文章(値)(value)を表示させるにはtarget.valueと入力します。

表示させる文章をつなげる場合はプラス記号(+)を使い

target value +"つなげる文章"を入力します。

ここまでまとめると次のようになります。

全て記事中に記入します。

<textarea id="copy1" readonly>
ここにコピーしてほしい文章を入力する
</textarea>
<br>
<button onclick="copybutton(1)">コピー</button>
<script>
function copybutton(id) {
    var target = document.getElementById('copy1');
    target.select();
    document.execCommand("Copy");
    alert(target.value +" がコピーできました。");
}
</script>

実際にはこうなります。

ここにコピーしてほしい文章を入力する

コピー

・最後にテキストエリアの見た目をよくするためにスタイルシートで装飾していきます。

背景色をseashell色にして、テキストエリアの幅、高さを調整します。

今回は幅を500px; 高さを100pxにしてみます。

widthは幅、heightは高さです。

テキストエリアのスタイルシート

textarea.copyyou{
width:500px;
height:100px;
background-color:seashell;
}

すると記事中はこうなります。

追加したスタイルシートのクラスcopyyouを

class="copyyou"として追加しています。

<textarea id="copy1" class="copyyou" readonly>
ここにコピーしてほしい文章を入力する
</textarea>
<br>
<button onclick="copybutton(1)">コピー</button>
<script>
function copybutton(id) {
    var target = document.getElementById('copy1');
    target.select();
    document.execCommand("Copy");
    alert(target.value +" がコピーできました。");
}
</script>

実際にはこうなります。
ここにコピーしてほしい文章を入力する
コピー

今回のコピペ用スタイルシート

textarea.copyyou{ width:500px; height:100px; background-color:seashell; }

スタイルシートをコピーする

今回の記事中のコピペ用スクリプト

<textarea id="copy1" class="copyyou" readonly> ここにコピーしてほしい文章を入力する </textarea> <br> <button onclick="copybutton(1)">コピー</button> <script> function copybutton(id) { var target = document.getElementById('copy1'); target.select(); document.execCommand("Copy"); alert(target.value +" がコピーできました。"); } </script>

記事中のスクリプトをコピーする

このページは私が勉強、復習しながら作っているページです。

どんどんできることがすごい増えてきました。

これからもブログに特化した使えるHTMLタグ、CSSをこれからも紹介していくので

読者登録もよろしくお願いします。

今後の目標はもっとできることを増やしていって、一つ一つの記事のクオリティを上げていくことでです。
来年の１２月ぐらいからの収益化を目指してクオリティの高いページをそれまでに500記事書いていく予定です。

ecnavi.jp