人気ブログランキングのバナーでカスタムHTMLに表示されるビックリマーク「!」を消したい

投稿日:2018年4月13日 更新日:

An alt attribute must be present on <img>elements.とは

そらよりブログは2018年4月現在WordPressテーマWING(AFFINGER5版)を使用しています。そして各投稿記事の下に「人気ブログランキング」のバナーが表示されるように設定しています。

alt04

その設定の際、気になるアラートが表示されたので解決法をシェアします。

 

アラートが出るところ

アラートが表示される操作手順はこうです。

ダッシュボード「外観」>「ウィジェット」画面で表示される「投稿記事の下に一括表示」に「カスタムHTML」ウィジェットを設置します。

alt03

 

「カスタムHTML」ウィジェットに「人気ブログランキング」の「マイページ」>「リンクバナー・URL」で取得したタグを貼ります。

alt01

[1]するとこのようなビックリ(エクスクラメーション)マーク「!」が表示されるのです。

マークをクリックすると[2]「An alt attribute must be present on <img>elements.」という文言が現れます。意訳すると

エレメントにはalt属性が必要です

となります。どんな意味なのでしょう。

 

画像にはtittle属性とalt属性が

<img>エレメントとは画像のことです。画像をブログに貼り付ける際には一般にtittle属性とalt属性を付与するとよいとされています。Googleが古くから推奨している基本的な設定です。それぞれには以下のような役割があります。

tittle属性:画像の名称
alt属性:画像参照ができないときに画像の代わりに表示される名称(文言)

たとえば前項のキャプチャ画像をもういちどご覧ください。

[3]tittle="人気ブログランキング"とあります。これはつまり画像のタイトルが「人気ブログランキング」であることを定めています。

しかしこのタグには、もしも画像参照ができなくなったとき表示すべき名称のalt属性がどこにもありません。そのため画面には何も表示されなくなります。Googleはこうした状態をよしとしていません。

そのためビックリマーク「!」が表示されるのですね。

じつはこのまま「保存」してもバナーの表示には問題が発生しません。しかしアラートがついたままというのも気持ちがわるい。そこでalt属性をタグに挿入してあげるというのが、僕のおススメする解決法です。

 

コピペでalt属性を付与

alt02

1.タグに設定されているtittle="人気ブログランキング"をコピーします。
2.その記述のすぐ後に半角スペースをとりペーストします。
3.tittleの文字をaltに変えます。

これだけでビックリマーク「!」が消せます。Googleが推奨するタグとなり、ページの評価を下げる心配もなくなりました。

もしも気になっている方がいらっしゃったら、ぜひ見直してみてください。

 

なおこれはすべての画像に該当することです。

φ(.. )メモメモ

WordPressのダッシュボードでメディアを追加するときは
「タイトル」をコピーし「代替テキスト」にペースト!
「タイトル」はtittle属性、「代替テキスト」はalt属性です。

 

ピックアップ記事(一部広告)


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング

人気の記事

gretel 1

  NHK Eテレの「グレーテルのかまど」(毎週月曜 午後10時放送)をご存じですか。瀬戸康史扮するヘンゼルが、しゃべる「魔法のかまど」(声:キムラ緑子)にさまざまなスイーツの作り方を教えて ...

パーティ開け11 2

  ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べるとき、普通に開けたら、開封口の向きが気になって、ちょっと不便ですよね。横から手を入れるのも汚れて面倒。 つい ...

Twitterスパムアイキャッチ 3

  【1】Twitterの障害をチェック 検索できない、ツイートできない、プロフィールを編集できないなど、なんらかの不具合を感じたら、まずTwitterに障害が発生していないか、チェックして ...

photo_gallery10 4

  スマホのカメラが優秀で、いろいろ撮影しては外部ストレージのSDカードに保存しています。内部に保存したらメモリーがもったいないですからね。 また、たとえばこのブログ用の写真などはパソコンに ...

ipodアイキャッチ 5

2016年10月6日更新 iPodが同期できないとお悩みの方へ。WindowsのiTunesでVer.12.5.1.21を確認したところ、とっても簡単になっていたのでその方法をシェアします。 従来のタ ...

kensaku05 6

  とにかくGoogleが好きで、少しぐらいなら私の秘密を打ち明けてもよくってよ、と思ってるぐらいですから、当然検索エンジンも「既定」にGoogleを設定しております。しかし、これが突然Ya ...

掃除機ヘッド掃除アイコン 7

  今年も大掃除のシーズンがやってきました。お掃除道具が大活躍の季節ですね。でも、ちょっと待ってください。あなたのお家の掃除機、しっかり働ける準備はできていますか。 もしも吸い込み口のあるヘ ...

無線LAN04-2 8

  2階建てや3階建ての木造住宅で無線LANを使っている方。電波が途切れがちでいらいらしませんか。そらよりもじつはつい最近まで気がおかしくなりそうなほど頭にきていました。いや、それは大げさだ ...

EGT260DX05 9

  まずお断りしておきます。この草刈機にまったく罪はございません。すべてこのドシロートが誤った使い方をした結果、自ら不具合を招いただけなのであります。 結論から先に申し上げておきましょう。草 ...

sheet13 10

  フローリング用の定番お掃除道具といえばクイックルワイパー(c)ですよね。一時期、格安類似品を使っていましたが、取り回しが悪かったり、スティックが折れたり、不具合ばかりですぐ戻ったことがあ ...

hub02 11

  ネットワーク接続がすぐ途切れてしまうわが家の無線LANの不具合については、こちらの記事 2階3階建て木造住宅の無線LANルーター親機子機は「垂直配置」で間違いなし! で、すでに解決済のは ...

ikea_driver02 12

  2017年2月6日追記 「通りすがりの者」さんから次のご指摘をちょうだいしました。 イケアの家具に使われているプラスねじは「ポジドライブ」というイギリスの規格なので、日本のJIS規格のプ ...

パスワード作成 13

  パスワードがいくつもあって管理できない、と昔から言われ続けていますが、いっこうに改善される気配がありません。 でもパスワードを使う場面はますます増えています。 もしもご自分のパスワードの ...

pdfedit 14

無料で配布されているPDFビューア「Acrobat Reader(旧Adobe Reader)」はPDF文書の表示、検索、印刷、テキストやフォームの入力、注釈機能の使用が可能です。 しかし画像を挿入・ ...

-AFFINGER, WordPress, セレクトワード, モバイル&PC
-

Copy Protected by Chetan's WP-Copyprotect.

Copyright© そらより , 2018 All Rights Reserved.