Bloggerの人気の投稿のコンテンツ全体をクリック可能にする

Google Blogger の人気の投稿は、たとえクリックされなくても古いコンテンツのを掘り起こしてくれ、内部リンクで検索クローラーを補助するので付けておくと良いと思います。

人気の投稿ウィジットの表示方法は、画像とスニペットに表示非表示の選択肢があり、4 種類。

タイトルのみ

サムネイルのみ

抜粋のみ

サムネイルと抜粋

タイトルは必ず表示され、タイトルと画像にはそれぞれリンクが付くので、画像を表示すると同じリンクが2つあることになり、あまり美しくありません。

HTML5では、<div>を<a>で囲うことができるので、それを利用して、スニペットも含めて全体をクリック可能な広い1つのリンクにする方法です。

Blogger テンプレート カスタマイズ

人気の投稿のウィジットのコードは最近新しくなり、少し違う場合がありますが大筋は同じです。

1. ウィジットへ移動からPopularPosts1へジャンプします。PopularPosts1 は PopularPosts2 や 3 という名前の場合もあります。

   

2. widgetの間のaタグを一旦全て削除します。

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

   の間にある

   <a expr:href='data:post.href'>と<a expr:href='data:post.href' target='_blank'>と</a> を削除する。

   元の状態一部例
   <a expr:href='data:post.href'> <data:post.title /> </a>
   変更後
   <data:post.title />

3. リスト全体をリンクで囲います。

   <li>の直後に<a expr:href='data:post.href'>を追加します。

   <li><a expr:href='data:post.href'>

   

   </li></b:loop>の直前に、</a>を追加します。

   </a></li>

   

   これで完成。全体がリンクになりました。

このままでも良いのですが、抜粋の部分もリンクカラーになってしまうので、Bodyの文字色に変更します。

<b:skin>…</b:skin>の間にスタイルを追加します。

.item-snippet { color: $(body.text.color); }

bloggerに設定したBodyの文字色になります。

または、直接色を指定します。

.item-snippet { color: #222222; }

リンクの下線を消す。

.popular-posts a:hover{ text-decoration:none; }