「続きを読む」の背景画像に当該記事のアイキャッチ画像を設定したいと思っております。

アイキャッチ画像は、記事個別ページにあり、トップページには表示されておりません。

スクリプトで
記事ページにアクセス⇒メタタグのog:imageを取得⇒取得した画像を背景に設定
という方法なのかなと考えているのですが、記事ページにアクセスの段階で躓いております。

技術的に可能なのかどうかも僕の拙い知識では分からず、途方に暮れております。
もし、可能なようでしたらヒントで構いませんので教えて頂けると助かります。

回答の条件
  • 1人1回まで
  • 13歳以上
  • 登録:2017/03/17 10:06:36
  • 終了:2017/03/17 17:04:05
id:nuruta
$(function(){
  function productImg() {
    var pi = document.getElementsByTagName('meta');
    for(i=0;i<pi.length;i++){
      if(pi[i].getAttribute("property")=="og:image"){
        return pi[i].getAttribute("content");
      }
    }
    return "";
  }
	var topEntries = $(".entry-inner");
	var presentCategory2 = "";

	topEntries.each(function(){
		var archiveEntry = $(this);

		var esm = archiveEntry.find(".entry-see-more");
		pi=esm.load(esm.attr("href"),productImg());
	    
		esm.css({backgroundImage: 'url(" + pi + ")'});
	});
});

拙いですが、途中までのスクリプトを載せておきます。

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4557ベストアンサー獲得回数19032017/03/17 13:21:07

ポイント200pt

こんな感じ。

$(function() {
    $(".entry-see-more").each(function() {
        var see_more = this;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', see_more.href, true);
        xhr.onload = function(e) {
            if (e.target.status <= 200) {
                var d_ = e.target.response;
                var eye_catch = $('meta[property="og:image"]', d_)[0].content;

                // og:image の content が取れてるのが分かるはず
                console.log(eye_catch);

                // サイズの調整とか何とかはあるだろうけれども...
                see_more.style.backgroundImage = 'url(' + eye_catch + ')';
            }
        };
        xhr.responseType = 'document';
        xhr.send(null);

    });
});

jQuery の $.ajax じゃなくて XMLHttpRequest を使っているのは、取得した結果を文字列じゃなくて DOM で欲しかったから。
$.ajax で取得して、文字列で切り出しても同じことができます。

id:nuruta

ありがとうございました。
完璧です。
理想通りの動作です!!

2017/03/17 17:07:01

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4557ベストアンサー獲得回数19032017/03/17 13:21:07ここでベストアンサー

ポイント200pt

こんな感じ。

$(function() {
    $(".entry-see-more").each(function() {
        var see_more = this;
        var xhr = new XMLHttpRequest();
        xhr.open('GET', see_more.href, true);
        xhr.onload = function(e) {
            if (e.target.status <= 200) {
                var d_ = e.target.response;
                var eye_catch = $('meta[property="og:image"]', d_)[0].content;

                // og:image の content が取れてるのが分かるはず
                console.log(eye_catch);

                // サイズの調整とか何とかはあるだろうけれども...
                see_more.style.backgroundImage = 'url(' + eye_catch + ')';
            }
        };
        xhr.responseType = 'document';
        xhr.send(null);

    });
});

jQuery の $.ajax じゃなくて XMLHttpRequest を使っているのは、取得した結果を文字列じゃなくて DOM で欲しかったから。
$.ajax で取得して、文字列で切り出しても同じことができます。

id:nuruta

ありがとうございました。
完璧です。
理想通りの動作です!!

2017/03/17 17:07:01

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません