人気ブログランキングのバナーでカスタム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属性です。

 

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


ランクアップに応援ください
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ 人気ブログランキング
  • この記事を書いた人
  • 最新記事

sorayori

昭和半ば生まれのおじさんです。妻と娘と猫と金魚と東京・吉祥寺にひっそり暮らしています。息子夫婦に孫娘ちゃんもいます。くらしとデジタルとこころにうるおいをお届けしたいと思っています。

人気の記事

1

最近ココナッツオイルがブームとかで、我が家にも常備されるようになりました。朝食のパンやサラダだけでなく、コーヒーに溶いて飲むというようなことをしています。たおやかな甘さが口の中に広がり、南国パラダイス ...

horeizaiinhair 2

  本格的な夏がもうすぐやってきます。みなさん暑さ対策、熱中症予防はどのように工夫していますか。 うちの娘ちゃんによると、ポニーテールが結べるくらいの髪の長さがあれば、かんたんでとってもよい ...

12本体アップ 3

  いったいどれほどの方に役立てていただけるかまったく自信がございませんが、ニッチな話題が好きなそらよりは今回噴霧器のレビューを書くのであります。(2016年5月8日追記 「使用後の洗浄」に ...

hanazo 4

「花ぞ」の花は梅 東進の「全国統一中学生テストTVCM」で、先生が板書をしながら生徒に注意をうながします。 「この、花ぞの花は梅だからな」 すると一人の生徒が手を挙げ質問します。 「なぜ桜じゃなくて梅 ...

rakuchinpack01 5

  キッチン用保存容器の条件とは お料理上手の条件は段取り上手。手にヨリをかけて作ったせっかくのご馳走も冷めたり、伸びたりしては台無しです。美味しいものを美味しいうちにテーブルに並べるには、 ...

leplus01 6

  いままで900円台のイヤフォンを使っていた輩が、音がどうのこうのと申し上げるのは誠に恐縮なのですが、いやハイレゾイヤフォンの音の良さったらすごかったです。   スポンサーリンク ...

aircon_kojihikomi 7

  もう20年近く使ってきたエアコンが、この夏動かなくなりました。エアコンの買い替えはシーズンが替わる11月、それも水曜日が安いと耳に挟んだので、このたびちょい古な2016春夏モデルを購入し ...

EGT260DX01 8

50対1を守らないとどうなるか? 新規に購入した草刈機の最初の使用時に、間違って25対1の混合燃料を入れてしまいました。因果関係は不明ですが、エンジンが掛かりません。 こうした状況について推測できる範 ...

パスワード作成 9

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

pdfedit 10

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

スプレー容器 11

春夏秋冬、汗っかきさんにとって気を緩めてよい季節なんてありませんよね。朝夕と昼の温度差が激しかったりしようものなら、うっかり服装のチョイスをまちがえ、外出先で大汗をかくということしばしばです。 そんな ...

sentakki_door03 12

  歳の瀬に朝から困ったことが起きました。洗濯機のドアが開かなくなってしまったのです。 2008年に購入したPanasonicのドラム式洗濯機NA-VR1200Lという機種です。購入してから ...

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

Copy Protected by Chetan's WP-Copyprotect.

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