2015年11月12日木曜日

【Blogger】モバイル表示をカスタマイズしました


このブログ(GoogleのブログサービスBloggerを利用)のモバイル表示をカスタマイズし、少しだけウェブ表示に近づけました。


変えた部分

「中見出し」に線をつけました。


「blockquote」で囲った引用部分をウェブ表示と同じに。


こちらのサイトを参考にいたしました。
■ Blogger:モバイル表示のデザインがカスタマイズできない?そんなときは、モバイルテンプレートがカスタムになっているか確認しましょう! - Dr.ウーパのコンピュータ備忘録
■ Bloggerのモバイルテンプレートをカスタマイズする方法 | Asterlist


フッダー部分もこちらのサイトを参考に少しだけカスタマイズしました。
■ モバイルテンプレートもカスタマイズ可能に | クリボウの Blogger Tips


アクセス解析を久しぶりに見たらモバイル経由からのアクセスが4割を越えてたので今更ながら急いで修正したのでした。


修正したかったけど断念した部分

モバイル表示だとYouTubeがはみ出るんです(上図)。 それを修正したかったのですが無理でした。 上図のAfterはこちらの方法を試しました。 YouTubeはうまく枠内に収まりました。 しかしヘッダーや他のレイアウトが大きく崩れてしまいます。 私のカスタムレイアウトには使えませんでした。


おそらく、こちら→「Bloggerのモバイル表示でYouTubeをはみ出させないCSS | Hanpen DaDa」で紹介されてる方法がベターなんだと思います。 しかし今まで貼ってたYouTubeコードすべてにタグを付けしなおさなきゃいけないんですよねえ。 一気に解決する方法はないんでしょうか。


あと、flickrの写真を貼り付けた時の表示も独特なのであれもなんとかしたいところ('A`)


【Blogger】モバイル表示をカスタマイズする方法

Bloggerの管理ページから「テンプレート」を選択し、モバイルの歯車マークをクリックします。


「モバイルテンプレートを選択」の中から「カスタム」を選択します。 テンプレートをカスタマイズして使っている人は、この操作だけでウェブ表示に近づきます。


関連記事 さくら これまた
【約3ヶ月目】Blogger をメインブログとして使ってみた感想
Googleのブログサービス「Blogger」が https に対応 ~ただしカスタムドメインで運用してるブログはおあずけ
とくみつ録。: 独自ドメイン+Blogger(Googleのブログサービス)を利用したサイトにトラブル発生 ~数時間にわたり閲覧不可に