インデックスページのデザイン見直し

業務外

結構頑張って注目の投稿のデザインを大きな写真からサムネールに切り替えましたが、デザイン的に今一つです。記事に対するアピールが足らない。でも元の大き過ぎる写真もやり過ぎです。ということで、画像サイズを50%に縮小してみました。

注目の投稿ガジェットの末尾にCSSが記述されているので、画像サイズを変更します。

ブログソースコード

1 2 3 4 5

<style type='text/css'> .image {   width: 50%; } </style>

うん、良いんじゃない。

注目の投稿の写真をサイズ50％に縮小しました 

---

次が今回メインの内容です。先日サムネール化したインデックスページもデザインを見直します。インデックスページも単なるタイトル、スニペット、画像の一覧形式で記事に対するアピールが足らないです。注目の投稿と同じく大きな画像を表示すようにします。

本当は最新の投稿だけを対象にしたいのですが、抽出方法がまだ判りません。今回は一覧の先頭の記事を対象にします。判定文（<b:if>～<b:else/>～</b:if>）を追加して一覧の先頭記事に対する処理を追加します。

<b:if> 一覧の先頭記事なら

　大きな画像の記事表示

<b:else/> 先頭記事以外なら

　サムネール画像の記事表示（前回追加したインデックスページのサムネール化処理）

</b:if>

修正箇所は、ブログの投稿ガジェットで記事を表示しているmain部のループ処理の一部です。前回の改修個所に被せる感じです。

投稿ガジェットのループ処理内部のソースコードです。

ブログソースコード

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<b:if cond='data:post.isFirstPost and (data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;) '>   <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 != &quot;&quot;'>       <h3><a expr:href='data:post.url'><data:post.title/></a></h3>     </b:if>     <b:if cond='data:post.snippet != &quot;&quot;'>       <p>         <data:post.snippet/>       </p>     </b:if>     <b:if cond='data:post.firstImageUrl != &quot;&quot;'>       <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>

出来ました。注目の投稿とデザインを合わせてあるので自然な感じです。

インデックスページ先頭の記事は
アイキャッチの写真を大きくしました

感想と構想

インデックスページと注目の投稿のデザインを見直しました。のっぺりしたインデックスページにメリハリが付きました。従来の記事がだらだらと続くデザインからスッキリと一新できました。自画自賛です。