画像付き関連記事を表示するスクリプト
『ShowImageLinks.js』を導入して約1ヶ月…
使ってみて気付いた不具合の修正と活用法をまとめてみました。
スクリプトの修正
まずは、スクリプト紹介記事でも書いた文字化け対処策ですが…
画像付き関連記事を表示するスクリプト
画像付き関連記事を表示するスクリプト『ShowImageLinks』の導入方法と設定です。(Serene Bach対応)
記載する位置を詳しく述べてなかったんで改めて。。
スクリプト冒頭の部分に赤字の部分を追加します。
function doOrderGuaranteedAjax(ajaxOptionArray, allCompleteHandler) {
var defaults = {
// moji setting
beforeSend: function(xhr){
xhr.overrideMimeType("text/html;charset=euc-jp");
},
type: "GET",
complete: function () {
記入する文字コードですが、リンクを拾ってくるページの文字コードに合わせます。
※当ブログの文字コードはECU-JPなのでこの表記ですが、Shift_JISで書かれたページなら『charset=Shift_JIS』と書きます。もちろんUtf-8だったら変更する必要ありません。
あと…
紹介記事には書きませんでしたが
ブラウザによって画像が表示されないという不具合がありまして…
色々模索してみましたが。。
どうやら画像表示タグに『width』や『height』のサイズ指定が含まれたものは
弾かれてしまうようで…
とりあえず画像取得部分のif文を削除する事で解消しました。
赤字部分を削除します。
if (imgJ.eq(i).width() > minWidth || typeof imgJ.eq(i).attr("width") === "undefined") {
var imghtml = '<span class="linksthumb"><img src="' + imgJ.eq(i).attr("src") + '"';
if (typeof imgJ.eq(i).attr("alt") !== "undefined") {
imghtml += ' alt="' + imgJ.eq(i).attr("alt") + '"';
}
if (typeof imgJ.eq(i).attr("width") !== "undefined") {
imghtml += ' width="' + imgJ.eq(i).attr("width") + '"';
}
if (typeof imgJ.eq(i).attr("height") !== "undefined") {
imghtml += ' height="' + imgJ.eq(i).attr("height") + '"';
}
imghtml += ' /></span>';
jQuery('a[href*="' + linkURL + '"]', element).append(imghtml);
break;
}
下の } も忘れずに消してください。
※これを行うと取得画像大きさ判別の【minImgWidth】設定が無効になります。
おそらく上記の変更をすれば問題なく動作してくれるかと思います。
linksURL:の見直し
リンクを拾ってくるページのURLを指定する【linksURL:】ですが
関連記事表示に同カテゴリー内の記事を指定するために
Serene Bachの独自タグ{category_id}を使って
linksURL: ["/sb/sb.cgi?cid={category_id}"],
こんな感じで設定していたんですが…
これだと同一カテゴリーページの1ページ目からしか
リンクが拾ってこられない事が判明しました。
最新記事の中から表示させたいのならこれでも問題はないんですけど…ね。。
ちなみに、ページ毎の表示数設定は
ウェブログの環境設定から変更できます。。
当ブログの設定は【7件】ですから
同一カテゴリーの最新7件の中からリンクが選択される設定になってました。
linksURL:について、配布サイトさんで確認すると…
ちなみに、ここで指定するURLは複数個でも大丈夫です。複数個書く場合はカンマ(,)で区切って複数書いてください。例えば以下の様な感じです。
["/category1/", "/category1-1/", "/category1/2/"]
指定方法によっては、カテゴリとタグの両方のアーカイブページから関連記事を拾ってくる事も、1つのカテゴリのアーカイブページ3ページ分から拾ってくる事も可能です。ただし、1つの場合にも[]で囲むのは忘れない様にしてください。
…だそうなので。。
下記の様に書き直しました。
linksURL: ["/sb/sb.cgi?cid={category_id}","/sb/sb.cgi?cid={category_id}&page=1","/sb/sb.cgi?cid={category_id}&page=2","/sb/sb.cgi?cid={category_id}&page=3","/sb/sb.cgi?cid={category_id}&page=4","/sb/sb.cgi?cid={category_id}&page=5","/sb/sb.cgi?cid={category_id}&page=6","/sb/sb.cgi?cid={category_id}&page=7"],
7ページ前までの同一カテゴリー記事(8ページ×7=56件)の中からリンクが選ばれるようになりました。
この辺は使われる方の記事数や環境によるんで…
ご自分の環境に合わせてど〜ぞ(^^
ShowImageLinks活用法:その1
ShowImageLinks活用法ですが…
まずは普通に、関連記事の表示に使います。。
表示はCSS(スタイルシート)でかなり自由にカスタマイズ出来るんで…
ご自分のサイトに合わせたスタイルで使用しましょ〜♪
ShowImageLinks活用法:その2
ShowImageLinksの仕組みですが
【linksURL:】で指定したページのリンクリストを表示させて
その後、そのリンク先ページの画像を拾ってきて表示させているそうで…
リンクを拾わせる事が出来れば
どんなページの画像でも表示させる事が可能なのでは?
(ページの書式が設定に見合ったモノであれば…)
っつ〜事で、試したモノが
こちらの画像付き人気記事ランキングです。
先日、当ブログに導入した『Lime Counter+W』
記事ランキング表示スクリプト変更 | ひいろんBLOG
を利用してリンクを拾えるようにカスタマイズしました。
人気順にリンクを拾わせる事が可能なので
純粋に上位順に表示もできますし…
ランダム表示も可能になってます。
こちらは実際に
パズドラ日記のサイドバーに貼り付けてあります。
ShowImageLinks活用法:その3
こちらは活用というか応用って感じなんですけど…
同じくLime Counterの管理画面にて
文字化け修正の補助として設置してみました。
LIME COUNTER では「ページ名」を、HTMLに記述したタグの引数から取得しますが、
訪問者のブラウザによっては、ごくまれに文字化けを起こすことがあります。
この場合管理モードからその「ページ名」を修正できるようにしていますので、適宜管理モードから修正してください。
【Lime Counter+W説明より引用】
この修正作業なんですが
文字化けしているリンク先でタイトルを一旦確認してから差し換えという手間が面倒なのと
確認した時点でカウントアップされちゃう…
という、ちょっとモヤっとする感じがイマイチ…
って事で。。
ログ編集画面にShowImageLinksで該当リンクのタイトルを表示させて
コピペできるようにしてみました♪
画像表示は…まぁ、オマケですけどね(爆
これだけで、かなり修正作業が楽になりました(^▽^
そんなこんなで色々と遊びましたが
アイデア次第では他にも色々使い道があるかもしれませんね♪
【2016/07/04追記】
表示速度高速化の記事UPしました。
画像付き関連記事表示の高速化 | ひいろんBLOG