Milliard関連記事をBloggerモバイル版の記事下に表示する方法


Milliardの関連記事を導入したものの、モバイル版に表示されない。
公式のBloggerでテンプレートを直接編集して指定位置に直接関連ページを出力する方法でも解決しないので、調べたらやっと出来ました…


Milliard関連記事の作成方法


① 画像のように各自関連記事ツール設定画面からコード生成します。

② PC版のリストを2列にしたいので、表示件数を偶数にしています。
そしてフッターのガジェットに追加します。
(現時点でPC版はブログの一番下に表示されます)



③ HTML編集で<data:post.body/>を探すと、二つ出てきます。
(HTML内の何処かを押して「command + F」検索画面が出ます。)

1番目がPC版
2番目がモバイル版

それぞれの直下に生成したhtmlを挿入すると、PC版とモバイル版の記事下に関連記事が出ます。

※テンプレートによっては一つだけで、PC版とスマホ版共通しています。



④ 次に下記をCSSに追加し、1列から2列に変更します。


/* PC版 関連記事 Milliard カスタマイズ */
@media screen and (min-width: 1200px) { 
.ssArticlesContainer {
  overflow: hidden;  /* ←横並び解除の設定 */
}
.ssArticlesContainer .ssPanel { 
  margin: 0 2% 0 0;
  width: 48%;
  float: left;
  line-height: 1.4;
  font-size: 90%;
}
 .ssArticlesContainer .ssPanel a:hover {
  text-decoration: underline;  /* ←マウスオーバーでアンダーライン */
}
div.ssOriginalTemplateImgContainer img.ssImg {
  height: 80px; 
}} 

Popular posts from this blog

コンビの漏れないラクマグを購入してみた♪使用感レビュー

幼児や妊娠中・授乳中のママは精油を使用してもいいの?

Blogger目次を見出しと連動させて自動生成する方法

親子で使える!日焼け止め厳選しました

【手作り・開封後の賞味期限は?】調味料・食品・おかず保存期間まとめ

離乳食にも!3分でお粥ができる栄養豊富なオートミール