移動だけではリセットされません。
※
フリーのBloggerテンプレート「QooQ」のカスタマイズについてまとめています。
参考程度に。
尚、カスタマイズはバックアップを取った上、自己責任で行うようにしてください。
CSSの追加
で解説した方法の注目記事(最新記事)ガジェットVer.ですので悪しからず。
クラス「post-summary-img-contents」を増やしました。
名前はお好きに。
元のcss
/* *****************************************************************************
注目の投稿 ガジェット
***************************************************************************** */
.post-summary a {
color : $(font.color) !important;
}
修正後のcss
/* *****************************************************************************
注目の投稿 ガジェット
***************************************************************************** */
.post-summary a {
color : $(font.color) !important;
}
.post-summary-img-contents {
position : relative;
width : 100%;
min-width : 100%;
}
.post-summary-img-contents:before {
content : "";
display : block;
padding-top : 50%;
}
.post-summary-img-contents div {
background-image : url("画像のurl");
background-repeat : no-repeat;
background-size : contain;
position : absolute;
top : 0;
left : 0;
bottom : 0;
right : 0;
width : 100%;
}
htmlの変更
例のごとく分岐<b:else/>の追加、<div>で追加したクラスを指定。元のhtml
<div class='post-summary'> <a expr:href='data:postUrl'> <b:if cond='data:showFirstImage and data:postFirstImage != ""'> <img class='image' expr:src='data:postFirstImage'/> </b:if> <b:if cond='data:showPostTitle and data:postTitle != ""'> <h3><data:postTitle/></h3> </b:if> <b:if cond='data:showSnippet and data:postSummary != ""'> <p><data:postSummary/></p> </b:if> </a> </div>
修正後のhtml
<div class='post-summary'> <a expr:href='data:postUrl'> <b:if cond='data:showFirstImage and data:postFirstImage != ""'> <img class='image' expr:src='data:postFirstImage'/> <b:else/> <div class='post-summary-img-contents'><div/></div> </b:if> <b:if cond='data:showPostTitle and data:postTitle != ""'> <h3><data:postTitle/></h3> </b:if> <b:if cond='data:showSnippet and data:postSummary != ""'> <p><data:postSummary/></p> </b:if> </a> </div>
