...あれ、そういえばテーマを選ぶときにモバイルにも対応するレスポンシブデザインを選んだんじゃなかったっけ？
1. テーマをレスポンシブデザインに変更する
このブログをパソコンで表示するとこう。↓
モバイルテーマを使用する設定になっているから、モバイルで見るとこんな。↓
（※パソコンでモバイル表示を確認するときはURLの末尾に「?m=1」を加える。）
でも、私のテーマはレスポンシブデザインのものを選んであるから、モバイルでもパソコンと同じデザインで表示することができる..はずだ。
■レスポンシブウェブデザインとは・・・
閲覧者の画面サイズまたはウェブブラウザに応じてデスクトップウェブページが閲覧できることを目指したウェブデザインの手法。- - - Wikipedia「レスポンシブウェブデザイン」から- - -
つまり、スマホやパソコンと表示画面のサイズが変わっても、自動でそれぞれのサイズに適応して表示されるということ。
■PCとモバイルの表示を同じデザインにする
（１）Bloggerの管理画面「テーマ」のページで右側の『モバイル』の方を開くと、今は「モバイルテーマを表示する」設定になっているので、下側の
いいえ、モバイル端末でもパソコン用テーマを使用する。にチェックを入れる。
（２）すると画面が下のように変わるので、『保存』をクリックする。
これでモバイル端末でもPCと同じデザイン、そしてタブレットでもスマホでも、端末の画面の幅に合わせて表示されるようになった。↓
2. モバイルでのガジェット表示を変更する
パソコン表示では気にならないガジェットも、モバイルではじゃまだと思うので非表示にしたい。テーマを編集すれば、モバイルでのガジェット表示をカスタマイズできる。（編集前にバックアップを取るべし！）
□モバイルでガジェットを表示したいときはこのコード。
□モバイルでは非表示にしたいならこれ。
<b:if cond='data:blog.isMobileRequest == "true"'></b:if>
□モバイルでは非表示にしたいならこれ。
<b:if cond='data:blog.isMobileRequest == "false"'></b:if>
□上記のコードで個々のガジェット、またはガジェット全体を囲む。
・個々のガジェットはこれ。
・ガジェット全体はこれ。
・個々のガジェットはこれ。
<b:widget ...></b:widget>
・ガジェット全体はこれ。
<b:section ...></b:section>
□私はガジェット全体を非表示にしたので、こうした。↓
<b:if cond='data:blog.isMobileRequest == "false"'>
<b:section class='sidebartop' id='sidebartop' preferred='yes'>
〜〜〜この間省略〜〜〜
</b:section>
</b:if>
これで、パソコン表示ではそのままだが、モバイルで表示した時にはガジェットは表示されなくなった。
この方法はガジェット以外にも使えるので、私は、「個別の記事下のページナビで記事タイトルが表示」もモバイルでは表示されないように変更した。
＊参考にしたサイトはこちら↓
「Bloggerブログでモバイルのガジェットの表示を切り替えるソースコード」
Birdie, making herself at home / naz66
私はケータイ電話を持たない。まだiPhoneが出る前にはNokiaのスマートフォン持ってたけどね。新しもの好きだけどへそ曲がりなの。でもって今はもうスマホの小さい画面がムリ。だって老眼だもん。。。（T_T）
カテゴリー :
0 コメント:
コメントを投稿