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

以下ブログのカスタマイズを施しています。
http://www.foxism.jp/entry/2017/06/07/184608
(アイキャッチ画像を記事背景にするカスタマイズ)

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

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

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

▽最新の回答へ

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

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

 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 に一致するものがあれば、見えないようにしました。


ぬる太さんのコメント
a-kuma3さん いつもありがとうございます。 頂いたソースに書き換えてみましたが、画像が消えてくれません。 捕捉で画像を添付いたします。

ぬる太さんのコメント
補足でした。誤字スミマセン。 画像の添付出来ませんでした。 重ね重ね失礼いたしました。

a-kuma3さんのコメント
スクリプトが書き換わっていないようですけれど、元に戻しました?

ぬる太さんのコメント
すみません。更新してませんでした。 コチラのブログで更新しました。 http://nuruta2.hatenablog.com/

a-kuma3さんのコメント
メインの方に仕込むのを想定してました。そっちはフッタにカスタマイズを入れてますよね。 サブのように記事上に仕込むのであれば、以下のようにしてください。 >|javascript| document.addEventListener("DOMContentLoaded", 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"; } } }); ||< ちなみに、参考にしたという はてなブログでは「記事上に仕込め」とありますが、間違ってます。

ぬる太さんのコメント
はい。 メインの方ではフッタにjavascriptを集めています。 今回サブで使用する事を想定しており、こちらの説明不足でした。 お手数おかけいたしました。 お陰様で想定の仕上がりとなりました。ありがとうございました。

a-kuma3さんのコメント
>> 今回サブで使用する事を想定しており、こちらの説明不足でした。 << いえ、参考元のスクリプトにひっぱられてしまったぼくも良くない。 要素をいじるスクリプトは、DOMContentLoaded に仕込むべきでした。
関連質問

●質問をもっと探す●



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