おーとえすとさいと

「おーとえす」が「サイト」を作ったり更新したりしてる時に思う事を書いていければ良いなと思います

*

画像付き内部リンクを表示させるスクリプト 〜関連記事とかに〜

      2013/01/25


有名な無料ブログサービスの場合、多くは「関連記事」を文末に表示させる事は簡単です。設定とかで「関連記事を表示する」みたいな事をすれば良いだけです。FC2でもseesaaでもアメブロでも、基本的には言い方が少し異なるだけで簡単に表示できます。
(ただし、ここで言う関連記事とは同一カテゴリの記事の事を指します。FC2では「関連記事リスト」、seesaaでは「記事カテゴリ最新記事」、アメブロでは「他の記事へのリンク表示」の「同じテーマの最新記事を表示する」、など。)

しかし、自分が最初使っていたファンブログではそんな便利な機能はありませんでした。なので、関連記事の表示方法を必死に考えて、考えついた方法がjavascriptを用いた方法でした。javascriptを使うと、同一ドメイン内の任意のページの任意のコードを呼び出して表示させたりする事が出来るんです。(javascriptって凄い!)

そして、もう1つの自分が使っているブログサービスqlook blogでも関連記事を表示させる設定はなかったので、少し改良して導入してみました。

その際、「いっそプラグイン化して、このスクリプトを大々的に公開してみるか!」と思い立ったので今こんな記事を書いています。
残念ながらあまり上手い感じにはなりませんでしたが、紹介しようと思います。

目次

(都合によりリンクではありません。)

  • スクリプトの概要
  • スクリプトのダウンロード
  • スクリプトの使い方
  • オプションの概要と初期設定
  • [オプション1:linksURL] リンクを拾ってくるページのURL
  • [オプション2,3,4,5] リンクの表示個数など
  • [オプション6,7,8,9] 表示場所とかリンクを拾ってくる場所とか
  • [オプション10,11,12] 前後のテキストとか
  • [オプション13:nextFunction] コールバック的な
  • 以上、オプションはそんな感じ
  • [おまけ?] 表示をcss(スタイルシート)で良い感じに!
  • [カスタマイズ例1] 下方に画像、上部に重なる様にしてテキストリンク
  • [カスタマイズ例2] 上方に画像、下方にテキストリンク
  • [カスタマイズ例3] サムネイル付きリストみたいな感じ
  • [参考ページ]
  • [displayImgEleについて]

スクリプトの概要

指定したURLからリンクを拾ってきて、それらのリンクリストを任意の場所に表示させるスクリプトです。更に、そのリンクにリンク先の画像を加える事も出来ます。なので、ある記事のカテゴリのアーカイブページ(カテゴリの記事一覧のページ)を指定して、画像付きの関連記事を表示させる、とかが出来ます。
名前は「showImageLinks.js」です。

ちなみに、非同期でリンクや画像を表示するので、ページ表示が重くなったと感じる事は少ないんじゃないかと思っています。

スクリプトのダウンロード

showImageLinks.zip

(このスクリプトを使う場合にはjQueryが必要です。jQueryを設置していない方は以下のページなんかを参考にして設置して下さい。)
ブログにjQueryを設置する方法 – ファンブログハック

スクリプトの使い方

最も短いコードはこんな感じです。(以下、コードは一度ダブルクリックしてからコピーして下さい。そうしないと行番号とかまでコピーされてしまいます。)

<script src="http://o-ands.net/wp-content/uploads/2013/01/showImageLinks.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(function() {
  jQuery.showImageLinks();
});
</script>

出来れば、スクリプトをダウンロードしてご自身のブログにアップロードして、1行目でそれを読み込む様にして下さい。(アップロードできない場合でも、一度ダウンロードしてコードをブログに貼りつけるなどした方が良いです。このブログ(おーとえすとさいと)がずっとあるか分からないので、スクリプトが使えなくなるおそれがありますので。)

おそらくこれだけでも、多くのブログやサイトの一番下になんか変なリンクとかが表示される様になるんじゃないかと思います。表示場所など、以下でオプションの説明をしていきます。

オプションの概要と初期設定

まず、オプションとその初期設定を書いておきます。

linksURL: ["/"],
maxLinks: 5,
minImgWidth: 100,
linksGroup: 10,
showRandom: true,
displayEle: 'body',
linkEle: 'div',
displayImgEle: 'div.imagelinksbox',
imgEle: 'body',
beginText: '<div class="imagelinksbox"><div class="boxtitle">Image Links</div>',
endText: '</div>',
noneComme: '<div class="nonecomme">no links.</div>',
nextFunction: false

オプションってなんだ?って方もいるかもですが、例えば以下の様な感じで実行するとオプションが指定できます。

<script type="text/javascript">
jQuery(function() {
  jQuery.showImageLinks({
    maxLinks: 10,
    beginText: '<div class="imagelinksbox"><h3 class="boxtitle">関連記事</h3>'
  });
});
</script>

では、オプションの項目について説明していきます。

[オプション1:linksURL] リンクを拾ってくるページのURL

まず、linksURLはリンクを拾ってきたいページのURLを設定するオプションです。初期設定では[“/”]のみなので、ブログやサイトのトップページになっています。
例えば、このスクリプトを関連記事を表示させる為に使いたい方は、このURLを『その記事のカテゴリのアーカイブページのURL』に設定すれば良い訳です。
例えば、qlook blogの場合は以下の様な感じになります。

<script type="text/javascript">
jQuery(function() {
  jQuery.showImageLinks({
    <!--{tag}-->linksURL: [<!--{@tag}-->encodeURI("{tag/url}"),<!--{/}-->],<!--{/}-->
  });
});
</script>

qlook blogの独自タグの説明を少しすると、「<!–{tag}–>」と「<!–{/}–>」で囲むと『記事にタグが設定されていれば表示する』という意味になります。そして、「<!–{@tag}–>」と「<!–{/}–>」で囲むと『タグがある限り繰り返す』という意味になります。また、「{tag/url}」はその記事のタグのアーカイブページのURLです。
この事を参考に、自身のブログサービスで使ってみて下さい。もし「タグとかまるで分からん!」って方がいましたらコメントで言ってくだされば、どういう風に書けば良いのか教えてあげる事もできるかもですので、気軽にコメントして聞いてください。

ちなみに、「encodeURI(〜〜)」というのは日本語を含むURLをエンコードする為のjavascriptのメソッドです。ちょっと難しい言葉が続きましたが、もしカテゴリやタグのアーカイブページのURLに日本語が含まれる場合はこれを書いてください。

ちなみに、ここで指定するURLは複数個でも大丈夫です。複数個書く場合はカンマ(,)で区切って複数書いてください。例えば以下の様な感じです。
[“/category1/”, “/category1-1/”, “/category1/2/”]

指定方法によっては、カテゴリとタグの両方のアーカイブページから関連記事を拾ってくる事も、1つのカテゴリのアーカイブページ3ページ分から拾ってくる事も可能です。ただし、1つの場合にも[]で囲むのは忘れない様にしてください。

[オプション2,3,4,5] リンクの表示個数など

オプションの2,3,4,5個目はリンクの表示個数などの設定です。

  • maxLinksは、表示するリンクの最大値です。
  • minImgWidthは、拾ってくる画像の横幅の最低値です。ここで指定したサイズより小さな画像は表示されない様になります。(1pxの画像ファイルや、SNSのアイコンなどを拾わない様にする為に設定してみました。)
  • linksGroupは、リンクを何個区切りでulタグを閉じるかを設定します。リンクはulタグで囲って表示されるのですが、例えば20個リンクを表示させる時に10個毎にulタグを付けると10個ごとにスペースを作ったりできるから見やすくなるかな? と思ってオプションにしてみました。
  • showRandomは、関連記事をランダム表示にするか否かの設定です。falseにすればランダム表示ではなく、新しい記事から最大個数までを表示する様になります。

[オプション6,7,8,9] 表示場所とかリンクを拾ってくる場所とか

オプションの6,7,8,9個目はjQueryのセレクタが並んでいます。
(jQueryのセレクタの基本は、「divタグを選ぶ場合には”div”、idがtestである要素を選ぶ場合は”#test”、classがtabであるdivタグを選ぶ場合は”div.tab”」とかそんな感じです。詳しくはSelectors – jQuery 日本語リファレンスを参考にして下さい。)

  • displayEleは、リンクリストを表示する場所の指定です。ここで指定したセレクタの末尾にリンクリストが表示されます。記事を”#content”に書いているのであれば”content”と指定すれば記事の末尾に表示する事が出来ます。(自分は<div id=”kanren”></div>ってやつを関連記事を表示させたい場所に書いて、”#kanren”って指定したりしてます。)
  • linkEleは、リンクを拾ってくる場所です。ここで指定した場所1つに付き1つリンクを拾ってきます。例えば、アーカイブページの記事のタイトルがH2タグで囲ってあるなら”h2″って書けば記事のタイトルを全部拾ってきてくれます。(自分はそうしてます。)
  • displayImgEleは、画像を表示させる場所です。(ちょっと複雑なので詳細は後述。変更しなくて良いと思います。)
  • imgEleは、画像を拾ってくる場所です。ここで指定した場所の最初の画像を拾ってきて表示します。なので、記事本文が書いてある場所を指定すれば、本文で最初に出てくる画像を拾ってきて表示してくれます。(上手く指定しないとブログのヘッダー画像とかを拾ってきたりします。ちなみに、画像が見つからなかった場合は何も表示しません。ちょっと不便ですね。。w)

jQueryに馴染みの無い方は分かりにくいかもですが、分からなければ気軽にコメントしてください。(というか、jQueryが分かる人にも分かりにくい仕様になってると思います。申し訳ないです。。)

[オプション10,11,12] 前後のテキストとか

オプションの10,11,12個目はリンクリストの前後に表示させるテキストなどです。

  • beginTextは、リンクリストの前に表示されるテキストです。「beginText: ‘<div class=”imagelinksbox”><h3 class=”boxtitle”>関連記事</h3>’」の様に書けば「関連記事」って表示される様になります。初期設定ではdivタグが次のendTextと対応しているので注意して下さい。また、displayImgEleとも関連があるので注意してください。(詳細は後述)
  • endTextは、リンクリストの後に表示されるテキストです。初期設定ではdivタグがbeginTextと対応しているので注意して下さい。
  • noneCommeは、リンクを拾ってこれなかった時に表示されるテキストです。「関連記事は見つかりませんでした。」とか書けば良いと思います。

[オプション13:nextFunction] コールバック的な

最後のオプションnextFunctionは、コールバック関数ってやつ(?)です。
今回、このスクリプトが大変だった点としまして、「ajaxの通信が複数ある場合にそれらが衝突してしまって上手く動かない」という事がありました。それをjQueryでajax:非同期通信時、実行順番を保障する方法 – Kinopyo Blogで紹介されていた関数を使って解決しています。

つまり、多分ですが他にajaxの通信を使って他のページにアクセスする様なコードがあると衝突して動かないんです。
なので、もしそういうコードやスクリプトがある場合には、このnextFunctionに指定して実行して下さい。そうすれば衝突せず順番に処理を行ってくれるはずです。その場合は以下の様に書く事になります。

<script type="text/javascript">
jQuery(function() {
  jQuery.showImageLinks({
    nextFunction: function(){
      (ここにコードを書く)
    }
  });
});
</script>

以上、オプションはそんな感じ

はい、そんな感じです。
オプションを複数指定する場合は、上の例でも書いた様にカンマ(,)で区切って指定して下さい。最後のオプションの後にはカンマは付けても付けなくても大丈夫です。

これで好きな場所に好きなリンクを表示する事が出来る様になるはず、です。(非常に分かりにくいので、使いにくいかもですが。。)
まあWordPressとかを使っている人はもちろん、多くの無料ブログユーザーもこんなスクリプトを使う必要性はあまり無いと思いますが、一応こんなの作ってみましたよ、って話でした。まあ関連記事に限らず、好きなURLの画像付きリンクを表示させられるので、なんか使い方はあると思うんですけどね。サイドバーとか。

以上、showImageLinks.jsの説明でした!

[おまけ?] 表示をcss(スタイルシート)で良い感じに!

このスクリプトを使えば、とりあえず画像付きの関連記事とかが表示できる様になります。なりますが、それだけでは表示が非常に微妙だと思います。画像がはみ出てたりとかとか。
なので、cssによるカスタマイズの例を3つ程(似た様なものばかりですが)紹介しておきます。下の例は全て、idがkanrenの要素の中にリンクリストを表示している場合の物ですので、「#kanren」は適宜変更してご利用ください。

また、以下の画像は、自分のもう一つのブログ時間は万能薬でカスタマイズしてキャプチャした物です。

[カスタマイズ例1] 下方に画像、上部に重なる様にしてテキストリンク


テキストリンクの背景を半透明にして、画像に重なる様になっています。

#kanren:after{
content:"";
display:block;
clear:both;
}
#kanren ul{
margin:0;
padding:0;
}
#kanren li{
list-style:none;
display:block;
width:30%;
height:160px;
overflow:hidden;
float:left;
position:relative;
z-index:0;
border:2px solid #dddddd;
margin:6px;
}
#kanren li:hover{
border-color:#bbbbbb;
}
#kanren li a{
display:block;
width:100%;
height:100%;
}
#kanren li .imagelinktext{
display:block;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#bbffffff,EndColorStr=#bbffffff);
background-color: rgba(255, 255, 255, 0.9);
font-size:108%;
}
#kanren li img{
max-width:130%;
height:auto;
position:absolute;
bottom:0;
left:0;
z-index:-1;
}

[カスタマイズ例2] 上方に画像、下方にテキストリンク


画像を上部に表示させているタイプです。関連記事を表示するスクリプトで有名なzenbackとかLinkWithinとかみたいな感じです。

#kanren:after{
content:"";
display:block;
clear:both;
}
#kanren ul{
margin:0;
padding:0;
}

#kanren li{
list-style:none;
display:block;
width:30%;
height:200px;
float:left;
position:relative;
border:2px solid #dddddd;
margin:6px;
}
#kanren li:hover{
border-color:#bbbbbb;
}
#kanren li a{
display:block;
width:100%;
height:100%;
}
#kanren li .imagelinktext{
display:block;
font-size:108%;
position:relative;
top:60%;
}
#kanren li .linksthumb{
display:block;
width:100%;
height:60%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#kanren li img{
max-width:130%;
height:auto;
position:absolute;
top:0;
left:0;
}

[カスタマイズ例3] サムネイル付きリストみたいな感じ


横には並ばせず、縦に並ばせて、その左にサムネイルを表示させている様な感じです。自分が見た事あるサイトでは、バンクーバーのうぇぶ屋さんとかは現在こういう感じです。
(少しだけテクニック的な説明をしますと、a:beforeを「display:inline-block; height:100%; vertical-align:middle;」にして、テキストリンクとかもinline-blockにしてvertical-align:middle;にしたら、テキストリンクが上手い具合に上下方向の中央にレイアウト出来ました! )

#kanren ul{
margin:0;
padding:0;
}
#kanren li{
list-style:none;
display:block;
height:120px;
position:relative;
margin:6px;
}

#kanren li a:before{
content:"";
display:inline-block;
height:100%;
vertical-align:middle;
}
#kanren li .imagelinktext{
display:inline-block;
font-size:108%;
margin-left:130px;
vertical-align:middle;
}
#kanren li .linksthumb{
display:inline-block;
width:120px;
height:120px;
overflow:hidden;
position:absolute;
left:0;
border:2px solid #dddddd;
}
#kanren li .linksthumb:hover{
border-color:#bbbbbb;
}
#kanren li img{
max-width:150%;
height:auto;
position:absolute;
top:0;
left:0;
}
#kanren li a:hover .linksthumb{
border-color:#bbbbbb;
}
#kanren li a:hover .imagelinktext{
text-decoration:underline;
}

[参考ページ]

このスクリプトをプラグイン化するにあたって参考にした記事があるので紹介させてもらう。まあ「jQuery プラグイン化」で検索上位なので、わざわざ紹介するまでも無いかもですが。w

[displayImgEleについて]

displayImgEleの詳細について少し書いておきます。
実は、このスクリプトは最初にリンクリストを表示させて、その後に画像を拾ってきて表示させているんです。その為、画像を表示させる時に、その画像を表示させる場所を再度探して、その場所に表示させています。
その場所を指定するのがdisplayImgEleです。

これは、初期設定ではリンクリストを囲っているdivタグのクラスを指定しています。(beginTextで指定している物)
これを、例えば”body”とかにするとどうなるかと言うと、bodyタグの中で1番最初に出てくる『画像を探す時に使ったURLにリンクしているaタグ』に画像が追加されてしまいます。つまり、記事中でたまたまそのリンクを貼っていたら、その記事中のリンクに画像が追加されちゃう様になります。

そうならない様にする為に、beginTextを変更する場合にはdisplayImgEleも考慮して変更する様にして下さい。classを変える場合には、displayImgEleも変更する様にして下さい。

分かりにくい仕様で申し訳ないです。
もし、何かもっと良い方法があれば、コメントやtwitterなどで教えていただけると幸いです。
よろしくお願いします!

 - 日記

Comment

  1. ぽん太親父 より:

    こんにちは(^^)
    みかんさんのところのコメントで発見して、やってきました(^^ゞ
    画像付き、凄いですね。
    私も今度、挑戦してみます。

  2. おーとえす より:

    >ぽん太親父さん
    こんにちは!
    ちょっと分かりにくいかもですが、是非挑戦してみて下さい。
    お手伝いしますので^^

  3. かんちゃん より:

    こんにちは。
    便利なスクリプトありがとうございます。
    HTMLへの記述はどんな感じになりますか?
    ざくっとでいいので、教えていただければ幸いです。
    よろしくお願いいたします。

  4. おーとえす より:

    >かんちゃんさん

    こんにちは!
    コメントありがとうございます。
    そして分かりにくくて申し訳ないです^^;w

    HTMLへの記述についてですが、
    イメージとしてはHTMLはあまり書き換えず、スクリプトのオプションでどうにかする感じです。

    ですが、かなり分かりにくいと思うのでちょっと補足しますね。
    HTMLに関連する箇所はオプション6,7,8,9です。

    画像は後回しにすると、オプション6,7をちゃんと指定して、それに対応する様なHTMLになっていれば、少なくともリンクは表示される様になると思います。

    なので、オプション6,7のdisplayEleとlinkEleについての説明を読んでみて下さい。
    おそらくHTMLへの記述はあまり必要ないですが、例えば自分と同じ様にidがkanrenのdivタグを追加するとか、記事リンクをh2タグで囲むとか、そういう必要も出てくるかもです。

    この補足もまだ分かりにくいかもですが、懲りずにまた質問していただければなと思います^^;w
    頑張って下さい!

  5. かんちゃん より:

    おーとえすさんありがとうございます。

    このコメントで理解しました。

    迅速な回答ありがとうございました。

  6. かんちゃん より:

    オートエスさんこんにちは。

    FC2ブログで無事、トップページから画像を表示させることができましたが、
    その記事の個別ページが属しているカテゴリやタグから画像を持ってくることが出来ません。

    もしよければ指定方法を教えてください。

    jQuery(function() {
    jQuery.showImageLinks({
    linksURL: [“blog-category-.html”],
    });
    });

    jQuery(function() {
    jQuery.showImageLinks({
    linksURL: [encodeURI(“?tag=”)],
    });
    });

    上記の記述だと画像が全部同じになってしまいます。

    よろしくお願いいたしします。

  7. おーとえす より:

    >かんちゃんさん

    こんにちは。
    とりあえずリンクが表示出来た様で何よりです。

    URLについてですが、FC2の場合FC2独自のタグで、その個別ページのカテゴリやタグのURLを表す物がなかったでしょうか?
    カテゴリなら
    < %topentry_category_link>
    の様な。

    そのタグを使ってURLを指定してみて下さい。
    カテゴリとタグの両方から取ってくる場合は、カンマ区切りで両方書いたりすれば出来ると思います。

  8. かんちゃん より:

    オートエスさんこんにちは。

    下記の様な感じで指定したのですがダメでした。

    jQuery(function() {

    jQuery.showImageLinks({
    linksURL: [“blog-category-.html”],
    });
    });
    jQuery(function() {
    jQuery.showImageLinks({
    linksURL: [encodeURI(“?tag=”)],
    });
    });

    もう一度トライしてます。

    迅速な対応ありがとうございます。

  9. かんちゃん より:

    オートエスさんこんにちは。

    カテゴリ番号とタグを直接指定すると指定したぺージから取ってくることができました。

    変数はいろいろ試してみましたが全てデフォルトと同じ動きになってしまいます。

    丁寧に回答していただき本当にありがとうございます。

  10. おーとえす より:

    >かんちゃんさん

    そうでしたか。分かりにくくて申し訳ないです^^;
    そして、もしかしたらオリジナルタグもコメントに書いて下さっているのに反映されてないとかだったら申し訳ないです。

    もし8番のコメントの様に書いてしまっているのであれば、
    2つ目のオプションだけが有効になってしまっているんだと思います。
    jQuery.showImageLinks
    は1度だけ書く様にして下さい。

    そして、例えば

    linksURL: [“< %url>< %topentry_category_link>“< !--tag_list-->, “< %url>?tag=< %topentry_tag_list_parsename>“< !--/tag_list-->],

    の様にカテゴリとタグを1つの文で書いてみて下さい。(コメント様に!は大文字で書いて、%の前に空白を開けてますのでコピペする場合は注意して下さい。)

    変更後にブログのソースコードを見てみて、そこがちゃんとURLに置き換わっているか、などを確認してみると良いと思います。
    の間に書いてないとちゃんと置き換わってないかもです。

    こんな感じでもダメだったら、、ちょっと何んとも言えないですね^^;
    駄目だったらすみません。。

  11. かんちゃん より:

    おーとえすさんこんにちは。

    なんとか無事にとってくることが出来ました。

    親切、丁寧な回答ありがとうございます。

    結構一安心です。

    ただ、カテゴリとタグを両方指定すると、表示される記事がかぶって同じ記事が表示されてしまいます。

    このかぶりを防ぐのは無理でしょうか?

    質問ばかりですみません。

  12. Yamino より:

    はじめまして。
    スクリプトを活用させて頂いております。

    組み込んで利用させて頂いた所、IEとChromeで上手く表示がされず、IEの方は.indexOfが利用できないと言うことで、jQuery.inArrayをつかって何とか対応できました。

    Chromeの方なのですが、とくに開発ツールでエラーは無いのですが画像が一部だけ表示されたり、まったく表示されなかったりとちょっと困ってしまっています。
    もしよろしければアドバイス頂けると助かるのですが、なにか確認した方が良いところはありますでしょうか?

  13. おーとえす より:

    >かんちゃんさん

    こんにちは。表示出来た様で良かったです!

    一応被らないようにしたつもりだったのですが、もしかしたらどうしようもないかもしれません、ごめんなさい。

    ただ、もしかしたらindexOfをinArrayに変えたら大丈夫かもしれないです。関係ないかもですが^^;

    一応方法を書いておくと、ソースコードの83行目の
    list.indexOf(linkJ)

    jQuery.inArray(linkJ, list)
    と変えたらもしかしたら被らないようになるかもです。
    出来なかったらごめんなさい。

  14. おーとえす より:

    >Yaminoさん

    報告ありがとうございます!
    そんな事があるんですね、すみません。

    画像についてですが、IEでは表示されるのにChromeでは表示されない、ということでしょうか?

    分からないですが、画像の表示は全てその記事から引っ張ってきているので、ブラウザによって引っ張ってくる時の挙動が違ったり、キャッシュの扱いの違いとかで何か違いがあるのかもしれないです。もしくは、javascriptの動作の違いなど。。
    そういう面ではあまり安定しない挙動になってしまっているかもです。
    簡単な変更では改善する方法はちょっと見つからないです。
    すみません。。

    もし、カテゴリページで記事毎に画像を表示していて、それを関連記事の画像として使うのであれば、画像を取ってくる場所をカテゴリページなどからにする様にソースコードを変更すれば一応安定するかとは思いますが、、かなり大変な変更になるかと思います。。

    良い方法が無くて申し訳ないです。

  15. かんちゃん より:

    オートエスこんにちは。

    inArrayでもダメでした。

    丁寧、親切にに回答していただき、ありがとうございました。

  16. おーとえす より:

    >かんちゃんさん

    そうでしたか。。
    申し訳ないです。^^;

    諦めず色々聞いて下さり、こちらこそありがとうございました。

  17. ひいろん より:

    はじめまして。
    面白そうなスクリプトでしたので、当ブログにも導入したく
    ダウンロードさせていただき、無事表示させる事は出来ましたが…

    文字化けしてしまってます。
    ブログの文字エンコードがECU-JPなのが原因なのでしょうけど
    対処法が良くわかりません(^^;

    もしもよろしければ、対処法を教えていただければ…
    と思いコメントさせていただきました。

    ちなみに、Serene Bachというブログ構築ツールを使用しております。

    • おーとえす より:

      >ひいろんさん

      はじめまして。
      ありがとうございます!

      そうですね、、もしかしたらscriptタグの中で charset=”ECU-JP” って指定したら解決するかもしれません。

      もしそれで駄目なら、おそらくjavascriptの文字コードをECUに変更しないといけないんだと思います。
      メモ帳では無理なのですが、文字コードを変更するテキストエディタやプログラムは無料でも沢山ありますし、
      ひいろんさんのパソコンに既に入っているテキストエディタとかでも出来る場合もあると思うので、
      文字コードの変換方法について調べて、showImageLinks.jsの文字コードをECU-JPに変更して、
      それをアップロードして使ってみて下さい。

      ちょっと面倒で申し訳ないです。

      それでも駄目だったら、、申し訳ないですが懲りずにまたコメントで聞いて下さい^^;

  18. ひいろん より:

    早いお返事ありがとうございます。

    早速charset=”ECU-JP”と文字コード変更してみましたが…
    無理みたいです。

    ちなみに文字化けはFireFoxでのみ発生するみたいで、ChromeやSafaliだと文字は大丈夫ですが画像が表示されないみたいです(^^;

    そんなこんなで色々いじってたらFireFoxでも画像が表示されなくなってしまいました。

    一応、ブログ記事のリンク貼っておきます。
    http://hiiron.sunnyday.jp/sb/log/eid2031.html
    記事の下部にある【関連記事(テスト表示中)】ってのが問題の部分です。。

    お手数かけますが時間のある時にでも見てみてください。

    • おーとえす より:

      >ひいろんさん
      いえ、まだちゃんと表示出来ていない様で申し訳ないです^^;
      というか、charset=”ECU-JP”って言いましたが、間違ってました。
      charset=”utf-8″で良い気がします。

      確認してみましたが、まだちょっと分からないですね。
      土日の時間ある時に再度確認してみますね。

      とりあえずutf-8って書くだけで上手くいくことを願っていますw

  19. ひいろん より:

    >おーとえすさん
    とりあえず、スクリプトをデフォルトのものに戻して
    charset=”utf-8″
    に変更しておきました。

    画像が表示されない件についてですが、
    beginText:
    への記載が誤っていた為に起こったようで
    こちらのミスでした(^^;

    文字化けについては相変わらずなんで、とりあえず放置してあります。

    そんな状態ですが、よろしくお願いします。

  20. ひいろん より:

    >おーとえすさん

    何度も失礼します(^^;

    【Ajaxの文字化け】ってので検索してみた対策を施したところ…
    なんとか文字化けを解決する事ができました(^^

    とりあえず無事に動作してる感じなんで、これから記事の絞り込み(?)作業にとりかかりたいと思います。

    色々とお騒がせしましたm(__)m

    • おーとえす より:

      >ひいろんさん

      無事どうにかなった様で良かったです!
      お役に立てず申し訳ないです^^;

      自分も今調べてみました。
      XMLHttpRequest#overrideMimeTypeを使う、などで対応されたのでしょうか?
      もしまだ見てたら何で解決したか教えてもらえると嬉しいです。

      良い感じに使ってもらえたら幸いです。
      使いにくかったらごめんなさい^^;
      今後ともよろしくお願いします!

  21. ひいろん より:

    >おーとえすさん

    自分のブログにて、このスクリプトの紹介記事を書かせていただきました。

    http://hiiron.sunnyday.jp/sb/log/eid2040.html

    記事内でも触れていますが

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

    を、スクリプトの読み込み部(?)に書き込んで対応してみました。

    色々いじってみて気付いたんですけど…

    上で話題に上がったブラウザ(ChromeやSafaliなど)によって画像が表示されない件ですが
    どうも、imgタグ内に画像サイズ表示のwidthやheightが書かれた画像は表示されないようです。

    何かの参考になれば…というか、対応していただけると幸いです(^^

  22. ひいろん より:

    >おーとえすさん

    とりあえずの解消法として…
    画像読み取り部のif文を消したら他のブラウザでも画像表示が出来ました。

    色々な応用が効く便利なスクリプトなんで、ガッツリ活用させていただいちゃってます(^^

    • おーとえす より:

      > ひいろんさん
      あれ、ほんとですか。
      minImgWidthが上手く動いてないってことですかね^^;
      ありがとうございます!
      お手数おかけしちゃって申し訳ないです。

      使ってもらえると凄く嬉しいです!
      紹介記事もしっかりしていて、ホントありがとうございます!

  23. 話題のFC2ユーザー より:

    はじめまして。

    こちらのスクリプトを利用させて頂きました。
    私はJAVAの事はまったくのド素人なので、こういったスクリプトがあればなぁ~、と思っていたところでしたので、大変ありがたいことです。

    率直に言えば、まだ物足りない感じがしますし、こちらの解説でもおっしゃっている通り、説明が分かりづらいですね(笑)
    なにしろ、最初は上手く動作せずに一度諦めたくらいですから…(笑)

    コメント欄の最初の方に同じFC2ユーザーの方からの投稿がありましたので、
    私の経験を踏まえて、私のようなド素人のためにFC2で使う場合のヒントをひとつ…。

    私と同じド素人が最初につまづくのは、『linksURL:』の取得先の指定だと思います。

    FC2でこのスクリプトを使う場合は、“関連記事にサムネイルを付ける”という発想ではなく、個別記事の下に“同じカテゴリの記事をサムネイル付きで掲載する”という感じです。

    結果的に表示される内容は同じことですが、関連記事で使うFC2独自の変数では反応しませんので、カテゴリの変数を使います。

    なので、同じカテゴリの新着順かランダム表示はスクリプトのオプション設定でできますが、FC2の関連記事の設定にある「前後の記事」の表示はできませんので、あきらめましょう。

    取得先の指定は、オプションを変数「」で括って、取得先のURLを「/blog-category-.html」とすれば上手くいきます。

    このスクリプトは、(ド素人の私が言うのも失礼ですが)まだ改良の余地はあると思います。

    が、現状でも十分使えます。特にFC2ユーザーにはもっと浸透していていいような気がします。

    なにしろ、サムネイルの付け方をググると「記事番号に合わせて画像を用意する」とか「Google API」を経由するような、手間がかかるだけで不安定なやり方ばかりがでてきて、少々うんざりします(笑)

    なにはともあれ、このスクリプトは大変重宝しています。
    ありがとうございます。

    • おーとえす より:

      >話題のFC2ユーザーさん
      諦めず再チャレンジしていただきありがとうございましたw
      そうですね、、中々説明が難しくてですね。。w

      補足説明ありがとうございます。
      一応使っていただけている様でありがたいかぎりです!
      ありがとうございます。

  24. 匿名 より:

    初めましてライブドアブログにて表示したところ
    画像のみが表示されるのですが
    タイトルがうまく表示できません・・・
    タイトルの取得方法はどのようにしたらよいのでしょうか?

    • おーとえす より:

      >匿名さん

      オプション7のlinkEleが関係する気がします。
      linkEle: ‘div’,
      の場所をそのままにしている場合は、
      linkEle: ‘H2’,
      とかにしてみてください。
      ブログの構造などにもよるので、実際のブログを拝見していないためこれで解決するか微妙ですが、
      試してみると良いと思います。

Message

メールアドレスが公開されることはありません。

  関連記事

no image
生きるのは辛く大変だ、と思いたくない

社会人になって仕事の辛さに病んでるおーとえすですw ちょっと駄文をつらつらつらつ …

no image
6秒毎に暇が潰れていく?アンテナサイト「6sec.」

ちょっと少し新しいアンテナサイトを作ってみてます。それが「6sec.」というサイ …

no image
WordPressをどうにか無料で設置して使いたい人の為の3つの方法

先日、無料ブログの大手FC2が「googleさんにインデックス削除されたんじゃ! …

no image
本気でアフィリエイトを学ぶ会2012でコグレさんのお話を聞いて考えた事

今日、本気でアフィリエイトを学ぶ会2012をユーストで見ていました。 予定があっ …

no image
部活のレギュラーなんてやりたくなかった

昨日の記事と同じでただ悩みを書きつらねるだけなので、読まないで大丈夫です。

no image
2012年のアフィリエイト報酬とかアクセス数とか2013年の目標

Dreamy pencil by julajp, on Flickr あけまして …

no image
時間は欲しくないの?〜7月のアフィリエイト成果と雑談〜

世の中の人たちは、時間が欲しいとは思わないのか。 週5で働き続けることに嫌悪感は …

no image
専業アフィリエイターという選択肢

社会人になって始めての夏休みが終わる。 短い。本当に短い。 ちょっと、色々な思い …

no image
Kauli(カウリ)は結局どうなんだろ

ファンブログハックでは、Kauli(カウリ)の報酬情報をkiriyaさんと言う方 …

no image
Amazonアソシエイトの画像を大きくしたり加工できるサービス

Amazonアソシエイトを始めてすぐの頃は、公式サイトで作成できるアフィリエイト …