comments trackbacks you may also like

alt属性がないimg要素にJavaScriptで「alt=」を自動挿入する方法

2019年11月04日
#javascript #JS #alt属性 #alt属性を自動挿入する方法 #alt属性をimg要素に自動挿入するJS #alt属性自動挿入 #img_alt_js #FC2ブログ #ブログカスタマイズ #ウェブデザイン

javascript


こんにちは。FC2ブログゆうらりハッピースマイル』の管理人Mです。


先日の記事で、Google Search Consoleグーグルサーチコンソール)からガバレッジエラーページを大量に指摘され、困っていることを書きました。


Google Chrome「混在コンテンツブロック強化」の影響か?要対策だな…

FC2ブログ『ゆうらりハッピースマイル』の管理人Mです。ここ最近、ブログ更新が思うように進みません。体調が悪いことも理由のひとつではあるのですが、それ以外にも厄介な問題で頭を悩ませているところです。実は、Google Search Console (グーグルサーチコンソール)の検索パフォーマンスが急速に下がっておりまして…。このブログに対するガバレッジで、毎日もの凄いページ数がエラーのあるページとして警告されてしまっている...


僕の場合、そのほとんどは、記事を書く際に挿入した画像が原因なんです。画像のimgタグになぜかalt属性の抜けているものが無数に存在しておりまして…。


理由としては、FC2ブログを書くのにスマホアプリだけ使って更新していた時期があったから。アプリで画像をアップロードするとalt属性が入らないんですね。その当時はそんなことを気にせずブログをやってましたから(汗)


おかげで、エラーの指摘されたウェブページを修正する日々。しかし、毎日のようにエラーページが増え続けるばかりで、僕の能力ではまったく追いつきません(~_~;)


とりあえず、修正を急かされずに応急処置を施す手段はないものか?


そこで思いついたのが、alt属性がないimg要素にJavaScriptで「alt=」を自動挿入する方法でした。

alt属性がなかったらimg要素に「alt=」を自動挿入するJavaScript

僕は JavaScript の知識が詳しくないので、とりあえずネットでくまなく調べてみることにしたんです。しかし、ウェブ検索して行き当たったのはどれも WordPress のものばかり。あとは、 jQuery を導入しておこなう方法がわずかに存在するだけでした。


しかし、応急処置として alt属性を入れるだけのためにわざわざ jQuery を使うなんてどうなの?と感じた僕は、いつも FC2ブログテンプレートでお世話になる Akiraさんに質問してみました。


すると、 Akiraさんはいつものように親切な対応をして下さり、ネイティブ JavaScript記述例まで教えていただきました(^^)


困っていたので、本当に感謝の言葉も見つかりません。


そして、教えてもらったネイティブ JS は以下の通りです。


<script>for(var d=document.getElementsByTagName("img"),i=0;i<d.length;i++)d[i].hasAttribute("alt")||d[i].setAttribute("alt","");</script>

Google Search Console から続いていたガバレッジエラーの通知が止まった

JS を記述したら、あれほどひっきりなしに続いていた Google Search Console からのエラー通知が止まった( ̄O ̄;)


一時的なのかも分かりませんが、とりあえずおまじない的な JS を記述したおかげで精神的な平安を得ることが出来ました(^^)


これで、あとは自分のペースでゆっくりと修正作業が進められそうです♪

注意点:真似される場合はすべて自己責任で

今回、僕がわざわざ JavaScript を使って alt属性を自動挿入したのは、このブログの記事数があまりにも多いから。


したがって、この方法は他のブロガーさんにおすすめすることが出来ません。基本はやっぱり手作業で修正するのが一番なんですね。 JS を使えばその分だけページ読み込み速度にも悪影響が及びますから…。


もしも真似なさる場合は、動作確認的な問題も含め、すべて自己責任でお願いします。何か質問されても、僕のレベルではお答えする知識もありませんし(^_^;)

\Thanks/

【ランキングに挑戦中】

いつも応援クリック↓
ありがとうございます

にほんブログ村

関連記事
M
この記事を書いた人: M
ブロガー/FC2公式おすすめブログ認定/企業家/投資家/Fashion研究家/不動産コンサルタント/会社経営/将棋六段/おうちごはん男子部/料理を悪戦苦闘修行中/ヘッドスパとスイーツをこよなく愛する46歳/人生なんて気持ち次第‼︎きっと何くるないさ〜(´ー`)
FC2ブログオフィシャルおすすめブログ認定バナー日本ブログ村 プロフィール
iconiconiconicon

この記事が気に入ったら
いいねとシェアしよう!

data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
未分類 (0)
シン・胃がん闘病記 (44)
┣  AVANT:癌の余命宣告~共存 (31)
┗  セントラルドグマ:父親の胃癌 (13)
胃がん闘病記録まとめ (85)
┣  ステージ3B-多発性高度リンパ節転移胃癌 (57)
┗  胃がん再発「転移性肝がん」で余命宣告 (27)
胃がん-Stomach_cancer (5949)
┣  胃がんブログ (285)
┣  よりぬき胃がんブログ (16)
┣  胃がん闘病記-日記 (5586)
┣  酒場放浪記 (10)
┣  胃がん手術後の食事記録 (6)
┣  胃切除後の料理など (36)
┗  がん治療のクラウドファンディング (10)
がんのこと-ガン情報全般-cancer (551)
┣  がんブログ (319)
┗  がんニュース (232)
胃がん障害年金ブログ (71)
┣  障害年金-準備編 (23)
┣  障害年金-審査から年金受給まで (12)
┣  障害年金-審査請求-不服申立 (26)
┗  障害年金-再審査請求 (10)
Amazon (145)
┣  Amazonセール (2)
┗  Kindleセール (142)
おもしろグッズ (11)
今日のエッセイ (133)
ニュース-芸能-話題 (819)
┗  転職-キャリアアップ (21)
占い-心理テスト (6)
恋愛-人間関係 (30)
終活ブログ (12)
グルメ (110)
┣  低糖質レシピ (30)
┗  お酒の飲み方 (2)
胃切除後の食事レシピ (672)
┣  ご飯-おかゆ-和食 (174)
┣  おかず (140)
┣  味噌汁-スープ (75)
┣  カレー関係 (66)
┣  パン-洋食 (63)
┣  麺類 (112)
┗  その他-簡単レシピなど (39)
ブログ (251)
┣  FC2ブログ-便利ワザ-アイテム-HTML-SEO対策など (187)
┣  FC2ブログ日記-カスタマイズの所感など (17)
┣  GoogleAdsense-アドセンス (8)
┣  趣味や将棋のこと (31)
┗  ファッション (8)
iPhoneの使い方-アプリなど (34)
司法書士 (26)
┣  仕事-実務や登記のこと (1)
┗  事件ファイル (25)
COLLECTION (28)
┣  家電 (11)
┣  ホーム&キッチン (5)
┣  ビューティー&ヘルスケア (5)
┣  QOL改善&ヘルスケア (2)
┗  お酒 (5)