業務外
結構頑張って注目の投稿のデザインを大きな写真からサムネールに切り替えましたが、デザイン的に今一つです。記事に対するアピールが足らない。でも元の大き過ぎる写真もやり過ぎです。ということで、画像サイズを50%に縮小してみました。
注目の投稿ガジェットの末尾にCSSが記述されているので、画像サイズを変更します。
<style type='text/css'> .image { width: 50%; } </style>
うん、良いんじゃない。
注目の投稿の写真をサイズ50%に縮小しました |
次が今回メインの内容です。先日サムネール化したインデックスページもデザインを見直します。インデックスページも単なるタイトル、スニペット、画像の一覧形式で記事に対するアピールが足らないです。注目の投稿と同じく大きな画像を表示すようにします。
本当は最新の投稿だけを対象にしたいのですが、抽出方法がまだ判りません。今回は一覧の先頭の記事を対象にします。判定文(<b:if>~<b:else/>~</b:if>)を追加して一覧の先頭記事に対する処理を追加します。
<b:if> 一覧の先頭記事なら大きな画像の記事表示<b:else/> 先頭記事以外ならサムネール画像の記事表示(前回追加したインデックスページのサムネール化処理)</b:if>
修正箇所は、ブログの投稿ガジェットで記事を表示しているmain部のループ処理の一部です。前回の改修個所に被せる感じです。
投稿ガジェットのループ処理内部のソースコードです。
<b:if cond='data:post.isFirstPost and (data:blog.pageType != "item" and data:blog.pageType != "static_page") '> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><span><data:post.dateHeader/></span></h2> </b:if> <div class='post-summary'> <b:if cond='data:post.title != ""'> <h3><a expr:href='data:post.url'><data:post.title/></a></h3> </b:if> <b:if cond='data:post.snippet != ""'> <p> <data:post.snippet/> </p> </b:if> <b:if cond='data:post.firstImageUrl != ""'> <center><img class='image' expr:src='data:post.firstImageUrl'/></center> </b:if> </div> <hr class='post-outer-separator'/> <style type='text/css'> .image { width: 50%; } </style> <b:else/> ~ 前回追加したインデックスページのサムネール化処理 ~ </b:if>
出来ました。注目の投稿とデザインを合わせてあるので自然な感じです。
0 件のコメント:
コメントを投稿