ガジェットの表示
ブログをモバイル表示にすると、配置したガジェットは表示されません。
このブログの場合、PCでの表示では、右側に「自己紹介」や「ラベル」、「人気の投稿」や「ブログアーカイブ」などのガジェットを配置しています。
しかし、モバイル表示になると、これらの便利なガジェットが表示されないのです。
そこで、モバイル表示でもこれらのガジェットが表示されるようにしました。
まずは左側にあるバーで「テンプレート」を開き、、「ブログで使用中」の画像の下にある「HTMLの編集」のアイコンをクリックします。
上に並んでいるアイコンの「ウィジェットへ移動」を使って「人気の投稿」の部分まで行き、
そしてここに「mobile=yes」を追記します。
最後に、上の「テンプレートを保存」を押します。
スマホで確認してみて、表示されていれば完了です。
同じようにそれぞれ表示させたいガジェットの部分に 「mobile=yes」を追記すれば、モバイル版でも表示させることができます。
このブログの場合、PCでの表示では、右側に「自己紹介」や「ラベル」、「人気の投稿」や「ブログアーカイブ」などのガジェットを配置しています。
しかし、モバイル表示になると、これらの便利なガジェットが表示されないのです。
そこで、モバイル表示でもこれらのガジェットが表示されるようにしました。
まずは左側にあるバーで「テンプレート」を開き、、「ブログで使用中」の画像の下にある「HTMLの編集」のアイコンをクリックします。
上に並んでいるアイコンの「ウィジェットへ移動」を使って「人気の投稿」の部分まで行き、
<b:widget id='PopularPosts2' locked='false' title='人気の投稿' type='PopularPosts' visible='true'>
のように書かれている部分を探します。そしてここに「mobile=yes」を追記します。
<b:widget id='PopularPosts2' locked='false' mobile='yes' title='人気の投稿' type='PopularPosts' visible='true'>
このようになりました。最後に、上の「テンプレートを保存」を押します。
スマホで確認してみて、表示されていれば完了です。
同じようにそれぞれ表示させたいガジェットの部分に 「mobile=yes」を追記すれば、モバイル版でも表示させることができます。
これで、ページの下部に「人気の投稿」ガジェットが表示されるようになりました。
しかし、PC,モバイルどちらの表示でも、「人気の投稿」の部分は文字がびっしりで見にくいですよね。
そこで次に、この「人気の投稿」を見やすくしたいと思います。
しかし、PC,モバイルどちらの表示でも、「人気の投稿」の部分は文字がびっしりで見にくいですよね。
そこで次に、この「人気の投稿」を見やすくしたいと思います。
人気の投稿」の記事概要の行間、文字サイズなどの調整
やり方は前回の「ブログタイトルの文字サイズの調整」と同じく、CSSを追加する方法になります。
まずは左側にあるバーで「テンプレート」を開き、「ブログで使用中」の画像の下にある「カスタマイズ」のアイコンをクリック→「上級者向け」→「cssを追加」と進みます。
そこに
そこに
/*「人気の投稿」の記事概要の行間、文字サイズなどの調整*/
.PopularPosts.widget-content ui li{
padding:5px 0;
}
.item-snippet{
font-size:12px;
}
と打ち込むか、もしくは貼り付けます。.PopularPosts.widget-content ui li{
padding:5px 0;
}
.item-snippet{
font-size:12px;
}
上側の数字が行間、下側の数字の部分が文字サイズを表しているので、
この数字を自由に書き換えることによって、
投稿記事の下側に表示される概要の行間と、文字の大きさが変わります。
最後に、右上の「ブログに適応」のボタンを押せば完了です。
Bloggerその他のカスタマイズ方法↓
Blogger:初心者でもできた!モバイル表示をカスタマイズ① (ブログタイトルの改行、文字サイズ)
Blogger:初心者でもできた!モバイル表示をカスタマイズ② (投稿タイトルと、記事本文を見やすく)
Blogger:初心者でもできた!見出しのカスタマイズ