どうも。
Bloggerのガジェットを利用していますか？
他のブログサービスに比べてあまり優れた機能は無い様に思われていますが、実はそんな事無いと思います。知らんけど。
中にはシンプルで使い勝手の良いガジェットも用意されています。
Blogger標準のガジェットの中からオススメをご紹介。
今回は"フィード"を設置してみます。
しかし、Bloggerには新着記事を表示するガジェットが用意されていません。
トップページを表示していれば記事一覧があるので不要ですが、検索等でダイレクトに記事ページにアクセスして来た読者を最新の記事に誘導する事も可能になります。
新着記事の機能はサードパーティのガジェット作成ツールもあるらしいですが、面倒くさいので使用は避けて、Bloggerが用意しているガジェットを使用して、新着記事一覧を設置する事にしました。
設置だけであれば、HTML/CSSは編集しません。
でも、心配な方はバックアップをおすすめします。
ガジェットの一覧が表示されたら"フィード"を選択。
設定画面が表示されたら、フィードURLの箇所に自身のブログURLや姉妹サイト等のURLを入力して［次へ］をクリックします。
タイトル（以下赤囲い）や表示する記事数等お好みで入力して［保存］をクリック。
これで新着記事としてフィードリンクがブログに設置されます。
シンプルなのにそれらしい感じでしょう。
トップページは記事一覧が表示されているので情報がダブってしまう事になります。
今回は記事ページの時だけこのガジェットが表示する様にひと手間加えました。
テンプレートのバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
前述でガジェット"フィード"を追加すると、HTMLに以下のコードが追加されています。
<b:widget id='Feed1' locked='false' title='新着記事' type='Feed' version='1'>
～以下略～
このコード内の<b:includable id='main'>以下に青字を追加します。
青字部が記事ページの時だけに表示する条件式になります。
これで記事ページが表示された時だけガジェット"フィード"を使った簡易版新着記事が表示されました。
サムネも無いシンプルな新着記事一覧ですが、簡単且つHTMLやcssが肥大化する事無く設置出来ます。
記事ページの時だけ表示する場合、ガジェットを一旦削除して再登録したり、設置場所等を変更する度にHTMLが変更されてしまう為、都度今回の変更を適用する必要があります。
注意2
登録したtitleが消えてしまう事があります。
消えてしまう条件はわかりません。
この場合、レイアウト画面から再度登録すると復活します。
又は、上記のコード内の<h2><data:title/></h2>を<h2>新着記事</h2>等直接タイトルに変えてしまう事でも回避できます。
以上
Bloggerのガジェットを利用していますか？
他のブログサービスに比べてあまり優れた機能は無い様に思われていますが、実はそんな事無いと思います。知らんけど。
中にはシンプルで使い勝手の良いガジェットも用意されています。
Blogger標準のガジェットの中からオススメをご紹介。
今回は"フィード"を設置してみます。
ガジェット"フィード"を使ってBloggerに新着記事を設置
自身のブログに新着記事や姉妹サイトの新着記事が設置されているブログを見かけます。しかし、Bloggerには新着記事を表示するガジェットが用意されていません。
トップページを表示していれば記事一覧があるので不要ですが、検索等でダイレクトに記事ページにアクセスして来た読者を最新の記事に誘導する事も可能になります。
新着記事の機能はサードパーティのガジェット作成ツールもあるらしいですが、面倒くさいので使用は避けて、Bloggerが用意しているガジェットを使用して、新着記事一覧を設置する事にしました。
ガジェット"フィード"の設置方法
"フィード"はRSS フィードまたは Atom フィードからコンテンツを最大5件ブログに追加します。設置だけであれば、HTML/CSSは編集しません。
でも、心配な方はバックアップをおすすめします。
設置方法
Bloggerの管理画面（ダッシュボード）よりレイアウトを選択して、設置したいセクションで"ガジェットの追加"をクリックします。ガジェットの一覧が表示されたら"フィード"を選択。
設定画面が表示されたら、フィードURLの箇所に自身のブログURLや姉妹サイト等のURLを入力して［次へ］をクリックします。
タイトル（以下赤囲い）や表示する記事数等お好みで入力して［保存］をクリック。
これで新着記事としてフィードリンクがブログに設置されます。
シンプルなのにそれらしい感じでしょう。
記事ページの時だけ表示したい…。
このままでも良いのですが、トップページにも表示されてしまいます。トップページは記事一覧が表示されているので情報がダブってしまう事になります。
今回は記事ページの時だけこのガジェットが表示する様にひと手間加えました。
HTMLを変更
ここからはHTMLを変更します。テンプレートのバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
条件分岐タグ
記事ページの時だけガジェットを設置したい場合、タグ［if cond］使います。前述でガジェット"フィード"を追加すると、HTMLに以下のコードが追加されています。
<b:widget id='Feed1' locked='false' title='新着記事' type='Feed' version='1'>
～以下略～
このコード内の<b:includable id='main'>以下に青字を追加します。
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
<b:if cond='data:blog.pageType == "item"'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
青字部が記事ページの時だけに表示する条件式になります。
サムネも無いシンプルな新着記事一覧ですが、簡単且つHTMLやcssが肥大化する事無く設置出来ます。
注意点が２つあります。
注意1記事ページの時だけ表示する場合、ガジェットを一旦削除して再登録したり、設置場所等を変更する度にHTMLが変更されてしまう為、都度今回の変更を適用する必要があります。
注意2
登録したtitleが消えてしまう事があります。
消えてしまう条件はわかりません。
この場合、レイアウト画面から再度登録すると復活します。
又は、上記のコード内の<h2><data:title/></h2>を<h2>新着記事</h2>等直接タイトルに変えてしまう事でも回避できます。
以上
コメント