ご存知の通りFC2ブログのサムネイルの一部はalt属性が付かない という長く続いている問題があります。この対処について。
はじめに
毎回前置きが長いので今回も先に謝っておこうかな ^^;
前置きを理解しないと対策を「やるかやらないか」も決められないと思うので必要なんですよぅ (∵`)
本記事内容は関連記事リストにサムネイル画像を 表示させる 方のみ対象です。
alt抜けの対策をしたい理由は大きく2つあるのかな、と思います。
- Google対策(SEO)
- バリデート対策
①については例えばsearch consoleで指摘をされる、検索やインデックスに問題が生じる可能性、ということでSEO的な対策です。
今回は主にこちら、②の場合は valid (正確なhtml)として認められない点への対策、ということになります。
validとして認められない、というのは結局SEOに結びつくこともありますけれども、今回の 関連記事リスト の場合はそんなに深く考える必要もないというか、関連記事の表示自体はメインのコンテンツではなく副情報なのであって、私の立場からこんなこと言っちゃいけないんでしょうが、目くじら立てるほどのこともない、と個人的には思っています (∵`)
「htmlを綺麗にしたいんだ」ということそのものはとっても大事なことです。ただ、一般ブロガーさんでhtmlを完璧に使いこなす、というのは難しいと思うんですね。そして私もバリデート(validate, htmlの正確性を検査すること)をすすめていますが、何度も繰り返して申し訳ないけれどもその理由というのは「htmlは正確に記すべき！」「htmlが正しくなければ悪！」とかそんなことを言っているのではない。
一般ユーザーさんのブログに視覚的問題が生じている場合、その多くは html構文のエラー が原因です。html構文エラーは視覚に影響するものとそうでないものとがありますが、仮に視覚に影響が出た場合ですよね。例えばメインの横にあるはずのカラムが下になってしまう(カラム落ち)だとか、リンクの範囲がおかしい、だとか。
そういう事態に陥ったときにバリデータ(validator, 検証ツール)にかけて、仮にエラーが200とか300とかアホほど出てきたとしたら、その中から問題の根源になっているクリティカルなものを一体どうやって探すの？ということです。私がバリデートをすすめるのはそこです。エラーが少なければ少ないほど原因を探すのは楽になります。「一番良いのはエラーが無いこと」なんですが、FC2ブログの仕様上避けられないエラーというのがあり、今回の「関連記事リストのサムネイルにalt属性が無い」というのもそのひとつ。
画像(img要素)にalt属性が無いとエラーカウントなので、5件表示なら5つのエラー、10件表示なら10のエラー、となってしまいますね。そうは言っても「関連記事サムネイルalt無し」が視覚に影響を及びすような、ブログのレイアウトを大きく崩してしまうようなものか、と言えば そうではない んですよね。そして先にお伝えしたようにこれはメインでなくサブ情報です。
これらを踏まえ、私の個人的な考えをお伝えすると FC2による改善を待つ というのが一番良いような気がします(笑)
長く望まれてはいてもなかなか修正されない問題で、一体いつやってくれるのやらという感じですけれども、対策されると信じて待つ。これが第一案(笑)
待つよ！という方は、バリデートの邪魔になる場合は以下の対処を。
Message Filtering をクリックすると除外対象の選択項目が出てきます。その中の 〝An img element must have an alt attribute〜〟のチェックを 外します。ただしこの方法を取る場合は 記事内の画像のaltチェックもできなくなります ので注意。
さて、「FC2の改善なんて待ってられねーべ (;`ｰ´)o」な方は html・CSSの追加と個人設定変更 という作業が待っていますよ (ノﾟｪﾟ)
バリデート ブックマークレット
検証ページへ直行できます。以下のブックマークレットをブラウザのブックマークバーに登録(ドラッグ&ドロップ でできます)したら、検証したいページを開いた状態でブックマークレットをクリックします。
まずは自分のブログの状態を知るところから。一度検証してみましょう。エラー多くて驚く人も少なくないかもしれない (∵`)
20超えてたらもう「これはマズいのでは…」と思った方が良いと思います ^^;
SEO対策としてのalt付加
先にバリデートではなく対Googleのためのalt付加を行いたい、という方へはJSでの処理が可能です。バリデートの場合は無理。何故かと言うと、Googleのクローラーは scroll関連以外のほとんどのJSを実行する アルゴリズムになっていますので、後からJSでaltをくっつけてもちゃんとそれを読んでくれます。
一方バリデートの方は raw html (生のhtml) で検証します。つまりJSなどは実行しませんので、後からくっつけても無効。
search consoleからのお叱りなどでお困りの方は以下のscript要素をテンプレートの </body> 直前に貼り付けてください。関連記事リストだけでなく全てのimg要素のalt属性をチェックし、無ければ値が空のalt属性を追加します。
<script>for(var d=document.getElementsByTagName("img"),i=0;i<d.length;i++)d[i].hasAttribute("alt")||d[i].setAttribute("alt","");</script>値は空(空白)で構いません。現在のHTML living standardでは「特に重要でない場合はaltの値を入れなくても良い」というルールになっています。値に「画像」とか入れるよりは空の方が良いと思います。
バリデート対策の場合は効力がありませんので次の章に進みます。
関連記事リスト バリデート対策としてのalt付加
「テンプレートで自動的にやってくれよ！」と感じる方もいらっしゃると思いますので、先に説明をします。関連記事リストというのは 個人設定 が用意されています。主に「表示位置」です。
- 個別ページの記事下
- 一覧ページの記事下
- 個別・一覧ページの記事下
- テンプレート変数のみ
- 上記全て
の5種あります。④を太字にしました。この設定の場合はテンプレート作者の意図通りの表示になるので、alt抜けを起こさない内容で表示できます。けれどもテンプレート作者がテンプレートのhtmlに関連記事リストを入れても、一般ユーザーさんの個人設定の大抵は①か②で、「テンプレートに関連記事リストのhtmlが含まれている」と考える人は稀なんですね。そして使われない場合は(つまり「テンプレート変数のみ」を選んでいない場合は)htmlもCSSも無駄になってしまいます。
そういった事情で私の場合はブログ内限定配布テンプレート以外は関連記事リストのhtmlは記載していません。ブログ内限定配布の場合はDLする際に必ずDL+説明ページを訪れるので注意点として伝えられるんですが、一般共有の場合はそういうわけにはいかないので (∵`)
* 上記文章はコメント欄で行った自身の返信のほぼコピペです。横着ですみません。
で、結局何をするかというと、「テンプレート変数のみ」の設定をopt in(有効化, ON)にして、htmlとCSSを追加する、という流れになります。htmlをテンプレートに追記する際にaltを書き足せば良いわけです。
テンプレートに直書きする内容は デフォルトのhtml, CSSとほぼ同一のもの を推奨。でないと、私のテンプレートの場合しかわからないので「弊テンプレートの場合は」と限定しますが、通常はデフォルト内容、つまりFC2ブログ運営が用意している内容に対してスタイル(CSS)を上書きしている、という形です。なので土台が変更されてしまうとCSSの追加のみならず、テンプレートに予め記されている上書き用CSSの修正まで必要になってしまいます。
せっかくテンプレートhtmlへの追加という形を取るので、完全に自由な内容でデフォルトよりもっと効率的な内容に変更もできるんですが、それやっちゃうとパターンが超大になるのでここでは避けます。自力でできる方は自由にhtml, CSSを変更してください。そもそもそれができる方はこの記事を読む必要もないのだが (´・ω・｀)
関連記事リスト HTML
閲覧中記事をリストに含めない場合
<!--relate_list_area-->
<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list--><!--relate_entry_other-->
<li class="relate_li">
<span class="relate_entry_thumbnail">
<a href="<%topentry_relate_url>">
<img src="<%topentry_relate_thumbnail>" width="144" height="144" alt="" loading="lazy">
</a>
</span>
<span class="relate_entry_title">
<a href="<%topentry_relate_url>" class="relate_entry_title_text"><%topentry_relate_title></a>
<span class="relate_entry_date"><%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></span>
</span>
</li>
<!--/relate_entry_other--><!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->閲覧中記事をリストに含める場合
<!--relate_list_area-->
<dl id="fc2relate_entry_thumbnail_area" class="relate_dl fc2relate_entry_thumbnail_on">
<dt class="relate_dt">関連記事</dt>
<dd class="relate_dd">
<ul class="relate_ul">
<!--relate_list-->
<!--relate_entry_now_showing-->
<li class="relate_li_nolink">
<span class="relate_entry_thumbnail">
<img src="<%topentry_relate_thumbnail>" width="144" height="144" alt="" loading="lazy">
</span>
<span class="relate_entry_title">
<span class="relate_entry_title_text"><%topentry_relate_title></span>
<span class="relate_entry_date"><%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></span>
</span>
</li>
<!--/relate_entry_now_showing-->
<!--relate_entry_other-->
<li class="relate_li">
<span class="relate_entry_thumbnail">
<a href="<%topentry_relate_url>">
<img src="<%topentry_relate_thumbnail>" width="144" height="144" alt="" loading="lazy">
</a>
</span>
<span class="relate_entry_title">
<a href="<%topentry_relate_url>" class="relate_entry_title_text"><%topentry_relate_title></a>
<span class="relate_entry_date"><%topentry_relate_year>/<%topentry_relate_month>/<%topentry_relate_day></span>
</span>
</li>
<!--/relate_entry_other-->
<!--/relate_list-->
</ul>
</dd>
</dl>
<!--/relate_list_area-->デフォルトと「ほぼ」同じ内容です。現在表示中のページをリストに含める場合は①、含めない場合は②を。
①の10行目及び②の10行目・22行目がimg要素です。デフォルトの内容に
- width, height属性 --- 原寸 140×140
- alt属性
- loading属性(値 lazy)
の3属性を追加してあります。loading属性はlazyを指定しておくと良いと思いますが、「有料会員」及び「無料会員で『画像の高速表示』有効(記事下広告表示)」の場合は自動的にpreloadが行われますので必須指定ではありません。また、指定して害になることもありませんので任意で。
①の15行目及び②の14行目・27行目は日付です。日付の区切りは / にしていますが、好みで 年 月 日 や、- などに変更を。
②の場合、現在閲覧中アイテムのデザイン分けが行われているかどうかはテンプレートによります。分けられていない場合にはリンクの有無が区別しづらい可能性がありますので①を選択された方が良いかもしれません。
記載位置
htmlの記載位置、ちょっと悩みどころですけれども、通常はテンプレートhtml内の <!--/more--> の直下でしょうかね。テンプレートのデザインによってはもっと適切な位置があるかもしれませんので、より良いと思われる位置に設置すれば良いのですが、直近(下の方)にある <!--/topentry--> よりも下に入れない という点に注意。
関連記事リスト CSS
#fc2relate_entry_thumbnail_area .relate_dl,
#fc2relate_entry_thumbnail_area .relate_dd,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul{
padding: 0;
margin: 0;
list-style: none;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li,
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_li_nolink{
list-style: none;
background-image: none;
padding: 0;
margin: 0;
display: table;
}
#fc2relate_entry_thumbnail_area .relate_entry_thumbnail {
width: 90px;
height: 90px;
padding: 4px 0;
display: table-cell;
vertical-align: middle;
}
#fc2relate_entry_thumbnail_area .relate_li .relate_entry_thumbnail a,
#fc2relate_entry_thumbnail_area .relate_li_nolink .relate_entry_thumbnail a{
display: block;
padding: 0;
margin: 0;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img {
width: 90px;
height: 90px;
margin: 0 auto !important;
vertical-align: middle;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail a {
text-decoration: none !important;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
border: 1px solid #ececec;
width: 88px;
height: 88px;
}
#fc2relate_entry_thumbnail_area .relate_entry_title {
display: table-cell;
padding-left: 1em;
vertical-align: middle;
line-height: 1.2em;
}
#fc2relate_entry_thumbnail_area .relate_entry_title .relate_entry_title_text {
display: inline-block;
max-height: 3.5em;
overflow: hidden;
}
#fc2relate_entry_thumbnail_area .relate_entry_date{
display: block;
font-size: 80%;
opacity: 0.8;
margin-top: 6px;
}
@media screen and (max-width: 479px) {
#fc2relate_entry_thumbnail_area .relate_entry_thumbnail {
width: 72px;
height: 72px;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail img {
width: 72px;
height: 72px;
}
#fc2relate_entry_thumbnail_area .relate_dd .relate_ul .relate_entry_thumbnail .relate_entry_thumbnail_noimg {
width: 70px;
height: 70px;
}
}あきらかに不要と思われる内容もあるかと思いますが、上書きの原則で再構成を行いますのであえてデフォルトのままにしておくのが吉。
記載位置
記載位置は以下の内容を遵守してください。
これも「弊テンプレートの場合は」と但書を入れまして(他の作者さんの方針が不明なため)、テンプレートスタイルシートに上書き用のスタイルが既に記されていますので、それよりも 必ず「前」(先, 上) に記載してください。でないと上書きされません。
目印は related post や 関連記事 などの文言で検索。見つからない場合は #fc2relate_entry_thumbnail_area { で検索すると出てくるはずです。ブラウザ上で作業する方は
Ctrl + F --- windows
⌘ + F --- mac
を利用すると作業が円滑です。どうしても見つけれない場合はご相談ください(弊テンプレート利用者に限ります)
個人設定変更
ログインした状態で 記事の設定 へアクセスし、以下の通り「テンプレート変数のみ」に変更します。必須の指定なので忘れずに。表示件数などはこちらの設定に倣いますので念の為確認してください。
サムネイル代替画像の指定
この設定は必須です。
サムネイル対象画像が存在しない場合に代わりとして表示される画像を指定します。こちらは個人設定です。関連記事リストについては 分岐変数が見つからない という事情が。分岐というのは「サムネイルが有る or 無い」の見分けのことです。変数があるのか、あるとしたらどんな文字列か、などが不明です。これまで色々探してはみたんですけど未だ見つからず。そもそも無いかもしれないですし。
ともかく画像が無いと href="unknown" という状態に陥って、alt抜けよりもさらにクリティカルなエラーが生じます。それをさけるために「代替画像の指定」が必須です。
ログイン状態で 設定ページ へアクセス、「サムネイル代替画像」を指定します。
修正結果
ここまで済ませて結果を見てみます。サンプルは関連記事リストの表示件数を「3」に指定していた場合。
件数が3なので3つのエラーと、デフォルトでは関連記事リストのスタイリング用CSSファイルを読み込むためのscript要素が付加されます。これに対し〝The type attribute is unnecessary for JavaScript resources. JavaScriptリソースに対するtype属性指定は不要です。〟という内容の警告が出されますが、さほど気にするべき内容ではありません。エラーでもありませんので是が非でも修正しなければいけないようなことではない。
修正を済ませるとaltを指摘するエラーもなくなり、ついでにCSSファイル読み込みJSが不要になりますので警告も無くなってすっきり。この状態を維持できれば別の箇所(主に記事)でやらかした場合にすぐに気付けますね。
まとめ
手順をまとめると
- テンプレートhtmlに関連記事リストのデフォルトhtmlを追加
- テンプレートスタイルシートに関連記事リストのデフォルトCSSを追加
- 個人設定を「テンプレート変数のみ」に変更
- 個人設定で「サムネイル代替画像」を指定
この4手順ですね。修正後の注意としては 個人設定を変更したことを忘れない こと。テンプレート自体を変えたときに、設定が「テンプレート変数のみ」になっていると通常は何も表示されなくなってしまいます。設定を変更しているのだ、という点を忘れないようにしてください。設定を戻せば表示されるようになります。あるいは今回の手順を新しいテンプレートでも行うか。
lazyload対応の弊テンプレートをご利用の方は、画像部位をlazyload用のマークアップに変更します。以下の通り(img要素部位のみ)
<img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="<%topentry_relate_thumbnail>" width="144" height="144" alt="" loading="lazy">
この内容の場合はdata-srcの取得を行いませんので、エラーにはなりませんし代替画像設定も不要ですが、画像が何も表示されませんのでさらに一工夫必要です。煩雑になるので一括して「サムネイル代替画像指定必須」としたいと思います ^^;
* 参考までに、弊ブログ限定配布テンプレートの場合は No image と表示される仕組みにしてあります。
* FC2ブログのリンク切れチェックツールを利用する方はdataURIを1px四方の透明gifあるいはpng画像に変更してください。
最後に、他にも同じくalt抜けになるものとして「最新記事リスト画像用変数」や「トップページ画像用変数」などがありますが、弊テンプレートの場合はほとんどがテンプレート側に正規のhtmlを入れてありますので、「最新記事リスト(サムネイルつき)」についてはできればプラグイン側を非表示にして頂いた方が良いと思います。また、トップページの画像についてはaltの付かない変数の利用は避けていますので問題は生じません。
みなさんが気にするべきは「プラグイン」と今回の「関連記事リスト」ぐらいですかね。そしてもちろんご自身が記事として掲載する画像のaltには気を使ってくださいね。記事内の画像はサブではなくメインですから、しっかりとaltを書く、と。例えば以下の通り。
* loading属性は任意です。
良い例 --- alt属性 値あり
<img src="画像アドレス" width="横" height="高さ" alt="窓際に座り外を眺める女性" loading="lazy">場合によっては の例 --- alt属性 値無し
<img src="画像アドレス" width="横" height="高さ" alt="" loading="lazy">悪い例 --- alt属性 値の意味が不明
<img src="画像アドレス" width="横" height="高さ" alt="12345.jpg" loading="lazy">悪い例 --- alt属性無し
<img src="画像アドレス" width="横" height="高さ" loading="lazy">
alt属性自体が無いというのはエラーです。alt属性の値無しについては、前後の文脈に関連がある画像の場合は、何を表す画像なのかの端的な説明をしっかり書いてください。前後の文脈に関わりがない、例えば話題の転換に入れるイメージ画像や絵文字や区切り線イラスト画像などの場合は特に重要性は無いので値無しで構いません。
画像をp要素にするかfigure要素にするか 画像のマークアップ についてです。
マークアップ = htmlなどによる文書構造の意味付け・定義付け
「日記を書いています」「日々の出来事を楽しく更新しています」という方は無理する必要はありません(と個人的に思う)無理したら楽しいことが楽しくなくなる (´・ω・｀)
例えば「記事内でTOC(table of content, 見出し目次)を利用している」だとか、「検索順位を意識している」といった方はhtmlタグを使いこなしているか...
vanillaice000.blog.fc2.com
また、FC2ブログでは画像のアップロード後にaltの対象になる文字列の記載が可能です(ファイル名修正 > タイトル)が、この作業をせずにツールバーを利用して画像を挿入した場合は「ファイル名 + 拡張子」がそのままaltとして書き出されます。png拡張子でファイル名が xuwuiyre の場合は alt="xuwuiyre.png" といった具合。これでは意味がわかりませんので、書くならちゃんと意味の通る文言を書く、と。
FC2ブログでは他にも運営が自動で追加する必須script要素などに警告が出たりしますが、過敏になる必要はありません。どういう意味の警告なのか、という点だけ理解しておき看過する(笑)
FC2ブログはまだまだhtml4やxhtmlといったテンプレートも残っていますので、現標準にしてしまうわけにいかないんですね。なのでこれは致し方無いこととしてスルーで良いと思います。
というわけで「関連記事リスト」修正案でございました。くれぐれも無理にやる必要はないと思いますよ (ノﾟｪﾟ)
There are no comments yet.