( ´ー`)y-~~「直せますよ」
また便乗カスタマイズのカスタマイズ記事です。
ゆきひー氏によるMilliard関連記事プラグイン2列化カスタマイズ、すばらしいです。Awesomeです。
ただ、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.です。
よろぴこ
スラスラわかるCSSデザインのきほん スラスラわかるきほんシリーズ
- 作者: 狩野祐東
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2015/04/10
- メディア: Kindle版
- この商品を含むブログを見る