ゆきひー氏作Milliard 2列化カスタマイズの画像の縦横比が気になる人へ

f:id:cruller:20160926214255p:plain

( ´ー｀)y-~~「直せますよ」

また便乗カスタマイズのカスタマイズ記事です。

ゆきひー氏によるMilliard関連記事プラグイン2列化カスタマイズ、すばらしいです。Awesomeです。

www.yukihy.com

ただ、cruller、気になります！

画像の縦横サイズを固定

とのことですが、アイキャッチ画像のアスペクト比（縦横比）が保持されず正方形に伸びてしまうところ、やっぱり気になります。そのため、当ブログではご覧のように（↓）アスペクト比保持タイプにCSSを変更しました。

他にもそういう方いるんじゃないかと思って、カスタマイズ方法を共有します。（ソースを見ればわかっちゃうけどね:P

私が他に変更した点は、

行間ボーダーをオリジナルのものに
列間マージンを調整
ヘッダーのデザインを変更
1列化の閾値を変更

です。まあ、これらはどうでもいいかな。

カスタマイズ内容

CSS

/* Milliard */
.ssImg{
    width: auto !important;
    padding: 0;
    max-height: 80px;
    max-width: 80px;
}
.ssTitle{
    font-size: 90%;
}
.ssPanel{
    width: 49% !important;
    height: 100px !important;
    float: left !important;
    margin: 0 0.5% !important;
}
.ssLimitedContainerHeader > div > div > div{
     background: rgb(248, 249, 255);
     padding: 10px 0 !important;
     margin-top: 15px;
     text-align: center;
}
/*スマホ*/
@media screen and (max-width:767px){
   .ssPanel{
    width: 100% !important;
  }
}

.ssImg{}内が肝心のアスペクト比保持カスタマイズです。この部分だけコピペして変更でOKです。以降は興味のある方だけ読んでください。

.ssPanal{}内は1.と2.です。2.は何かというと、marginで

[左カラム][空白][右カラム][空白]

となっているのを神経質に

[1/2空白][左カラム][1/2空白][1/2空白][右カラム][1/2空白]

としただけです。（実際は、そんなにうまいこと計算されないみたいです:'-(

.ssLimitedContainerHeader > div > div > div{}内は3.のことで、ヘッダーのデザインを当ブログと統一感を持つようにしています。

@media screen and (max-width:767px)の部分は4.です。

よろぴこ