bloggerのCSSについて

bloggerをカスタマイズする際、見た目を変更するTIPSを記載しておきます。

設定方法はテンプレートの”カスタマイズ”をクリック
”上級者向け”をクリックし、一番下にある”CSSを追加”に記述します。

●フォントについて
bloggerのフォントは明朝体です。
これだと少々見辛いのでゴシック体に変更します。

初期値はメイリオで無ければMPPゴシック、それもなければsans-serifをセットします。

【記事を変更したい場合】
body { font-family:”meiryo”,”メイリオ”,”ＭＳＰゴシック”,sans-serif; }

【記事と記事タイトルを変更したい場合】

* { font-family:”meiryo”,”メイリオ”,”ＭＳＰゴシック”,sans-serif; }

【ガジェットのタイトルを変更したい場合】

h2 { font-family:”meiryo”,”メイリオ”,”ＭＳＰゴシック”,sans-serif; }

●モバイル版のデザインについて
モバイル版でブログを表示する場合、投稿タイトルの幅が狭く(240px)、複数行になります。
そこで文字サイズを少し小さくし、タイトル幅を広げます。

このcssを反映させるには、テンプレートのモバイル下にあるギアの形のボタンをクリック
”モバイルテンプレートを選択”から”カスタム”を選択します。

【文字サイズを18px、文字幅を90%に変更】
.mobile h3.mobile-index-title{

font-size:18px;

width: 90%;

}

【投稿タイトルを20pxに変更】

.mobile h3.post-title{

font-size:20px;

}

●youtubeの幅について
youtubeを貼った場合、横幅が大きいとPCではキチンと表示されてもモバイルでははみ出してしまう事があります。
そこで、それぞれに最適サイズに変更出来るようにします。

【動画の幅を調整する】

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

}

.video-container iframe,

.video-container object,

.video-container embed {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

記述する際ですが、通常youtubeを貼る場合のhtmlは

となります。
iframeの前後を”<div class=”video-container”>”と”</div>”で挟みます。

これでリサイズしてくれます。