タグ・デザイン掲示板

[

ブログのフォントをスマートフォンに反映させたいのですが
by ももこ

2021-02-06 15:14
「スマホ反映」などでけんさくしてみたのですが見当たらないのでトピを立てました。
タイトルの通り、ブログ内の記事すべて、PCで見るのと同じようにスマホでも反映させたいのですが、どこをどう弄っていいのかも分からず、取りあえずHEADのタグを貼っておきます。
どなたか分かる方いらっしゃったら指摘なり、指南なりしてくださると嬉しいです。

HEAD

<link href='http://fonts.googleapis.com/css?family=Marcellus' rel='stylesheet' type='text/css'>
<style type="text/css">

#all{
max-width:600px;
margin:0 10px;
text-align:left;
}

body{
margin:0;
padding:0;
font-size:12px;
line-height:30px;
text-align:left;
font-family: 'Marcellus',"ヒラギノ明朝 Pro W3" ,'游明朝',MS 明朝,HGP明朝B,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
background:#fff;
}

a {
color:#000;
border-bottom:#ffec47 1px solid;
text-decoration: none;
transition: 0.3s;
-ms-transform: 0.3s;
-webkit-transform: 0.3s;
-moz-transform: 0.3s;
-o-transform: 0.3s;
}

a:nth-child(2n){
border-bottom:#DEFF46 1px solid;
}

#link{
color:#000;
cursor:help;
border-bottom:#F8FF6C 1px solid;
text-decoration: none;
transition: 0.3s;
-ms-transform: 0.3s;
-webkit-transform: 0.3s;
-moz-transform: 0.3s;
-o-transform: 0.3s;
}

#link:hover,a:hover{
color:#cccc00;
}

a:visited{
color:#555;
}

.girl{
width:100%;
margin:0 auto;
max-width: 400px;
text-align: center;
min-height: 300px;
background: url(#mtr8_url#)no-repeat center top;
font-size: 20px;
}

.girl2{
width:100%;
margin:0 auto;
margin-bottom:30px;
max-width: 400px;
text-align: center;
min-height: 150px;
background: url(#mtr8_url#)no-repeat center top;
background-size:350px;
font-size: 20px;
}

.title{
letter-spacing:5px;
position:relative;
top:50px;
line-height:1;
}

.title2{
letter-spacing:7px;
position:relative;
top:70px;
line-height:1;
}

.sub{
font-size:12px;
color:#cccc00;
position:relative;
top:50px;
}

.sub2{
font-size:12px;
color:#cccc00;
position:relative;
top:65px;
}

p{
font-size:10px;
}

#menu{
line-height:1;
position:relative;
top:50px;
}

#menu a{
font-size:10px;
}

.count{
font-size:10px;
color:#fff;
margin-right:5px;
position:relative;
top:140px;
}

.memo{
background:url(#mtr9_url#);
width:100%;
padding-left:10px;
font-size:15px;
}

textarea{
background:url(#mtr9_url#);
border:none;
width:100%;
height:50px;
letter-spacing:1px;
line-height:1.2;
font-family: 'Marcellus',"ヒラギノ明朝 Pro W3" ,'游明朝',MS 明朝,HGP明 B,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
}

#kiyaku{
border:#F8FF6C 1px solid;
padding: 20px;
margin-top: 10px;
color:#222;
display: none;
}

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">

$(function(){
$("#link").click(function(){
$("#kiyaku").slideToggle(500); /* ()内の数字を弄ることにより、表示・非表示のスピードを変えることができます */
});});</script>

以上になります。
よろしくお願いいたします。

pc
[編集]

by 匿名

2021-02-06 23:50
・'Marcellus',"ヒラギノ明朝 Pro W3" ,'游明朝',MS 明朝,HGP明朝B,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',Meiryo, メイリオ, sans-serif;
フォント名に日本語やスペースが含まれるときは引用符で囲む、というルールが一部のフォント名でなされていないため記述ミスとなり反映されない。

・パソコンでは游明朝やMS明朝が反映しているが、スマホにはそれらのフォントがインストールされていないため他のフォントが適用されている。

などの理由が考えられます。

pc
[編集]

by ももこ

2021-02-08 09:33
匿名さま、ありがとうございました。
問題は解決していませんが、そういうことなんだなということは分かりました。
お手数をおかけいたしました。

pc
[編集]

[