[[返信する]]
スタイルシートについて(文字フォント)
by 匿名
2015-12-14 23:31
別サーバーに引っ越そうと思って別サーバーで作っていたのですが前サイト(ナノ)のテンプレで借りていたスタイルシートの文字フォントが別サーバーの方で反映されず、まだ勉強中なので過不足ある箇所は何となくしか分かりません。どなたか分かる方いらっしゃいましたらお願いします。(元々ナノでお借りしたのもあり、間違いがあるなら先にこちらで解決しようと思った次第です)
<style type="text/css"><!--
html,body{
margin:0;
padding:0;
<pc>font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;</pc>
}
#layout{
margin-right:auto;
margin-left:auto;
margin-top:20px;
margin-bottom:20px;
border:1px dotted #ccc;
-webkit-border-radius:5px;
-moz-border-radius:5px;
<pc>width:300px;padding:15px;</pc>
<smartphone>width:85%;padding:4%;</smartphone>
<nopc>width:90%;padding:3%;</nopc>
font-size:<pc>82%</pc><nopc>0.75em</nopc>;
line-height:1.8;
text-align:center;
div-align:left;
}
a img{
border-style:none;
background:transparent;
}
<smartphone>input[type],textarea,select{
margin:1px;
padding:2px 5px;
color:#999;
background:#fff;
border:1px solid #666;
outline:none;
-webkit-box-shadow:none;
-webkit-appearance:none;
font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;
}
input[type]:focus,textarea:focus,select:focus{
color:#ef857d;
background-color:#fff;
border:1px solid #ef857d;
}
input[type="submit"]{
color:#999;
background:#fff;
border:1px solid #666;
width:auto;
height:auto;
margin:1px;
padding:2px 5px;
-webkit-box-shadow:none;
-webkit-appearance:none;
font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;
}
input[type="submit"]:hover{
background-color:#fff;
color:#ef857d;
border:1px solid #ef857d;
}</smartphone>
<pc>input[type],textarea,select{
margin:1px;
padding:1px 5px;
color:#999;
background-color:#fff;
border:1px solid #666;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-webkit-box-shadow:none;
-webkit-appearance:none;
outline:none;
font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;
}
input[type]:focus,textarea:focus,select:focus{
color:#ef857d;
background-color:#fff;
border:1px solid #ef857d;
}
input[type="submit"]{
color:#999;
background:#fff;
border:1px solid #666;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-webkit-box-shadow:none;
-webkit-appearance:none;
font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;
}
input[type="submit"]:hover{
color:#ef857d;
background-color:#fff;
border:1px solid #ef857d;
}</pc>
--></style>

pc
[編集]
by とくめい
2015-12-15 00:32
フォントファミリーに使われている端末振り分けタグはナノの独自タグなので他のサービスでは使えませんよ。
あとどのフォントが反映しないのか分かりませんがSTHeitiJはios9だと対応しないはずです。詳しくは検索してください。
pc
[編集]
by 匿名
2015-12-15 02:45
＞とくめい様
返信ありがとうございます。補足し忘れて大変申し訳ありません。独自タグは別サーバー用のタグに書き換えて編集したのでこちらに載せたのは元のスタイルシートです。あとSTHeitiJ-Lightは今のIOSでも対応しており、ナノでは反映されていましたが別サーバーの方では反映しなかったのでどこかで記述ミスがあったのかと思い投稿しました。(以前にも自分の端末(当時ガラケー)では正常に見られてもPCなどで崩れる現象があったので…その時は記述ミスということでご協力のもと解決しました。)
pc
[編集]
by 匿名
2015-12-16 05:00
あくまで予想なのですが、元々ナノ様でも

html,body{
margin:0;
padding:0;
<pc>font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;</pc>
}

の様な振り分け方は不具合発生の原因となる場合もある、とお聞き致します。
移転先のサーバー様用のタグへと書き換えて振り分け自体はそのままご使用との事ですし、もしかしましたらこちらの記述が原因で移転先のサーバー様で何等かの不具合が出てしまっている可能性も捨て切れません。
一度振り分けタグを消した状態にて確認をされ、もしそちらで正常に反映されましたら振り分けタグが原因、と言う事になるのではと思います。
その場合は振り分けを

<style type="text/css"><!--
html,body{
margin:0;
padding:0;
}
--></style>

<PC振り分けタグ>
<style type="text/css"><!--
html,body{
font-family:STHeitiJ-Light,'trebuchet MS','Arial',sans-serif;
}
--></style>
</PC振り分けタグ>

の様にされますと良いかもしれません。
お恥ずかしながら私もまだまだ曖昧な点が多く断言は致し兼ねますので、詳しくはCSSの注釈宣言についてを検索されてみて下さい。恐らくCDATAでのマーク解釈のご説明等も出てきますかと思います。

既に試行済でしたら申し訳ございません。
pc
[編集]
by スレ主
2015-12-23 20:08
＞匿名様
遅くなってしまい大変申し訳ありません。
実は同じ内容の相談を引っ越し先の別サーバーにある掲示板でスレを立てて聞いてみたのですが匿名様とほぼ同じ回答をいただき、残念ながら文字フォントは全く変わらず解決しませんでした。



かなりお気に入りのテンプレなので勉強しつつ他の解決策などもしあればお願い致します。

pc
[編集]
by 匿名
2015-12-23 23:45
そうですか…。CSS内の振り分けタグを消しました状態でも正常に反映されませんのでしたら、振り分けタグが原因、と言う事では無いようですね。

ちなみに少々確認の為お伺いしたいのですが、試しに移転先のサーバー様にて新規で白紙のページを作成し

【HEAD】
<style type="text/css"><!--
.test {
color: teal;
font-family: STHeitiJ-Light, 'trebuchet MS', 'Arial', sans-serif;
background: beige;
}
--></style>

【レイアウト】
日本語漢字、。！？<br />
あいうえおアイウエオ<br />
0123456789!?&quot;#%&amp;'./*-+<br />
abcdefghijklmnopqrstuvwxyz<br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
<div class="test">
日本語漢字、。！？<br />
あいうえおアイウエオ<br />
0123456789!?&quot;#%&amp;'./*-+<br />
abcdefghijklmnopqrstuvwxyz<br />
ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />
</div>

とだけ記述された場合も、フォントは正常に反映されておりませんか？
また、そのままfont-familyの値だけを

font-family: STHeitiJ-Light, 'trebuchet MS', 'Arial', sans-serif;
　↓
font-family: STHeitiJ-Light;
　↓
font-family: 'trebuchet MS';
　↓
font-family: 'Arial';
　↓
font-family: sans-serif;

と変更して行きますと、表示されております文字のフォントは変化致しますか？
上記二つが反映されませんようでしたら、移転先サーバー様固有のシステム･仕様に対する対策や設定等に不備があります可能性が高いです。
更に、!important宣言を指定なさっても変化は見られませんでしたか？
移転先様のシステムがどのようになっておりますのかは存じ上げませんので憶測となってしまうのですが…こちらの指定で反映されますようでしたら、サーバー側の指定と競合してしまっておりましたか、現在の入力欄より後ろに何等かの形(サーバー出力にしろユーザー入力にしろ)でCSSが挿入されそちらに上書きされていた、等の可能性が考えられます。
こういった場合、ナノ様では確認されない不具合、と言う事ですので、こちらの板でのご質問の継続及びご解決は難しいかと思われます。
宜しければお手隙の際にでも試行されてみて下さい。

※一部編集致しました。
pc
[編集]
by 9
2015-12-24 14:15
気になるのは匿名様の仰るとおり{}内で振り分けていることの他、Arialには引用符は要らないこと、振り分けタグでスマホはsmartphoneとpcでタブってることくらいです。
ですがナノでちゃんと表示されてるなら問題ない記述なんじゃないでしょうか？
あとナノにはスマホ用のCSSがありますからそちらも参考にされてみては？

どちらにせよここは
＞ナノをご利用の方が(X)HTML・CSSやデザインに関する情報を交換するための掲示板です。
と書かれていますから他社サービスでうまくいかないからといってしつこく質問を繰り返すのはいかがなものかと思いますよ。
pc
[編集]
by トクメイ
2015-12-28 20:07
DOCTYPE宣言は記述してますか？
ナノヘルプにあるので調べてみて下さい。
pc
[編集]
[返信する]
[戻る]
×
「#エロ」のBL小説を読む
BL小説 BLove
- ナノ -