Blogger Labo：【Vaster2】人気記事ウィジェットのカスタマイズ

このページでは、Vaster2の人気記事ウィジェットのカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


人気記事ウィジェットのカスタマイズ


人気記事ウィジェット

人気記事ウィジェットのCSS


 人気記事ウィジェットの投稿タイトルの設定 

.popular-post ul li a {
   font-size: 15px;　文字サイズ（15px）
   color:$(popular.color);　文字色（テーマデザイナー設定）
   font-weight: 700;  文字の太さ（700）
}

 人気記事ウィジェットのカーソル通過時の投稿タイトルの設定 

.popular-post ul li a:hover{
   color:$(popular.color.hover);　文字色（テーマデザイナー設定）
}

 人気記事ウィジェットのリスト内の設定 

.popular-post ul li{
   margin: 5px 0;　記事リスト外側の上下・左右の余白
   list-style-type:none;
}

 人気記事ウィジェットの箇条書きリストの設定 

.popular-post ul{
   padding:0;　内側四方の余白（0）
}

 人気記事ウィジェットのサムネイルの設定 

.item-thumbnail{
   float:left;　左寄せ
   margin: 0 10px 10px 0;　サムネイルの上・右・下・左の余白
}

 人気記事ウィジェットのカーソル通過時のサムネイルの設定 

.item-thumbnail a:hover{
   opacity:0.7;　透過する（0.7）※上手く機能してない？
}

 人気記事ウィジェットの要約文（抜粋）の設定 

.item-snippet p {
   overflow: hidden;
    display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   font-size:13px;　文字サイズ（13px）
   line-height:1.4em;　行間（1.4em）
   margin: 0;　外側の余白（0）
}

 人気記事ウィジェットの表示内容の設定 

.item-content {
   margin: 5px;　外側の余白（5px）
}

※（）内は初期値

上記が Vaster2の人気記事ウィジェットのCSSに説明を加えたもの。

「/*　人気記事」で検索して中身を書き変えていけば、好みに合わせて変更できる。

ただし、値を変更しても結果が反映されない部分があるので、ここは自分で調整するしか無い。

また、Bloggerウィジェット「人気の投稿」とは異なるので、一度消すとBloggerからは復元できない。

画像に枠線をつける


画像に枠線をつけるには、「/*　人気記事」で検索して下辺りに以下のCSSを貼り付ければよい。

.item-thumbnail img{
   border: 1px #e4e4e4 solid;　/*　サムネイルの枠線　*/
padding: 0;　/*　内側の余白　*/
   margin-right: 5px;　/*　画像外側右の余白　*/
}

画像なしの記事に代替サムネイルを設定する


代替サムネイルを設定する方法は、既に詳しく説明しているサイトがある。

下記リンクのサイトが分かりやすいと思うので、そちらで参照してほしい。

なお、人気記事の代替サムネイルは画像が真四角でないと反映されないので注意。

・プゥ二郎さんの日記

Vaster2の人気記事ウィジェットを消してしまった場合


Vaster2の人気記事ウィジェットは、Bloggerの人気の投稿ウィジェットとは別物になっている。

そのため、後者にはVaster2の人気記事のCSS設定を反映することができない。

よって、消してしまった場合は改めてウィジェットのコードを書き加える必要がある。

Vaster2の人気記事ウィジェットを復元する方法


【方法】

・「テンプレートのバックアップ」を行う（念のため）
・「レイアウト」から「人気の投稿」ウィジェットを追加
・「HTMLの編集」で「人気の投稿」を検索
・「人気の投稿」の横の▶を全部押してウィジェットのコードを出す
・「人気の投稿」の<b:widget 中略>～</b:widget>までを元のコードに書き直す



<b:widget id='PopularPosts1' locked='false' title='人気記事' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title'>
<h4>
<data:title/>
</h4>
</b:if>
<div class='popular-post'>
<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) 記事タイトルのみ -->
<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>
<!-- (2) 記事タイトルと要約文 -->
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<p><data:post.snippet/></p>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) 記事タイトルとサムネイル画像 -->
<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) 記事タイトルとサムネイルと要約 -->
<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'>
<p><data:post.snippet/></p>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>