Bloggerのモバイルテンプレートでフォントを変える方法.

ページ

 

Bloggerのモバイルテンプレートでフォントを変える方法.

2012年8月28日火曜日
Blogger モバイルテンプレート

モバイルテンプレートをいじる

Bloggerのモバイル表示でフォントサイズを変更したかった喫茶店(@kissaten)です.
悪戦苦闘しながらやっとこさBloggerのモバイルテンプレートでフォントの変更をすることができました.
モバイルテンプレートでの表示
モバイルテンプレートで表示されているフォントがどうも気に食わない大きさだったので治すことにしました.一般的にBloggerのモバイルテンプレートは".mobile"をつけてフォントサイズを変更してやる"font-size=○○;"で変更可能なはずでした.

しかし、どうもうまくイカなかったので試行錯誤した結果、以下の様な表示になりました.

Blogger モバイルテンプレートの変更Blogger モバイルテンプレートの変更

左が変更前で、右が変更後のモバイルテンプレートです.文字を少しだけ小さくしました.
追加したCSSは以下のとおりです.
※CSS追加は[設定]>[テンプレート]>[HTMLの編集]>[続行]>[ウィジットのテンプレートを展開]
.mobile {
font-size:small;
}
はい、これだけです.しかしこれを.mobileの文末につけても機能しませんでした.しかし、.mobileの前側につけたら機能しました.何かバッティングしていたのでしょうか?
更に追加したCSS
同じBloggerユーザのSunaboxさんでためになるCSSがあったので追加しました.

.mobile table, .mobile iframe{
height:auto !important;
width:auto !important;
}
コレを追加することによって、YoutubeなどのiFrameやTable関連のものがリサイズされます.画面をはみ出さなくて済むってやつです.コレは便利ですね!

[blogger]モバイルカスタムテンプレートを使いたい!ページトップに戻るボタンをモバイルでは表示させない!・・あと、埋め込み動画の対処。 - Sunabox

更に僕はSEO対策にH1を使うのでそれ用のCSSも追加しました.

.mobile h1{
font-size:x-large;
}
これでモバイル表示でのH1も適正サイズに成ると思います.
Bloggerモバイルテンプレートのフォント変更方法でした.


この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで喫茶店の部屋をフォローしよう!

 

▶ 関連する新着記事