Blogger のウィジェット「人気の投稿」をページごとに表示数を変えるカスタマイズ

おすすめ記事ピックアップ

Bloggerのウィジェット/ガジェットである「人気の投稿」の記事表示数をトップページでは少なく、記事ページではたくさん表示できるようにカスタマイズしたいと思います。Bloggerを使っている人は、ほぼ100%「人気の投稿」を利用してますよね。

記事は縦に長く表示されるので、「人気の投稿」の記事数が10件あっても気になりませんが、トップページは、10件あると長すぎです。これをトップページでは4件、記事ページでは10件、「人気の投稿」が表示されるようにカスタマイズしたいと思います。仕組みは簡単です。b:if condを使って、トップページと記事ページで表示を切り替えるだけです。


まずウィジェット/ガジェットである「人気の投稿」を選択しましょう。


2回設置して、2つ並べて「人気の投稿」を2つ任意の場所に設置してください。


片方の「人気の投稿」の最大4件の投稿を表示に、もう片方を最大10件の投稿を表示にします。※ご自由に設定ください。


テンプレートHTMLの編集に入ります。直接コードを探しても良いですが、「ウィジェットへ移動」を使って、PopularPosts1、PopularPosts2へ移動すると簡単です。


まずPopularPosts1(最大4件の投稿にしたほうとします。)は、トップページに表示させます。PopularPosts2(最大10件の投稿にしたほうとします。)は、記事ページに表示させます。

PopularPosts1のウィジェットを、

<b:if cond='data:blog.pageType != &quot;item&quot;'>
~~
</b:if>

で囲みます。これは記事ページ以外だったら、中のコードを実行するコードです。

PopularPosts2のウィジェットは、

<b:if cond='data:blog.pageType == &quot;item&quot;'>
~~
</b:if>

で囲みます。これは記事ページだったら、中のコードを実行するコードです。


さて実際に組み込んだコードを紹介します。b:if condは、widget idやincludableの中に設置する必要があるので、ちょっとわかりずらいのです。

ちなみにHTMLの編集画面は、▼でコードが省略されているので、該当箇所はクリックして全文表示させましょう。


黄色い部分が差し込んだコードです。widget idやincludableの中に書きましょう。

    <b:widget id='PopularPosts1' locked='false' title='人気の投稿' type='PopularPosts'>
      <b:includable id='main'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>

</b:if>

</b:includable>
    </b:widget>

PopularPosts2 も同様に。

    <b:widget id='PopularPosts2' locked='false' title='人気の投稿' type='PopularPosts'>
      <b:includable id='main'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>


  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (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/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div>

</b:if>

</b:includable>
    </b:widget>


これで、トップページでは4件、記事ページでは10件、「人気の投稿」が表示されるカスタマイズは完了です。いろいろ設定して見るのが良いですね!



いいね!と思ったらお願いします。


名前

AddToAny adsence adwords Amazon AmazonFBA Calculator Analytics Blogger BMAG chrome CODEPREP Eclipse envato facebook FAQ feedly Font Awesome Geek Press Gifzo Illustrator kindle LinkWithin Logaster myfonts NAVER Photoshop PHP picasa Premiere Similarweb TOPSY tumblr Wordpress wpX XAMPP zenback ウェブマスターツール ウハウハモウケタイ カスタマイズ ゲストシリーズ ココナラ サイト制作 ドメイン はじめに プレスリリース プレスリリース作成 プレスリリース利点 まとめ ランディングページ リリース送付先の見つけ方 レビュー 考察 子孫セレクタ 思いつきサイト制作 書評 足成 台湾 通販 日記 忍者おまとめボタン 文章の基本
false
ltr
item
ふりむけばコウホウ : Blogger のウィジェット「人気の投稿」をページごとに表示数を変えるカスタマイズ
Blogger のウィジェット「人気の投稿」をページごとに表示数を変えるカスタマイズ
Bloggerのウィジェット/ガジェットである「人気の投稿」の記事表示数をトップページでは少なく、記事ページではたくさん表示できるようにカスタマイズしたいと思います。Bloggerを使っている人は、ほぼ100%「人気の投稿」を利用してますよね。
http://1.bp.blogspot.com/-ja-9WJQHtCk/Uo9kTTbC6lI/AAAAAAAANL4/C5ucW3fxUoQ/s1600/0006.png
http://1.bp.blogspot.com/-ja-9WJQHtCk/Uo9kTTbC6lI/AAAAAAAANL4/C5ucW3fxUoQ/s72-c/0006.png
ふりむけばコウホウ
http://www.furimuke.com/2013/11/blogger-popularposts.html
http://www.furimuke.com/
http://www.furimuke.com/
http://www.furimuke.com/2013/11/blogger-popularposts.html
true
8618648785166852656
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事:もっと見るはクリック→ LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy