以下ブログのカスタマイズを施しています。

http://www.foxism.jp/entry/2017/06/07/184608
(アイキャッチ画像を記事背景にするカスタマイズ)

そこで質問なのですが、記事中のアイキャッチ画像を見えなくすることは可能でしょうか。
もしくは記事先頭の画像を見えなくする事でも構いません。

cssで
>|css|
.entry-content img:nth-child(1) {
display:none;
}
<||
と記載したのですが、記事中の全ての画像が消えてしまい困っています。
ご回答願います。

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2017/09/08 17:12:29
  • 終了:2017/09/08 23:25:39

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4679ベストアンサー獲得回数19932017/09/08 18:14:12

ポイント100pt

導入したカスタマイズの内容を書き換えてみました。

  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 titlebg = document.getElementsByClassName('entry-header');
titlebg[0].style.backgroundImage = 'url(' + productImg() + ')';

末尾の↑の部分を、以下のように書き換えてください。

(function() {
    const d_ = document;
    let og_img = d_.querySelector('meta[property="og:image"]');
    if (og_img && og_img.content) {
        let h = d_.querySelector(".entry-header");
        h.style.backgroundImage = "url(" + og_img.content + ")";
        let img = d_.querySelector('img[src="' + og_img.content + '"]');
        if (img) {
            img.style.display = "none";
        }
    }
})();

タイトルの背景画像を設定しているところは、書き方が違うだけで同じ処理をしています。
その後、IMG タグで src 属性が画像の URL に一致するものがあれば、見えないようにしました。

他5件のコメントを見る
id:nuruta

はい。
メインの方ではフッタにjavascriptを集めています。
今回サブで使用する事を想定しており、こちらの説明不足でした。
お手数おかけいたしました。

お陰様で想定の仕上がりとなりました。ありがとうございました。

2017/09/08 23:25:16
id:a-kuma3

今回サブで使用する事を想定しており、こちらの説明不足でした。

いえ、参考元のスクリプトにひっぱられてしまったぼくも良くない。
要素をいじるスクリプトは、DOMContentLoaded に仕込むべきでした。

2017/09/08 23:27:41

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

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

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

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

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