ブログを移転します。
長年アメブロを利用していたのですが、頻繁に来る”一ヶ月で○○万円稼いだ”的なメールやピグ関連のメッセージが嫌でbloggerに移行しました。
新しいブログのURLは
です。
なんでbloggerを選んだかというと・・・
1.メインのSNSをGoogle+にしたので同じGoogle製のbloggerと相性バッチリ
2.ブログのカスタマイズが容易
3.iframeタグとかの規制が緩いので埋め込み動画が貼り易い
4.カテゴリではなくラベルで分類出来るので、１つの記事に複数のラベルが貼れて便利
取り敢えずデータの移行は終わったので内容を確認しつつ移行していきます。
取り敢えずデータの移行は終わったので内容を確認しつつ移行していきます。
ブログを移転しました。
長年アメブロを利用していたのですが、頻繁に来る”一ヶ月で○○万円稼いだ”的なメールやピグ関連のメッセージが嫌でbloggerに移行しました。<br>
新しいブログのURLは<br>
<a href="http://npg-web.blogspot.jp/" target="_blank" title=""><b><span style="font-size: 24px;">エヌ・ピー・ジーのメモ帳</span></b></a><br>
です。<br>
bloggerのCSSについて
bloggerをカスタマイズする際、見た目を変更するTIPSを記載しておきます。
設定方法はテンプレートの”カスタマイズ”をクリック
”上級者向け”をクリックし、一番下にある”CSSを追加”に記述します。
●フォントについて
bloggerのフォントは明朝体です。
これだと少々見辛いのでゴシック体に変更します。
【記事と記事タイトルを変更したい場合】
●モバイル版のデザインについて
モバイル版でブログを表示する場合、投稿タイトルの幅が狭く(240px)、複数行になります。
そこで文字サイズを少し小さくし、タイトル幅を広げます。
このcssを反映させるには、テンプレートのモバイル下にあるギアの形のボタンをクリック
”モバイルテンプレートを選択”から”カスタム”を選択します。
【文字サイズを18px、文字幅を90%に変更】
.mobile h3.mobile-index-title{
設定方法はテンプレートの”カスタマイズ”をクリック
”上級者向け”をクリックし、一番下にある”CSSを追加”に記述します。
●フォントについて
bloggerのフォントは明朝体です。
これだと少々見辛いのでゴシック体に変更します。
初期値はメイリオで無ければMPPゴシック、それもなければsans-serifをセットします。
【記事を変更したい場合】
body { font-family:"meiryo","メイリオ","ＭＳ Ｐゴシック",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に変更】
【投稿タイトルを20pxに変更】
.mobile h3.post-title{
font-size:20px;
}
●youtubeの幅について
youtubeを貼った場合、横幅が大きいとPCではキチンと表示されてもモバイルでははみ出してしまう事があります。
そこで、それぞれに最適サイズに変更出来るようにします。
【動画の幅を調整する】
●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>
これでリサイズしてくれます。
記述する際ですが、通常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>
これでリサイズしてくれます。