人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

「続きを読む」の背景画像に当該記事のアイキャッチ画像を設定したいと思っております。
アイキャッチ画像は、記事個別ページにあり、トップページには表示されておりません。

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

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

●質問者: ぬる太
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から
$(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 + ")'});
});
});

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


1 ● a-kuma3
●200ポイント ベストアンサー

こんな感じ。

$(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 で取得して、文字列で切り出しても同じことができます。


ぬる太さんのコメント
ありがとうございました。 完璧です。 理想通りの動作です!!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ