2015年5月4日月曜日

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

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; }