カスタマイズしたテーマのモバイル表示への適用

Blogger標準のレスポンシブ・テーマをカスタマイズした後、そのテーマをモバイル表示に適用しました。 --- 僕は、Bloggerでこのブログを作成するとき、標準のテーマ「Awesome.Inc」を適用しました。 標準テーマに、マークダウンなどのプラグインを導入したのですが、モバイル表示には「デフォルト」のテーマが適用されていて、投稿がうまく表示されませんでした。 今回、適用した標準テーマ「Awesome.Inc」は、レスポンシブ対応だったので、それをカスタマイズしたテーマをモバイル表示に適用してみました。 以下、その作業記録です。 <a name='more'></a> --- ## 環境 - ブログサービス：Blogger - 元テーマ：Awesome.Inc - マークダウン・プラグイン：Marked.js（0.6.2） - シンタックス・ハイライト・プラグイン：highlight.js(9.15.6) - 数式表示プラグイン：KaTeX（0.10.0） --- ## デフォルトのモバイル表示 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXY1G8F_wn5NVt5hSZjM-ek2ic-EOrKKU6ME8ZJwM-7jTWF8qebbFA3YMf6SN0SDZWvHLmrV2egMpYOIWJxBRdTftU57nlbg8aewxcKdezr48rJ9pUnf72tvyamts9Qij0fcA0T8lzY4s/s1600/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A801.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXY1G8F_wn5NVt5hSZjM-ek2ic-EOrKKU6ME8ZJwM-7jTWF8qebbFA3YMf6SN0SDZWvHLmrV2egMpYOIWJxBRdTftU57nlbg8aewxcKdezr48rJ9pUnf72tvyamts9Qij0fcA0T8lzY4s/s320/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A801.png" width="172" height="320" data-original-width="361" data-original-height="673" /></a></div> ## モバイル表示への適用手順 1. 「ダッシュボード」-「テーマ」から、「モバイル」の「歯車」ボタン（モバイルテーマのカスタマイズ）をクリック。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivSFFkcu_JoWqyaOxUOJuZLLimAGrayky640m6GcPDYv6X7bk2PQj7FJ9ZMcHqXrnMKxe2hWFLzadLFPerS-9rxsFl7ptxJ4FR67j0dfAsxtOHBUUsfMDqyBPVVLXf_ylfFCWsxWHnQEE/s1600/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A802.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivSFFkcu_JoWqyaOxUOJuZLLimAGrayky640m6GcPDYv6X7bk2PQj7FJ9ZMcHqXrnMKxe2hWFLzadLFPerS-9rxsFl7ptxJ4FR67j0dfAsxtOHBUUsfMDqyBPVVLXf_ylfFCWsxWHnQEE/s320/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A802.png" width="320" height="206" data-original-width="1100" data-original-height="707" /></a></div> 2. 「テーマ › モバイル テーマの選択 」で「モバイルデバイスで現在のテーマのモバイル バージョンを表示する。」について、「はい。モバイル デバイスでモバイル テーマを表示する。 」を選択。 3. 「モバイルテーマの選択」で、「カスタム」を選択。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIj0Ww8V0dICeyc328y-IVGyIdMAZrh3xTPunH8gOiHRkRo_ZySZNh3WS-wrNeovhCGMAeI5-oBxT3SM3YhcO5FXgccs6ZwQnJDT0UMdQhmPrD-SdAHHzPgZGPcsjc1d5yTkh_aysvJcg/s1600/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A803.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIj0Ww8V0dICeyc328y-IVGyIdMAZrh3xTPunH8gOiHRkRo_ZySZNh3WS-wrNeovhCGMAeI5-oBxT3SM3YhcO5FXgccs6ZwQnJDT0UMdQhmPrD-SdAHHzPgZGPcsjc1d5yTkh_aysvJcg/s320/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A803.png" width="320" height="308" data-original-width="708" data-original-height="681" /></a></div> 4. 「保存」をクリックして、保存する。 ## モバイル表示の確認 ウェブブラウザのエミュレーション機能で、モバイル表示を確認しました。 ここでは、Microsoft Edgeを使ってみました。 1. ブラウザ右上のボタン「・・・」から「開発者ツール」を起動。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpTclftHBR-P7cO-J-skWbBRI-NsbPBwSpO_x5ymikw5aLKp9tQIFGs_JOO5nQdx9YzUQ4Of6DytKUaZvTyuUuKik8QeBiuFxwCX99QydUYroy2udiRKLOZIIsPQPcXP_bfEAmxSndb6w/s1600/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A804.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpTclftHBR-P7cO-J-skWbBRI-NsbPBwSpO_x5ymikw5aLKp9tQIFGs_JOO5nQdx9YzUQ4Of6DytKUaZvTyuUuKik8QeBiuFxwCX99QydUYroy2udiRKLOZIIsPQPcXP_bfEAmxSndb6w/s320/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A804.png" width="159" height="320" data-original-width="343" data-original-height="690" /></a></div> 2. 「エミュレーション」タブを選択。 3. 「デバイス」でモバイルデバイスを選択。ここでは、試しに「iPhone 7」を選択してみた。 <!--  --> <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5vkyNFiBTjcmublcjUyQrcWM-gHZOyrARSVhPKpn0aKZ5cdFwfMrs7rngbbbqdDQ6MOfRVggsL06atvaf3QAOn8tzKg-3RAurOXV22Mt7bVTbBmmbdNE66_F8KRg5e-B99EHUv8wIrI/s1600/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A805.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj5vkyNFiBTjcmublcjUyQrcWM-gHZOyrARSVhPKpn0aKZ5cdFwfMrs7rngbbbqdDQ6MOfRVggsL06atvaf3QAOn8tzKg-3RAurOXV22Mt7bVTbBmmbdNE66_F8KRg5e-B99EHUv8wIrI/s320/20190425-03_%25E3%2582%25AB%25E3%2582%25B9%25E3%2582%25BF%25E3%2583%259E%25E3%2582%25A4%25E3%2582%25BA%25E3%2581%2597%25E3%2581%259F%25E3%2583%2586%25E3%2583%25BC%25E3%2583%259E%25E3%2581%25AE%25E3%2583%25A2%25E3%2583%2590%25E3%2582%25A4%25E3%2583%25AB%25E8%25A1%25A8%25E7%25A4%25BA%25E3%2581%25B8%25E3%2581%25AE%25E9%2581%25A9%25E7%2594%25A805.png" width="180" height="320" data-original-width="375" data-original-height="666" /></a></div> マークダウン形式で作成した投稿、しかも数式つき投稿もちゃんと表示されることが確認できました。 ## 参考 - [1] : [ふりむけばコウホウ：なぜ？bif cond data blog.isMobileが動くBloggerサイトと動かないBloggerサイト](http://www.furimuke.com/2014/08/bif-cond-data-blogismobilebloggerblogger.html) --- ## 更新履歴 2019-04-25 新規作成