新しいブログのURLは

です。

なんでbloggerを選んだかというと・・・

1.メインのSNSをGoogle+にしたので同じGoogle製のbloggerと相性バッチリ

2.ブログのカスタマイズが容易

3.iframeタグとかの規制が緩いので埋め込み動画が貼り易い

4.カテゴリではなくラベルで分類出来るので、１つの記事に複数のラベルが貼れて便利


取り敢えずデータの移行は終わったので内容を確認しつつ移行していきます。

新しいブログのURLは<br>

<a href="http://npg-web.blogspot.jp/" target="_blank" title=""><b><span style="font-size: 24px;">エヌ・ピー・ジーのメモ帳</span></b></a><br>

です。<br>

初期値はメイリオで無ければ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 width="560" height="315" src="//www.youtube.com/embed/e2kVP4JfhIg" frameborder="0" allowfullscreen></iframe>

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

<div class="video-container"><iframe width="560" height="315" src="//www.youtube.com/embed/e2kVP4JfhIg" frameborder="0" allowfullscreen></iframe></div>

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