怒濤の詰ん読解消日記

つんどくダイアリー

旧「怒濤の詰ん読解消日記」。積まれてしまったマンガ、ラノベなどを読んで感想を書いています。結果として面白い本の紹介だったりまとめだったりになってる。/端末の表示によると、あと771冊

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

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

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

 

 

Milliardの導入

 

Milliard関連ページプラグインについて | シスウ株式会社

これの、

corp.shisuh.com

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

 

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

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

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

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

 

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

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

 

折り返すCSSを設置する

www.yukihy.com

にある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