Milliardを使って関連記事のパネルを2列に並べる

※本サイトはアフィリエイトプログラムによる収益を得ています。
　ページ内のリンクがアフィリエイトリンクの場合があります。

　ブログでよく見かける、関連記事が2列になっている表示。

これをするためにはMilliardを導入します。

これの、

を参照して、JavaScriptコードを作ります。

　そのときに「表示位置」の「フッターの下」を外します。

また表示は「リスト」にして、表示件数は10件など、2の倍数にします。

これはこのリストを折り返して表示するため、2列にするには2の倍数。

リストにすると出てくる「挿入箇所のスクロールを無効にする」にチェックを入れます。

　生成したコードをブログのダッシュボードから「デザイン→カスタマイズ→記事→記事下」に貼り付けます。

これで、記事ページにMilliardのリストが出てきます。

にあるCSSをコピペして、「デザイン→デザインCSS」に貼り付け。

　これで2列になるのですが、サムネイルが正方形に表示されてしまいちょっとうちだとおかしなことになってしまった。

f:id:kagerou_ts:20160210230430j:plain

なので、CSSに次のように追加して、widthの補正を無効化しました。

.ssPanel > div.ssOriginalTemplateImgContainer img.ssImg {

max-width: 80px !important;

width: initial !important;

}

するとこんな感じに。

f:id:kagerou_ts:20160210230631j:plain

つんどくダイアリー