装飾コピーボックス(ナノ版)

装飾コピーボックス２

ナノのコピーボックスをスマホから見るとなんだか異様に広いしグラデが気になる…。
(↓管理画面トップにあるリゼのタグメーカーで作った普通のコピーボックス)

これはナノのフォームのレイアウトがスマホ向け外部CSSであらかじめ指定されているためです。思い通りに装飾するためそれらをタグで上書きします。
CSS不使用。タグのみ。

▼超シンプル

タグ

<form action="."><textarea cols="20" rows="1" style="background:#ffffff;color:#000000;border:1px solid #000000;width:100px;height:auto;font-size:small;padding:1px;overflow:hidden;word-break:break-all;-webkit-border-radius:0px;"><a href="http://nanos.jp/★/">site title</a></textarea></form>

▼角丸

タグ

<form action="."><textarea cols="20" rows="1" style="background:#f1e2f1;color:#723872;border:1px solid #723872;font-size:14px;width:160px;height:auto;padding:3px;overflow:hidden;word-break:break-all;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;"><a href="http://nanos.jp/★/">site title</a></textarea></form>

▼枠線がドット

タグ

<form action="."><textarea cols="20" rows="1" style="background:#f5f5dc;color:#666666;border:3px dotted #666666;padding:3px;width:160px;height:auto;overflow:hidden;word-break:break-all;-webkit-border-radius:0px;"><a href="http://nanos.jp/★/">site title</a></textarea></form>

▼模様つき

タグ

<form action="."><textarea cols="20" rows="2" style="background:#c7e2e2;background-image:url(素材URL);color:#387272;border:1px solid #387272;width:160px;height:32px;word-break:break-all;"><a href="http://nanos.jp/★/">site title</a></textarea></form>

↓みずたま模様素材。背景透過。

▼斜め

タグ

<form action="."><textarea cols="20" rows="1" style="background:#000000;color:#ffffff;border:1px solid #000000;padding:3px;width:160px;height:auto;word-break:break-all;-webkit-transform:rotate(-5deg);-moz-transform:rotate(-5deg);-ms-transform:rotate(-5deg);-o-transform:rotate(-5deg);transform:rotate(-5deg);"><a href="http://nanos.jp/★/">site title</a></textarea></form>

▼円

タグ

<form action="."><textarea cols="20" rows="2" style="background:#fff4fa;color:#ffaad5;border:2px solid #ffaad5;font-size:12px;padding:10px;width:50px;height:50px;overflow:hidden;word-break:break-all;-webkit-border-radius:25px;-moz-border-radius:25px;border-radius:25px;"><a href="http://nanos.jp/★/">site title</a></textarea></form>

DESIGN TEMPLATEへ/TOPへ