Bloggerのテーマをレスポンシブ化します。
①Blogger「テーマ」の「HTML編集」から、マウスのポインターをソースコード上のどこでもよいので選択して「Ctrl」キーを押しながら「F」キーを押してSearch（検索窓）を表示。
②Search（検索窓）に <head> と入力して「Enter]キーを押すと黄色いマーカーで位置が表示されます。
<head> 直下に下記コードをコピペ（コピー＆ペースト）します。
1 | <meta content='width=device-width, initial-scale=1.0' name='viewport'/> |
③Search（検索窓）に ]]></b:skin と入力して、今度は真上に下記コードをコピペします。
1 | @media screen and (max-width: 768px){ .limit-width{margin:0 auto;width:100%;overflow:hidden;} #outer{padding:0;} #main-outer{float:none;margin:0;} #main{margin:0;} #forcus-category-outer{display:none;} #header-inner{padding:10px 0;} #header-inner h1{font-size:150%;} .post-header h2{font-size:130%;} .post-body iframe{width:95%;} #upper-nav-outer{display:none;} .index-pager .newer a, .index-pager .older a{padding:20px 20px;} #related-post span.label{display:none;} #footer-inner{padding:30px 0 15px 0;} #sidebar-outer{float:none;margin:10px 0 0 0;width:100%;} #related-post li{font-size:80%;} fixed-social-bottons{display:none;} img{max-width:100%; height:auto;} } |
④必ず保存を忘れずに！
Tips
保存ボタンを押しても反映されない時があります。
その時の対処法はキーボードで手動にてコードを入力する事で解決します。コピペした先頭のソースコード2~3文字程度を削除してから再度削除した文字を手動で入力すると認識され保存が反映されやすくなります。
⑤最後にモバイルの設定をデスクトップにして完了!
基本的にほとんどのテーマはレスポンシブデザインになっていますが、ごくまれに完成度の低いレスポンシブテーマがあるので対処法を備忘録がてら記事にしました。
投稿
コメントを投稿