Blogger Bloggerカスタマイズ 注目の投稿

Blogger　「注目の投稿」の設置とカスタマイズ

Bloggerに新たに導入された「注目の投稿」ガジェットの設置と、見た目のカスタマイズメモです。「注目の投稿」は選択した投稿をハイライト表示できるガジェットで、過去の記事に埋もれてしまったみんなに読んでもらいたい記事などを好きな場所に表示できます。

今回はトップページの左下「禁煙」の下に「禁煙3ヶ月――」を追加します。

「注目の投稿」の設置と設定

設置場所、設定ともに後から変更可能です。

設置

表示したい場所の「ガジェットを追加」をクリックして、「注目の投稿」を追加します。

設定

ガジェットのタイトルを変更したいときは、「注目の投稿」を変更します。

投稿のタイトルと画像を表示したくないときは、チェックを外します。

表示する投稿は、「注目の投稿を選択」でラベルと記事内の文字から絞り込み検索ができます。

「保存」を押して配置を変更したら完了です。

上の画像は、ガジェットのタイトルを「注目の投稿」、投稿タイトルと画像ともに「表示」の設定にしています。

見た目のカスタマイズ

「注目の投稿」と言うだけあって、デフォルトではガジェットタイトルがH2、記事タイトルがH3になっています。ガジェットタイトルは「注目の投稿」です。

ガジェットタイトルのタグを変更

このブログの場合、トップページのカテゴリタイトル（WordPress、Blogger、禁煙やSeesaaなど）は、H2となっています。そこで、今回はガジェットタイトルをH3に変更します。

テンプレート＞HTMLの編集から注目の投稿（上で設定したガジェットタイトル）を検索し、そのすぐ下にある

<h2 class='title'><data:title/></h2>

のh2をh3にそれぞれ変更します。

記事タイトルのタグを変更

続いて記事タイトルをDIVに変更します。
上で検索したすぐ下にある

<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>

のh3をdivにそれぞれ変更します。

変更後は、下の画像のようになります。

見た目の変更

ガジェットタイトルの見た目を変更したい場合は、

<h2 class='title'><data:title/></h2>

のclassの方のtitleを変更して、cssを編集します。

記事タイトルの見た目を変更したい場合は、

<h3><a expr:href='data:postUrl'><data:postTitle/></a></h3>

を

<h3 class='attention'><a expr:href='data:postUrl'><data:postTitle/></a></h3>

のようにclassを追加して、cssを編集します。※classは一例です。

スポンサーリンク