[
[返信する]]
拍手欄のフォームのレイアウトを変えたい
by 豆大福
2014-10-20 17:12
拍手欄のフォームについて、色々な所で検索したのですが出来なかったので教えて頂きたいです。
ブログ全体のフォームの設定をcssで作りたいのですが、cssの説明を読んでも難しく理解できないので教えて頂きたいです。
1.フォームの幅を狭く(縦にも横 にも
2.フォームの枠を細めに
3.丸角の変更
4.小さめの送信ボタン
<style type="text/css">
input{
border: 1px #f9f4ff solid;
font-family:Georgia,ヒラギノ明朝 ProN,sans-serif;
font-size:5px;
color:#654321;
background-color:#ffffff;
}
</style>
今は上記を共通HEADに入れているのですが、フォントしか反映されませんでした。
沢山の要望で申し訳ありませんが、よろしくお願い致します。
pc
[編集]
by な
2014-10-20 22:29
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=255&viewType=thread
『拍手 装飾』で検索。こちらは参考になりませんでしたか？
それと大手検索サイトでCSSなどを詳しく説明してくれている支援サイトもたくさんあります。ご活用なさってみてはいかがでしょうか。
pc
[編集]
by 豆大福
2014-10-20 23:35
な 様
ご回答ありがとうございます。
そちらも見させて頂いたのですが、少し求めている事と違っていました。わざわざ申し訳ありません。
大手検索サイトや質問サイト等で出来うる限り調べたつもりなのですが、私の知識では上記のcssが精一杯でした。
貼って頂いたURLにあるcssですと、"そのcssを記載した部分にそのデザインの拍手欄が作られる"と思うのですが、私的には"元々ある拍手にそのデザインを反映させたい"という感じな事がしたいです。
私の調べた上記のcssではフォントしか反映されていないのですが、このcss全体が間違っているのでしょうか？
それとも一部分程直せば反映されるのでしょうか？
質問が多くて申し訳ありません。
pc
[編集]
by トクメイ
2014-10-20 23:41
使用端末がスマホならスマホ向け外部cssで上書きされているため親トピの記述だと反映しません。
例えば、input[type="text"] といった記述になります。
スマホ inputで検索してみてください。
追記
textが入力欄、submitが送信ボタンです。拍手フォームのタグのソースを見るとわかりやすいです。
font-size:5px; だとかなり文字が小さいです。コメント入力欄にこのサイズはやめた方がいいです。いの一番に苦情がきます。
送信ボタンは width:1em; height:1em; などでサイズ指定できます。入力欄も同様です。
font-family:Georgia,'ヒラギノ明朝 ProN',sans-serif;
全角文字、半角スペースを含む場合は、上記のように「'」か「"」で囲みます。
角丸は、検索エンジンにて input 角丸で検索するといいです。
pc
[編集]
by 豆大福
2014-10-21 00:07
トクメイ 様
ありがとうございます。
今PCで見た所、PCでは反映されていました。
inputで調べて見た所丸角を取るというサイトがありまして下記を入れてみたのですが、何も反映されませんでした。
input[type="button"],,input[type="text"]input[type="submit"] {
-webkit-appearance: none;
border-radius: 0;
}
親トピのcssをスマホ向けに変換するという事は可能なのでしょうか？
それともスマホではこれが限界なのでしょうか？
pc
[編集]
by トクメイ
2014-10-21 00:31
そのcss セレクタであってます。
input[type="button"]は不要なので削除しましょ。
反映しなかったのは「,」の位置が間違ってるからですね。コピペミスかな。
横幅縦幅のサイズ違うでしょうから
input[type="text"] (入力欄)とinput[type="submit"] (送信ボタン)は別々に記述します。
pc
[編集]
by 豆大福
2014-10-21 14:11
ありがとうございます！お陰様で希望通りのレイアウトにする事が出来ました！
ただもう一つだけ質問がしたいです。
複数行のフォームなのですが、入力しようとクリックすると5段の行が現れるのですが、普通の状態だと一行フォームになってしまいます。
rowsを入れてみたりしたのですが出来ず、下記の状態からどうすればいいのかが分からずにいます。どうしたら元から複数フォームに出来るのでしょうか。
textarea:focus
{border: 1px #dddddd solid;
font-family:Georgia,ヒラギノ明朝 ProN,sans-serif;font-size:10px;color:#654321;width:25em; height:5em; }
pc
[編集]
by トクメイ
2014-10-21 18:17
textarea:focus { } はタップとかクリックしたあとですね。背景色とか記述するとわかりやすいです。
font-familyは記述の仕方を前レスに追記してありますので、修正した方がいいです。
それで本題ですが。
どこかに textarea { height:○; } という記述あります。これのheight:○; の記述を消すか、数字を変更してみてください。
pc
[編集]
by 豆大福
2014-10-21 22:04
:focus はそういった意味だったんですね！
:focus を消去したら全て上手くいきました！ご丁寧に教えて下さり本当にありがとうございました！！
pc
[編集]
[返信する]
[
戻る
]
[返信する]]
2014-10-20 17:12
pc
戻る
]