画像付き関連記事を表示するスクリプト

画像付き関連記事を表示するスクリプト

| 2014年10月24日(金) |

0 |

ブログの関連記事表示に…と

『LinkWithin』を導入して２週間…

関連記事表示にLinkWithin導入 | ひいろんＢＬＯＧ

一応、サポートにメールも送ってみたんですけど。。

待てど暮らせど表示される記事が変わる気配がありません…

↓こんな感じ。。
ほぼ固定

パズドラ日記はこれでも良いですけど…
映画関連や愛車カスタマイズの記事にもこれじゃ…ねぇ(^^;

そんな、モヤモヤとした日々を送ってましたが。。

『おーとえすさいと』さんが配布されている
【ShowImageLinks】というスクリプトを導入してみました。

はい、いきなりですが…

こんな風になりました♪

関連記事：パズドラ日記

まぁ、見た目は『LinkWithin』と大して変わらないですよね。。

元々表示デザインは気に入っていましたし…

下部に表示されるzenbackの関連記事とも似せたスタイルで。。
（↓これですね。）
関連記事：zenbackパズドラ

ちなみに…

表示に関しては
css（スタイルシート）を使ってカスタマイズ出来る仕様になってます。

性能的には、同じカテゴリー内の記事を拾ってくる形式なんで…

【映画】

【RX-8】

【絵日記…爆】

って感じで
関連性が高い記事を表示させる事が可能です。。

ひいろんみたいに多種多様なカテゴリーのブログを書く者にとっては
非常にありがたい限りですね。。
（単に節操がないだけなんですけど…爆汗）

さて…

と、ここからが本題(?)

設置方法ですが…

設置にあたり、jQueryが必要になります。

未導入な方はこちらからダウンロードしましょう。
【jQuery】http://jquery.com/

アップロードが完了したら
head内
<head>～</head>に

<script type="text/javascript" src="【jQueryのＵＲＬ】"></script>

と書き込めばＯＫです。

『ShowImageLinks』の設置方法については
配布元である
おーとえすさんのサイトを参考に。。

画像付き内部リンクを表示させるスクリプト～関連記事とかに～ | おーとえすとさいと

解説通り設置すれば良いんですが…
文字エンコードの違いで文字化けしちゃいました。

ブログの文字エンコードが【utf-8】なら問題ないんですけど
ウチのブログのエンコードは【ECU-JP】でして…

その解決法として下記のサイトさん

ajaxでutf-8じゃないと文字化けする対策 - purazumakoiの[はてなブログ]

を参考にして…

beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=euc-jp");
},

を『showImageLinks.js』へ追記する事で文字化け解消しました。

ちなみに…
ブラウザによって色々違うみたいで。。
SafariとChromeは文字化けしてませんでしたが
FireFoxはダメでした。。

設置にあたり…
各種設定をしないといけないんですけど。。

以下、ひいろんが行った設定を記しておきますので参考まで…

linksURL: ["/sb/sb.cgi?cid={category_id}"],
maxLinks: 4,
minImgWidth: 200,
linksGroup: 4,
displayEle: '#kanren',
linkEle: 'div.entry_title',
displayImgEle: 'div.imagelinksbox',
imgEle: 'div.entry_body',
beginText: '<div class="imagelinksbox"><div class="boxtitle">他の人はこんな記事も読んでいます(o^∇^o)ノ</div>'

【各設定の解説】

linksURL:
　リンクを拾ってくるページのURLですが、カテゴリーＩＤを指定してます。
　Serene Bachの場合、独自タグ{category_id}を使用します。

maxLinks:
　表示するリンクの最大値です。zanbackの関連記事に合わせて４個に設定しました。

minImgWidth:
　拾ってくる画像の横幅の最低値です。
　デフォルトの100でも良いんですけど、なんとなく200に…爆

linksGroup:
　リンクを何個区切りでulタグを閉じるかの設定です。
　デフォルトの10でも良いんですけど、なんとなく気持ち悪いんで
　最大値と同じ4に設定しときました。

displayEle:
　リンクリストを表示する場所の指定です。
　おーとえすさんに習って#kanrenに設定しました。
　表示したい部分へ<div id="kanren"></div>と記します。

linkEle:
　リンクを拾ってくる場所です。
　当ブログの場合、記事タイトルが個別記事にリンクする仕様になってるんで
　記事タイトルを囲うclassであるentry_titleに設定しました。

displayImgEle:
　画像を表示させる場所です。
　デフォルト通りなんですが
　今後カスタマイズするかもしれないんであえて記載しておきました。

imgEle:
　画像を拾ってくる場所です。
　記事本文を囲うclassであるentry_bodyに設定しました。

beginText:
　リンクリストの前に表示されるテキストです。
　見出しですね。お好きに変更してもらっていいかと思いますが…
　<div class="imagelinksbox">の部分は変更されない方が良いかと思います。

上記設定は、あくまで当ブログに合わせて行った設定です。
使われてるテンプレート設定やブログサービスによっても
変わるかと思いますので。。
参考程度に…って感じで(^^

あと…

記事によっては画像が表示されない事があるんで。。

関連記事：画像が表示されない時の処理