装飾コピーボックス

リンクフリーのサイトにお邪魔すると、置いてありますよね。こういうの。

☆このサイトはリンクフリーです☆

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

閲覧者にコピー＆ペーストしてもらうために置いてある、元から内容が書き込まれたテキストエリアのことをコピーボックスと呼びます。
携帯向けサイトを運営しているのであれば、あると親切です。

上のコピーボックスはフォレストページの独自タグで作った、何の装飾もしてないデフォルトのものですが、タグを使えばカスタマイズの幅が広がります。
今回はCSSを使わずあくまでタグだけで作った、装飾コピーボックスをご紹介。(見本には実際にサイトに置いたときのイメージがつかみやすいよう、はくがいがいのリンクタグを入れてます)

---

▼シンプルに。PCで見たときボックス端に出てくるスクロールバーの矢印を消してます。

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

タグ。

<form action="."><textarea cols="20" rows="1" style="background:#ffffff;color:#000000;border:1px solid #000000;font-size:small;width:120px;padding:1px;overflow:hidden;word-break:break-all;">ここに文字を入れます</textarea></form>

---

▼角丸。

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

タグ

<form action="."><textarea cols="20" rows="1" style="background:#f1e2f1;color:#723872;border:1px solid #723872;font-size:14px;padding:3px;overflow:hidden;word-break:break-all;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;">ここに文字を入れます</textarea></form>

---

▼枠線がドット。

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

タグ

<form action="."><textarea cols="20" rows="1" style="background:#f5f5dc;color:#666666;border:3px dotted #666666;padding:3px;overflow:hidden;word-break:break-all;">ここに文字を入れます</textarea></form>

---

▼みずたま模様

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

タグ。background-image:url(みずたま模様素材URL)の部分、カッコ→url()は消しちゃだめです。

<form action="."><textarea cols="20" rows="2" style="background:#c7e2e2;background-image:url(みずたま模様素材URL);color:#387272;border:1px solid #387272;word-break:break-all;">ここに文字を入れます</textarea></form>

---

▼斜め。誰得だ。

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

タグ

<form action="."><textarea cols="20" rows="1" style="background:#000000;color:#ffffff;border:1px solid #000000;padding:3px;word-break:break-all;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg);">ここに文字を入れます</textarea></form>

---

▼円。もはやコピボに見えない(笑)

<a href="http://id35.fm-p.jp/291/western442/">はくがいがい</a>

タグ

<form action="."><textarea cols="20" rows="2" style="background:#fff4fa;color:#ffaad5;border:2px solid #ffaad5;font-size:12px;width:50px;height:50px;padding:10px;overflow:hidden;word-break:break-all;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;">ここに文字を入れます</textarea></form>

---

※ナノのフォームはスマホ向け外部cssで上書きされているため、自分でカスタマイズしようと思ったらwidthとheightを設定し直す必要があります。
→装飾コピーボックス(ナノ版)へ。

気が向いたら増えます。