タグ・デザイン掲示板

[

【解決】メールフォームにテンプレが一部だけしか反映されない
by 桃

2016-01-27 22:22
一度このようなレスを見かけてその方法で試してみたのですが結局解決できずご相談します。

デザインを変えたく以前使用していたフォームメールをコピーしてＨＴＭＬなどの情報を書き換えそのまま使用したく思っていたのですが、以前まではその方法で通用したのですが、今回に限りデザインがある一項目しか適用されなくて困っています。
『name』『address』『url』『comment』の順番で、『comment』以外は自由入力一行で設定しています。
そして入力画面レイアウトのタグはこうしてます。

#formStart##mtr4# name<br>#formInput1_25#
#formStart##mtr4# address<br>#formInput2_25#
#formStart##mtr4# url<br>#formInput3_25#
#mtr4# comment<br>#formInput4_24_3#
#formSubmit_submit#
#formEnd#

こうすると『comment』のところだけデザインが適用されていて、他の項目はといえばデザインは適用されていなくとも入力フォームは表示されますし情報を送信することも出来ます。
ですが、入力項目すべてにデザインを適用させたいと考えていてその方法がどうしても分かりません。
多分、ですがＨＴＭＬに問題があるのだと思うのですが…。
タグはこちらです。

<style type="text/css">

@import url(ウェブフォント);

@font-face{
font-family:Fontpoにほんご;
src:url(ウェブフォント);
}

body{
margin:0;
padding:0;
font-size:13px;
color:#0b1b49;
line-height:2;
letter-spacing:2px;
font-family:'Expletus Sans',Fontpoにほんご,Meiryo,メイリオ, sans-serif;
background:#f5f5f5;
text-align:left;
}

@media screen and (max-width:600px){
.menu{
width:240px;
clear:both;
padding:20px 0 0 10px;
}
}

.top{
background:#f0224f;
width:200px;
height:80px;
border-radius:0 0 100px 100px;
font-size:20px;
color:#eee;
text-align:center;
line-height:1;
padding-top:20px;
margin-right:20px;
float:left;
}

.menu{
padding-top:10px;
}
.menu a{
text-align:center;
display:inline-block;
background:#fce35a;
color:#333;
width:50px;
line-height:12px;
padding:19px 0;
margin:0 10px 5px 0;
border-radius:50%;
letter-spacing:0;
}

.menu a:nth-child(2n){
background:#0b1b49;
color:#eee;
}

.menu a:hover{
background:#f0224f;
color:#0b1b49;
}

.all{
clear:both;
max-width:800px;
padding:10px;
padding-top:30px;
margin:0 auto;
}

.ma{
background:linear-gradient(transparent 50%,#fce35a 0);
}

a{
text-decoration:none;
color:#f0224f;
padding:0 3px;
}

a:hover{
color:#fce35a;
text-shadow:none;
}

textarea{
background:#0b1b49;
color:#fce35a;
width:98%;
padding:1%;
display;block;
height:60px;
font-family:'Expletus Sans',Fontpoにほんご,Meiryo,メイリオ, sans-serif;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
}
</style>

こうなっております。
お手数をおかけいたしますが、どなたか解決できる方いらっしゃったらお教えくださると嬉しいです。
よろしくおねがいいたします…！

pc
[編集]

by とくめー

2016-01-27 23:09
#formStart#が複数あります。必要なのは最初に一つだけです。

「comment#formInput4_24_3#」の複数行入力欄は<textarea>というタグで構成され、他の一行入力欄「name#formInput1_25#」は<input type="text">タグで構成されます。

<style type="text/css">～</style>をcssといいますが、親記事のcssにはinputの装飾がありません。

input,textarea {
background:#0b1b49;
}
とすると、背景色が反映します。textareaの「height:60px;」以外はtextareaとinputは同じで問題ないと思いますので。

textarea {
height:60px;
}
input,textarea {
background:#0b1b49;
～省略～
}
とするといいです。

もっと詳細にしたけば、input[type="text"],input[type="radio"],input[type="button"],input[type="reset"],input[type="submit"],select,textareaといったセレクタでできます。

font-family:'Expletus Sans','Fontpoにほんご',Meiryo,'メイリオ', sans-serif;
半角スペース、全角文字を含む場合は「'」で囲みます。

pc
[編集]

by 匿名

2016-01-27 23:23
桃様
URLの編集ありがとうございました。
ルールとマナーの引用は削除させていただきました。

尚、再度ご質問の件についてはこちら↓
http://nanos.jp/nanossupport/bbs/3/list?ThreadID=1710&viewType=thread
トクメイ様のレスがご参考になると思います。

↓他社名も伏せた方が良いし、片方は個人のサイトのようでした。
基本的なルールとマナーに書かれているのは「個人情報は書き込み禁止」で尚且つ、「メールアドレスやURLも書き込み禁止」という内容ですよ。ウェブフォントのURLならここに書き込んで良いって、どこに書いてますか？それともナノに確認を取られたんでしょうか？
ルールとマナーを守りましょう。

＊一部編集しました

追記
とくめー様
ご理解ありがとうございます。URLの書き込みはサイトを荒らされる可能性もありますが、宣伝やいたずら目的の場合もあります。無用のトラブルや誤解を避けるためにもURLの書き込みは控えた方が無難です。特に個人サイトとなると、例えウェブフォントやHTMLやCSSのリファレンスサイト等ナノユーザーにとって有益と考えられるサイトであっても、ここにURLを貼られることでどんなご迷惑をおかけすることになるか分かりません。

そういった意味でも「ウェブフォントのURLなら問題ない」というご指摘は、当方としては根拠もなく納得出来るものではありませんでしたので、基本的なルールとマナー以外のどこかにその記載があるのか、またはご自身でナノに確認されたことがあるのかを確認した次第です。

基本的なルールとマナーについてお二人共にご納得いただけたようなので以降の書き込みは控えます。スレ主様、とくめー様、ありがとうございました。

pc
[編集]

by とくめー

2016-01-28 00:09
いわゆる個人情報はないと思うのですが、両方ともweb fontのurlなので問題はないと思いますよ。

↑
そうですね、すみません。urlがなければ問題すらおこりませんね。
「URLからは荒らし行為をされる可能性が」とありますから、飛んだ先が「404 Not Found」エラーだったので悪さする先がないと思いましたが、みんながそう思うわけではありませんね。

＞ウェブフォントのURLならここに書き込んで良いって、どこに書いてますか？
とても挑発的に感じました。なぜそんなに強い調子でやり込めるように咎めるのでしょうか。指摘はもっと穏やかにして頂きたいです、お願いします。誰かを手伝いたい気持ちがガリガリ削られます。

pc
[編集]

by 桃

2016-01-28 10:49
とくめー様、ごていねいにありがとうございます…！！
早速試してみたのですが…。

input,textarea {
background:#0b1b49;
}

この方法で試すと、確かに背景色は変わりますが、指定したデザインには変わりませんでした。
そしてもう一つの方法である、

textarea {
height:60px;
}
input,textarea {
background:#0b1b49;
～省略～
}

これを試してみたのですが、今度はデザインが大幅に崩れてしまいました…。
もっと詳細に…というタグは、デザインが一切反映されずデフォルトのデザインへと戻ってしまいます。
なにか他に策があれば、お教え願えるととても助かるのですが…。
それと、フォントについても間違いの指摘、ありがとうございます。
共有テンプレートから移してきてそのまま使っていたので気づきませんでした。
お手数をおかけしますが…よろしくお願いいたします…！！

それと、匿名様。
すみません。よく規約を無視しＵＲＬを載せてしまい申し訳ありませんでした。すぐに消しました。
今後はこのようなことが無いよう気をつけたいと思います。

pc
[編集]

by とくめー

2016-01-29 00:19
すみません、説明不足でした。cssはまだ不慣れですよね。

textareaの「height:60px;」以外はtextareaとinputは同じ記述にします。

なので以下のようになります。

textarea {
height:60px;
}
input,textarea {
width:98%;
padding:1%;
display;block;
background:#0b1b49;
color:#fce35a;
border:none;
border-radius:3px;
letter-spacing:1px;
line-height:1.5;
font-family:'Expletus Sans','Fontpoにほんご',Meiryo,'メイリオ',sans-serif;
}

これだとtextarea（複数行）のみ高さ60pxになって、inputの高さ（縦幅）はデフォルトです。

これぐらいはとても簡単な変更なので、cssを勉強してみてください。PC向けサイトがお勧めです。

＞もっと詳細にしたけば
ラジオボタンとか送信ボタンのみ違う色にしたいこともあるかな？と思って提示しましたが、前レスを見るに、ちょっと難しいかな。
たぶん、そのうち使用してるテンプレに巡り合うこともあるでしょうから、その時にお勉強されると楽だと思います。
まずは現在のテンプレのcssがわかったほうがいいと思うので、例えば「border-radius」とか大手検索エンジンにて検索するとその指示が何なのかわかります。

pc
[編集]

by 桃

2016-01-29 17:02
とくめー様。
細かに纏めていただきありがとうございます…！！
その通りにしてみましたらなんとかデザイン通りになりました。
私も勉強してみたいとは思えど、なかなか思うようにいかず戸惑うばかりで申し訳ございません…！
ご丁寧に本当にありがとうございました…！！助かりました…！！

pc
[編集]

[