どうも。
突然ですが、Bloggerで新着記事の設置について調べてみました。
他のブログサービス等では、記事ページに新着記事の設置が見受けられます。
Bloggerでは［人気の記事］やVaster2で実装されている［関連記事］等は記事ページに設置されていますが、新着記事については設置できません。
トップページに記事一覧があるので不要との判断なのでしょうか？
外部のガジェット作成ツールを使えば数ステップでカッコイイ新着記事一覧を作成する事が可能です。
ただし、あまり気にする事では無いかも知れませんが、HTMLとCSSが肥大化するので導入する事を躊躇しました。
そこでBloggerに標準で用意されているガジェットを流用して、簡易的な新着記事一覧を設置する事にしました。
指定したURLのフィード（フィードリンク）をブログに設置する事が出来ます。
このガジェットを使って、自身のURLを指定する事で最新の記事のリンクを設置する事が可能になります。
ガジェットの一覧が表示されたら［フィード］を選択。
フィードの設定画面が表示されたら、フィードURLの箇所に自身のURLを入力して［次へ］をクリックします。
（フィードURLですが、入力は.com迄でOK）
タイトルや表示する記事数等お好みで入力して［保存］をクリック。
これで新着記事としてフィードリンクがブログに設置されます。
シンプルでいい感じでしょう。
トップページは記事一覧が表示されているので情報がダブってしまう事になります。
今回は記事ページのみ表示出来る様にひと手間加えました。
テンプレートのバックアップを取り、HTMLを変更していきます。
Bloggerの管理画面より テーマ＞＞HTMLの編集と進みテンプレートのHTMLを変更します。尚、変更については自己責任でお願いします。
前述でガジェット［フィード］を追加すると、HTMLに以下のコードが追加されています。
<b:widget id='Feed1' locked='false' title='新着記事' type='Feed' version='1'>
～以下略～
このコード内の<b:includable id='main'>以下の箇所に青字を追加します。
この青字部が記事ページの時だけに表示する条件になります。
これで記事ページが表示された時だけガジェット［フィード］を使った簡易版新着記事が表示されました。
サムネも無いシンプルな新着記事一覧ですが、簡単且つHTMLやcssが肥大化する事無く設置出来ます。
まぁ本来の［フィード］ガジェットの使い方では無いかもしれませんが。
*HTMLを更新中にガジェットのtitleが消えてしまう事があります。
レイアウト画面から編集して再度登録してみてください。
以上
突然ですが、Bloggerで新着記事の設置について調べてみました。
他のブログサービス等では、記事ページに新着記事の設置が見受けられます。
Bloggerでは［人気の記事］やVaster2で実装されている［関連記事］等は記事ページに設置されていますが、新着記事については設置できません。
Bloggerに新着記事を設置
結論から言うとBloggerには新着記事を表示するガジェットがありません。トップページに記事一覧があるので不要との判断なのでしょうか？
外部のガジェット作成ツールを使えば数ステップでカッコイイ新着記事一覧を作成する事が可能です。
ただし、あまり気にする事では無いかも知れませんが、HTMLとCSSが肥大化するので導入する事を躊躇しました。
そこでBloggerに標準で用意されているガジェットを流用して、簡易的な新着記事一覧を設置する事にしました。
ガジェット［フィード］を使った新着記事
Bloggerで用意されているガジェットに［フィード］があります。指定したURLのフィード（フィードリンク）をブログに設置する事が出来ます。
このガジェットを使って、自身のURLを指定する事で最新の記事のリンクを設置する事が可能になります。
ガジェット［フィード］の設置
Bloggerの管理画面よりレイアウトを選択して、設置したい場所でガジェットの追加をクリックします。ガジェットの一覧が表示されたら［フィード］を選択。
フィードの設定画面が表示されたら、フィードURLの箇所に自身のURLを入力して［次へ］をクリックします。
（フィードURLですが、入力は.com迄でOK）
タイトルや表示する記事数等お好みで入力して［保存］をクリック。
シンプルでいい感じでしょう。
記事ページの時だけ表示したい
このままでも良いのですが、トップページにも表示されてしまいます。トップページは記事一覧が表示されているので情報がダブってしまう事になります。
今回は記事ページのみ表示出来る様にひと手間加えました。
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が肥大化する事無く設置出来ます。
まぁ本来の［フィード］ガジェットの使い方では無いかもしれませんが。
*HTMLを更新中にガジェットのtitleが消えてしまう事があります。
レイアウト画面から編集して再度登録してみてください。
以上
0 件のコメント:
コメントを投稿