テンプレ屋

【nano】名前変換画面レイアウト デザインまとめ(シンプル1)

nanoの名前変換画面レイアウトで使える、デザインのまとめです。
今回はシンプルに実線や破線のものをご紹介します。どんなサイトでも広く使えそうですね。

 
名前変換画面レイアウトには、上記タグをコピペし、適宜数字などを変更して使用してください。小説ページ内にコピペしてもそのまま使えます。
valueの値もサイトに応じてお好きなように変更してください。

実線

実線

枠線の色だけ変えたものです。定番ですね。
高さや幅、色はサイトに合わせてお好きに変えてください。

点線

点線
点線です。
分かりやすいように線の太さを少しだけ太くしています。

破線

破線

破線です。
こちらも点線と同様、線の太さを少し太めにしています。

二重線

二重線

二重線です。
枠の太さを3px以上にしないと機能しません。

凹み風

凹み風

入力枠が奥まった感じの、凹み風。
ボタンが凹んでいるのはちょっと違和感ありますね(笑)
細い枠線の色は、太い枠線の色より少しだけ薄い色にした方が凹み感が出ていいと思います。

凸っぱり風

凸っぱり風

凹み風の逆の、凸っぱり風です。でっぱり風。
ボタンはこちらの方が違和感ないですね。

 
不明な点がありましたらツイッターでお気軽にご質問ください。それではまた次回。

この記事をSNSでシェア