スキップしてメイン コンテンツに移動

Bloggerに関連記事を表示させる2つのサービス

Bloggerで、現在表示されていページに、関連する記事へのリンクを表示させる方法です。

「人気の投稿」や「注目の投稿」を表示させるガシェットは、標準で用意されていますが、「関連記事」を表示する為のガシェットは、用意されていません。

今回は、Bloggerに「関連記事」を表示させる2つのサービスについて紹介します。

Milliard

「シスウ株式会社」が提供していいる、関連記事を表示する為の外部サービスです。
スマホ / PC対応で、オプションで、パネル型/リスト型表示など、色々な表示形式から関連記事を表示出来ます。
また、カスタムテンプレートにも対応しており、独自のHTMLで関連記事を表示させる事も可能になっています。

Milliardトップページの画像

設定方法

まずは、[Milliard関連ページプラグインについて] にアクセスします。

下の方までスクロールし、[利用方法] -> [Bloggerをお使いの方はこちら]をクリック

下の方までスクロールしてBloggerをお使いの方はこちらをクリック

後は、Milliardのサイトに記載されている手順に従い、コードの生成およびガシェットの追加を行えば、関連記事を表示させる事ができます。

Premium Flexible Related Post Widget for Blogger – Blogspot

こちらは、外部のサービスではなく、JavaScriptだけで動く、カスタムウェジットです。
現在表示している記事のラベルから、同じラベルを記事および、本文からラベルと同じキーワードを持つ記事を抽出して、関連記事として表示してくれます。

Premium Flexible Related Post Widget for Blogger

Premium Flexible Related Post Widget for Bloggerのトップページ

設定方法

上のサイトに記載されていますが、まずは、BloggerテーマのHTMLを編集します。
以下のHTMLを、関連記事を表示させたい場所に、コピーします。

<!-- START::_140414_related_posts::START -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:post.labels'>
  <b:loop values='data:post.labels' var='label'>
   <span class='_140414_related_label' expr:post_id='data:post.id' expr:url='data:label.url' style='display:none'><data:label.name/></span>
  </b:loop>
 </b:if>
 <div class='_140414_related_posts' expr:post_id='data:post.id'>
 </div>
</b:if>
<!-- END::_140414_related_posts::END -->

Premium Flexible Related Post Widget for Blogger のページにアクセスして、関連記事の表示オプションを設定します。

enter image description here

※オプションの設定内容は以下の通りです。

オプション 内容
Post Number 表示する関連記事の数を指定します。
Show Labels ラベルの表示/非表示を設定します
Show Comment Number コメントの表示/非表示を設定します
Show Author 作成者の表示/非表示を設定します
Show Thumbnail サムネイル画像の表示/非表示を設定します
Thumbnail Height サムネイル画像を表示する場合、サムネイル画像の高さを指定します
Default Thumbnail 画像が存在しない記事に表示する、デフォルトのサムネイル画像のURLを指定します
Show Date 記事公開日の表示/非表示を設定します
Show Snippet 記事の抜粋(本文の一部)の表示/非表示を設定します
Snippet Length 記事の抜粋を表示する場合、表示する文字数を指定します
Show Border 区切り線の表示/非表示を設定します
Date Format 日付の書式を設定します

オプションの入力が完了したら、[Add Widget]をクリックして、カスタムウェジットを追加します。

Bloggerカスタムウェジットの追加画面

手順はこれで完了です。
これで追加した場所に、関連記事が表示されていると思います。

不具合情報

2019年1月現在、サムネイル画像が正しく表示されない問題を確認しています。
(画像が設定されている記事なのに、デフォルトのサムネイル画像が表示される)

その為、このカスタムウェジットを使う場合は、サムネイル表示なしで使った方法が良いと思います。

さいごに

最後まで読んで頂きありがとうございます。

Bloggerは無料で使用できるブログサービスですが、標準機能だけでは若干機能不足な所があるのが否めない感じがしますね…

しかし、今回のように外部のサービスと組み合わせれば、他のブログサービスと変わらないくらいの機能を実装する事が可能ですので、私は今後もBloggerを使って行きたいと思います。

スポンサーリンク
スポンサーリンク
スポンサーリンク

コメント

このブログの人気の投稿

axiosの使い方まとめ (GET/POST/例外処理)

axiosの使い方まとめ (GET/POST/例外処理)最近何かとよく使うJavaScriptでAJAX通信を行うaxiosについて、簡単に使い方をまとめました。GETリクエストをaxiosで送るまずはGETリクエストをaxiosで送る方法です。const res =await axios.get('/users') console.log(res.data)分割代入の記法を使うと、以下のようにも書けますconst{data}=await axios.get('/users') console.log(data)クエリパラメータ (URLパラメータ)を指定クエリパラメータを指定する方法は2つあります。1つ目は、axios.getに指定するURLに直接記述する方法です。axios.get('/user?id=123')2つめは、axios.getの第2引数に、オプション指定する方法です。axios.get('/user',{ params:{ id:123}})POSTリクエストをaxiosで送る次はPOSTリクエストをaxiosで送る方法です。JSON形式でPOSTするJSON形式でPOSTする場合は、axios.postの第2引数に、送信するデータをJavaScriptオブジェクトで指定します。const res =await axios.post('/user',{ id:123, name:'Yamada Tarou'})application/x-www-form-urlencoded形式でPOSTするapplication/x-www-form-urlencoded形式でPOSTする場合は、URLSearchParamsを使います。var params =newURLSearchParams() params.append('id',123) params.append('name','Yamada Tarou')const res =await axios.post('/user', params)axios でファイルをアップロードする画像などのファイルを、axiosでアッ…

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決する

[VB, C#] Windows 8, Window 10 で ImeModeが制御できない問題を解決するタイトルの通りですが、Windows 8 以降では Windows Form アプリケーションで、コントロールの ImeMode に Katakana や KatakanaHalf を設定しても、カタカナになってくれません。なぜ ImeMode が効かないのか?Windows 8 以降、IME Mode の切り替えは、ユーザー単位で切り替わるようになった為、アプリから IME Mode 制御が出来ないようになりました。
(IME をON にした場合、常に ひらがな モードになます)※ Windows 7までは、IME Modeの切り替えはアプリ単位で行われていた為、問題なくアプリから IME制御が行えました。対処方法Windows 8 以降、IMEの制御は、InputScope クラスの利用が推奨されています。
しかし、InputScope クラスは、WPF、Windows ストアアプリでしか使えない為、Windows Formアプリでは使用できません。
(Windows Form はもう使うな!という事でしょうか (涙) )結論としては、コントールパネルの設定で、IMEの制御をユーザ単位から アプリ単位に変更する事ができます。
これで、Windows Formアプリでも 従来通りIMEの制御を行う事が出来ます。おわりにこの方法だと、アプリをインストールする端末すべてに設定が必要となり、とっても面倒です。。。
しかし、今の所これしか方法がない状態です。
これからは Windows Formではなく、WPFや Windows ストアアプリで作れという事ですかね (^^;)

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]

MailKitの使い方! エンコーディング指定や添付ファイをメールで送信する方法[C#/VB Tips]MailKitを使ってメールを送るサンプルコードです。(C#)UTF8/iso-2022-jpのエンコーディング指定、GMail/YahooのSMTPサーバで送るなど、4つのサンプルコードでMailKitの使い方を紹介します。MailKitって何?2017年に.NET標準のSystem.Net.Mail.SmtpClientが廃止予定となり、Microsoftより今後はオープンソースライブラリである、MailKitに置き換えるとアナウンスがありました。既にSmtpClientは非推奨になっており、今後は廃止されていきます。現在、SmtpClientを使用したソースコードには、Visual StudioからMailKitを使うよう警告が出るようになっています。さっそく、MailKitを使ってメールを送信するサンプルコードを作っていきます。UTF8でメールを送信文字エンコーディングを、UTF8でメールを送信するサンプルコードです。
MailKitは、デフォルトの文字エンコーディングがUTF8なっている為、シンプルなコードでメールを送信する事ができます。var host ="<smtp server name>"; var port =25;// or 587using(var smtp =new MailKit.Net.Smtp.SmtpClient()){//SMTPサーバに接続する smtp.Connect(host, port, MailKit.Security.SecureSocketOptions.Auto);//認証が必要な場合は、以下のコメントを解除//smtp.Authenticate("<id>", "<password>");//送信するメールを作成する var mail =new MimeKit.MimeMessage(); var builder =new MimeKit.BodyBuilder(); mail.From.Add(new MimeKit.MailboxAddress("",&quo…