ホーム ≫ プログラミング ≫

【Blogger/QooQ】注目記事：画像なし記事にデフォルトサムネイル画像を表示

2020-12-22 2021-12-04

Blogger プログラミング

B!

ちなみにガジェットの追加/削除、設定変更を行うとコードがリセットされますので再度編集してください。
移動だけではリセットされません。

※
フリーのBloggerテンプレート「QooQ」のカスタマイズについてまとめています。
参考程度に。

尚、カスタマイズはバックアップを取った上、自己責任で行うようにしてください。

目次



CSSの追加

【Blogger/QooQ】トップページ記事一覧：画像なし記事にデフォルトサムネイル画像を表示

【Bloggerカスタマイズ】トップページ記事一覧の画像なし記事にデフォルトサムネイル画像を表示する方法＆サムネサイズをそろえる

ゲームプログラマーの農業日誌

で解説した方法の注目記事(最新記事)ガジェットVer.ですので悪しからず。

クラス「post-summary-img-contents」を増やしました。
名前はお好きに。

元のcss

  1. /* *****************************************************************************
  2. 		注目の投稿 ガジェット
  3. ***************************************************************************** */
  4. .post-summary a {
  5. 	color			: $(font.color) !important;
  6. }

修正後のcss

  1. /* *****************************************************************************
  2. 		注目の投稿 ガジェット
  3. ***************************************************************************** */
  4. .post-summary a {
  5. 	color			: $(font.color) !important;
  6. }
  7. .post-summary-img-contents {
  8. 	position				: relative;
  9. 	width					: 100%;
  10. 	min-width				: 100%;
  11. }
  12. .post-summary-img-contents:before {
  13. 	content					: "";
  14. 	display					: block;
  15. 	padding-top				: 50%;
  16. }
  17. .post-summary-img-contents div {
  18. 	background-image		: url("画像のurl");
  19. 	background-repeat		: no-repeat;
  20. 	background-size			: contain;
  21. 	position				: absolute;
  22. 	top						: 0;
  23. 	left					: 0;
  24. 	bottom					: 0;
  25. 	right					: 0;
  26. 	width					: 100%;
  27. }

htmlの変更

例のごとく分岐<b:else/>の追加、<div>で追加したクラスを指定。

元のhtml

  1. 	<div class='post-summary'>
  2. 		<a expr:href='data:postUrl'>
  3. 			<b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
  4. 				<img class='image' expr:src='data:postFirstImage'/>
  5. 			</b:if>
  6. 			<b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
  7. 				<h3><data:postTitle/></h3>
  8. 			</b:if>
  9. 			<b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
  10. 				<p><data:postSummary/></p>
  11. 			</b:if>
  12. 		</a>
  13. 	</div>

修正後のhtml

  1. 	<div class='post-summary'>
  2. 		<a expr:href='data:postUrl'>
  3. 			<b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
  4. 				<img class='image' expr:src='data:postFirstImage'/>
  5. 			<b:else/>
  6. 				<div class='post-summary-img-contents'><div/></div>
  7. 			</b:if>
  8.  
  9. 			<b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
  10. 				<h3><data:postTitle/></h3>
  11. 			</b:if>
  12.  
  13. 			<b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
  14. 				<p><data:postSummary/></p>
  15. 			</b:if>
  16. 		</a>
  17. 	</div>


ブログランキング・にほんブログ村へ

Translate

魔王と愉快な仲間

このブログを検索

ラベル

Blogger (7) FX (1) GAS (11) Utility (1) ゲーム (1) ツール (7) プログラミング (17) レポート (2) 移住 (3) 金策 (9) 土壌 (2) 独り言 (5) 読み物 (21) 農業 (3)

ブログ アーカイブ

メッセージ

名前

メール *

メッセージ *

Powered by Blogger.

フリー写真素材ぱくたそ

QooQ