2017年5月5日金曜日

Bloggerで『人気の投稿』をモバイル版の本文の上に表示させる

 


Bloggerにおいて人気の投稿(Popular Posts)のガジェットは、ブログの滞在時間を伸ばす可能性があると思われます。私はすでにPC版において使用しておりますが、今回はモバイル版を新たに追加してみました。ちなみに通常の手順でガジェットのコードに単にmobile='yes'を追加すると、本文の一番下に追加されてしまいます。



まず最初にメニューのレイアウトの画面で「ガジェットを追加」で「人気の投稿」を任意の場所に追加します。そしてそれを上記のように「Main」の「ブログの投稿」の上にドラッグ・アンド・ドロップで挿入します。試行錯誤してわかったのですが、どうやら「Main」の領域には「ガジェットの追加」が表示されていないだけで、ガジェットを追加することは可能なようです。したがって他のガジェットも同様の方法で「ブログの投稿」の上下に挿入可能です。

追加するとPCの画面では本文の上に表示されます(私の場合はすでに「人気の投稿」は使用しているので、2つ目となるこのカジェットは、あとでモバイル専用表示にします)。この時点におけるPC表示は問題は無いのですが、モバイル画面で見ると表示がズレていたのでCSSで調整しました。

まずHTMLの編集で、ガジェットがひとつの場合はid='PopularPosts1'の存在を確認します(私の場合は2つ目なのでid='PopularPosts2'が対象となります)。そして『テーマ』→『カスタマイズ』→『上級者向け』→『CSSを追加』で、以下のコードを書き加えます。

#PopularPosts1{margin-left:10px; margin-right:10px; margin-bottom:20px;}

数字は任意なので、好みに合わせて調整してください。参考までに行間が広いので調整しようと試みたのですが、line-heightの属性は無視されるようです。そして表示の確認作業のすべてが終わったら、HTMLの編集でid='PopularPosts1'の中にmobile='only'を書き加えてPC画面に表示されないようにします。


0 件のコメント:

コメントを投稿