注目の投稿の写真をサムネール化

業務外

Bloggerには記事への誘導として『注目の投稿』、『人気の投稿』という2つのガジェットが提供されています。

注目の投稿と人気の投稿、
注目の投稿は写真が大き過ぎます

『人気の投稿』は一定期間で閲覧数の多い記事を紹介する機能です。TOP3とかTOP10で一覧表示されます。井戸掘りブログでは過去1ヶ月間で閲覧の多い記事を5件表示する設定にしています。
『人気の投稿』の表示の形式は一覧形式で、サムネールの画像と記事先頭の文書の抽出（スニペット／snippet）をオプションで表示できます。

人気の投稿の設定画面

『注目の投稿』は最新の投稿を自動的に紹介するか、紹介したい記事を事前に登録してしておきます。最新の投稿はホームページ先頭に展開されますので、ガジェットで紹介する意味は余りないです。今は1月ということもあり、『注目の投稿』は元旦の投稿をご挨拶代わりに設定してあります。
『注目の投稿』で表示できるのは1件だけで、タイトル、記事先頭の文書の抽出（スニペット／snippet）、画像をオプションで表示できます。

注目の投稿の設定画面

問題は注目の投稿の画像です。記事の誘導としてアイキャッチが重要なのは判りますがサイズが大き過ぎます。写真を売りにしているブログなら良いかもしれませんが、井戸掘りブログにインスタ映えする写真はありません。笑
写真のサイズとか指定できれば良いのですが、記事欄にフルサイズで指定されてしまします。どうもデザインが合わない。このため画像は非表示で運用していました。

せっかくなので画像を使いたいのですが、今回、インデックページを一覧化して、写真はサムネール化したので更にデザインが合わなくなりました。注目の投稿もサムネール化できれば良いのですが…。うん、人気の投稿とデザインを合わせれば良いんじゃない？

---

修正箇所は、ブログの注目の投稿ガジェットで記事を表示している部分です。


注目の投稿ガジェットの修正前ソースコードです。11行目で画像を表示していますが、これをごにょごにょすれば良いはず。

  <div class='post-summary'>
    <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
      <h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>
    </b:if>
    <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
      <p>
        <data:postSummary/>
      </p>
    </b:if>
    <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
      <img class='image' expr:src='data:postFirstImage'/>
    </b:if>
  </div>
  <style type='text/css'>
    .image {
      width: 100%;
    }
  </style>

人気の投稿ガジェットのソースコードです。3行目～34行目がループ処理で一覧を生成しているので、この中のソースを移植すれば良いはず。

  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable                                  ? resizeImage(data:post.featuredImage, 72, &quot;1:1&quot;)                                  : data:post.thumbnail' var='image'>
                    <img alt='' border='0' expr:src='data:image'/>
                  </b:with>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
        </b:if>
      </li>
      </b:loop>
    </ul>
  </div>

色々と試行錯誤した結果です。これを1行目～18行目と差し替えて完成です。

注目の投稿ガジェットの修正後ソースコードです。８行目でサムネールを表示しています。

  <div class='widget-content popular-posts'>
   <ul>
      <li>
          <div expr:class='data:showSnippet ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:showFirstImage and data:postFirstImage != &quot;&quot;'>
              <div class='item-thumbnail'>
                <a expr:href='data:postUrl' target='_blank'>
                    <img alt='' border='0' expr:src='data:postFirstImage' height='72px' style='float:left; margin: 0 10px 5px 0;' width='72px'/>
                </a>
              </div>
            </b:if>
            <b:if cond='data:showPostTitle and data:postTitle != &quot;&quot;'>
              <div class='item-title'><a expr:href='data:postUrl'><data:postTitle/></a></div>
            </b:if>
            <b:if cond='data:showSnippet and data:postSummary != &quot;&quot;'>
              <div class='item-snippet'><data:postSummary/></div>
            </b:if>
          </div>
          <div style='clear: both;'/>
      </li>
    </ul>
  </div>

結局、ソースの移植は上手くいかず、組み直しました。
注目の投稿と人気の投稿では似て非なる変数を使っていて、変にはまってしまいました。これにはやられました。

• 注目の投稿（テキストスニペクトを表示する）：<data:showSnippet/> 
• 人気の投稿（表示 抜粋）：<data:showSnippets/>

仕方ないので、元の注目の投稿のソースを見ながら次のステップで一つずつ組み直しました。急がば回れ、余程この方が早い。

1. 記事タイトルを表示する
2. スニペットを表示する
3. 画像を表示する
4. 画像を縮小する
5. 記事タイトル非表示指定を組み込む
6. スニペット非表示指定を組み込む
7. 画像非表示指定を組み込む
8. レイアウトを調整する

完成です。お上手。

注目の投稿の画像をサムネール化しました

人気の投稿では画像のリサイズ関数を使っていますが、上手く動きません。仕方ないので画像の幅（width）と高さ（height）をべた書きしています。
またスニペットがサムネイルを回り込むように、画像にfloat属性を追加しています。画像に人気の投稿の画像と同じCSSクラスを割り当てているのですが、属性が反映されず仕方なく直指定しました。良く判らん。

感想と構想

注目の投稿のレイアウトを見直しました。インデックスページや、人気の投稿とデザインが一致してスッキリしました。

ですが、むむ？？。画面を眺めているとなんか違う気がしてきました。スッキリはしたのですが、のっぺりしたイメージです。

インデックスページ→注目の投稿→人気の投稿と並び、メリハリがない。

そもそも、昨日作成したインデックスページも、今見直すと単なる一覧でメリハリがない。

儂、デザインのセンスが無いからな～。どうしたもんだか…悩みます。