alt属性とtitle属性は全然違う

初心者向け PC閲覧推奨

よくある間違いシリーズ (´・ω・`)

当該記事の主旨は ブログタイトルをテキストから画像へ変更する際の注意についてです「alt と title を混同していませんか?」

alt, title 共にhtmlで使います。正しい名称は 属性
altタグ、titleタグ、ではありませんぜ旦那 (´・ω・`)

そしてこの2つ、よく混同されて間違った使い方をされることも多いです。

altとtitleは役割が違う

alt属性とは
画像を端的に説明するためのテキスト内容
何らかの理由で画像が表示されなかった際(ローディングエラーやアドレス消失 など)に表示される代替テキスト
SEOに大きく関わる
コンピュータのためのもの

主に適用されるhtmlタグ
img が最も多く他に input, area など

title属性とは
要素の補足説明をするためのもの
いわゆる「ツールチップ」
SEOに関わりは無い(賛否ありますが 私は「無い」と思います)
人間のためのもの

主に適用されるhtmlタグ
a が最も多く ほぼ全ての要素に使える(img含む)

各々マウスオーバーで確認。
これがalt ↓
butterfly
これがtitle ↓
butterfly

altの方は何も出ませんね。一方 titleの方は「ツールチップ」と呼ばれるテキスト内容が表示されます。butterfly ってやつね。画像の 可視 の補足説明をしています。

altの方はどうかと言うと、こちらもまたその「補足説明」をしていますが、人間には 不可視 何に対して説明を行っているかと言うと、コンピュータ, 検索ロボット に対してやってます。人間が見る必要はなし。そしてこの不可視の補足情報がとっても重要

検索ロボットは画像の中の文字を読み取れない

当たり前っちゃー当たり前ですが例えばこんな ↓

これは「画像」です。THE OTHER WAY ROUND って私のブログ名が書いてありますわね。でも検索ロボットはそれを読み取ることはできません。だって画像なんですからー (´・ω・`)
書いてあるじゃん!わかるじゃん!というのは私たちが人間だからです。だからこれはダメ ↓

<img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ">
これでは検索ロボットがやって来ても、一体この画像が何なのか全く理解してくれません。だからこうする ↓
<img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ" alt="The other way round">

こうしてロボットに対して明示してあげると、「ああ、The other way round ね。」とわかるわけです。

titleだってテキストなんだから同じじゃん (;`ー´)o
と思うかもしれませんが、titleとはあくまでも対人間用補足説明ですからこういうことも考えられます(マウスオーバー)

「ブログバナーです。ご自由にお持ち帰りください。」これだって説明してるわけですよ。「持ってって良いよ。」という説明を。でもそれは閲覧した方へ対してのメッセージであって、ロボットにしてみりゃんなこたーどーだっていい話し (´・ω・`)
ロボットに取って重要なのは その画像は一体なんやねん?? ってところですから、altで以てしっかりそれを伝えるわけです。

ブログ名をバナーに変更したら必ず alt属性!

よくありますよね。ブログタイトルを画像に変更したい!という方。それ自体は何も問題ありません。問題あるぱてぃーん ↓

<h1><a href="ブログアドレス"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"></a></h1>

altないぢゃん (`Д´)
「見出し」というのはどれも重要なものですが、その中でも h1 は位として最高位なわけです。それが画像になっており、その画像が一体何なのかの説明が無い。これは検索ロボットに対してとっても不親切。

じゃあこうしたらどうだ ↓

<h1><a href="ブログアドレス" title="The other way round"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"></a></h1>

いやいやアカンやん?titleは人間のためのもの。

じゃあこうだ ↓

<h1><a href="ブログアドレス" alt="The other way round"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ"></a></h1>

のんのん (-ε-)b"
alt は img に対して付加します。だって画像の説明であって アンカーを説明するわけじゃないんだから。そもそも a に alt は使えません。

こうするのがベスト ↓

<h1><a href="ブログアドレス" title="トップページへ"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ" alt="The other way round"></a></h1>

実態はこんな ↓ (h1は省いてあります)
The other way round

titleへはブログ名を記すのではなく「トップページへ」にしてあります。ブログ名は画像に書いてあるんだから二度説明する必要なし。クリックしたらトップページへ飛ぶでぇ〜、という説明の方がよほど親切(人間にとって)
(まあ、私はtitleは無くても良いと思ってますが。フツーわかるし。)
そして画像にはしっかりaltでブログ名を記載。親切(ボットにとって)
いやホント、titleとaltが共存する時は被らない方が良いと思いますよ(なんとなく、ってゆーかホントは確信を持って)

あとこれもアカン〜なぱてぃーん ↓

<h1><a href="ブログアドレス" title="トップページへ"><img src="画像アドレス" width="画像横サイズ" height="画像縦サイズ" alt="ブログバナー"></a></h1>

あるいは 「サイトロゴ」 とか 「会社ロゴ」 とか ちょっと考えすぎちゃって、「画像の説明をするんだから…? ブログ名なんだから? ブログ名をそのまま書くんでなく…? 『ロゴだぜ』って伝えれば良いんか!」
のんの〜〜〜ん (-ε-)b"
ここは直接ブログ名を記載。私なら「The other way round」って書けばOKです。The other way round がブログ名である、ってのはボットはちゃんと理解しています。それはhead情報で渡されています。なので、大見出しやで! h1やで! その見出し内容はブログ名であるところの「The other way round」やで!と伝えます。見出し「ブログロゴ」っておかしいでしょう (´・ω・`)
見出し「The other way round」が正しい。

おまけでFC2の仕様

altってみなさんあまり意識して書かれませんよね。FC2では記事を書く際に記事内に添付した画像については自動でaltが記載されます。どうやってるかと言うと、画像アドレスの末尾を拾ってます。

例)
画像アドレス(ファイル名) --- http://サーバー名/12345.jpg
この画像のalt --- 12345.jpg

ファイル名末尾が自動でaltになるわけです。ですから本気でSEOを考えるのならば、

① 画像添付を行ったら手動でaltを適切に書き換える
② 手動が無理ならあらかじめファイル名をしっかり考えておく

めんどくさいのは②だと思います(笑)
ファイル名ですから英数字と一部の記号の羅列しか使えません。日本語はご法度。altを書き換えるのならば日本語でもOK
例えば最初のバタフライのサンプル画像であれば、あらかじめファイル名を butterfly.jpg にしてアップロードしておくと自動でaltが「butterfly.jpg」になるわけですね。後ろの .jpg が余分だけどもね (´・ω・`)
しかし良くできたシステムですからここは妥協。ファイル名修正でaltを任意にできますが、画像を使い回したりストックしている(いつ使うか未定)場合には却って邪魔になる場合も。ですから記事を書く際にaltを与えるのがベストだと思います。

旧投稿画面をお使いの方はちょちょいとaltの書き換えができますので、そちらを推奨。新投稿画面の方は…  ②の方法で ^^;

Googleには「画像検索」という優れたツールがあります。正しくaltを書けばヒット率も高くなります。つまりSEO (o'ω')ノ

記事内の画像についてはalt自動付加ですが、問題はサムネイルよね (´・ω・`)
FC2サムネイルはaltが付きません alt無しってのはダメなんです。html5では「適切なものが見当たらない場合はaltは記載しなくても良い」となっていますが、alt属性が無しでOKという意味ではなく alt="" こうして空欄にしとけ、って意味です。FC2さんここ改善お願いしたい。切実に (´・ω・`)

まとめ

h1とロゴの組み合わせ、altとtitleの間違い。とってもよく見かけます。一度チェックされてはいかがでしょうか。

最後に「altでもツールチップ出るでしょ (・ε・)」という方は、クソ IEに騙されてた方です。

ノブ
2019/05/11 (Sat) 17:12

ナルホド

お勉強になります。いくつかお尋ねします。

1.早速ファイル名はファイル管理から変えてみましたが夕焼けを撮った写真は
「yuuyake」でSEO的に効果はあるのでしょうか。
2.既にアップした画像のaltはファイル管理からは変えられないのでしょうか。
3.新投稿画面の場合にアップロードする画像のaltを「夕焼け」などの日本語名に
 するにはhtmlに切り替えて書き換えれば良いのでしょうか。

htmlの基本を理解せずに美味しそうなところだけをつまみ食いして、いい思いを
しようと図々しいですが、宜しくお願いします。

vanillaice (Akira)
Akira
2019/05/11 (Sat) 17:35

To ノブさん

こんにちは ('0')/

FC2ブログのエディターの「ツールバーを利用した時」の出力内容は以下の通りです。
(スキーム等は省きます)

【元画像にリンク を指定している場合】
<a href="xxx.jpg" target="_blank"><img src="xxx.jpg" alt="xxx.jpg" width="" height=""></a>

【アルバムにリンク を指定している場合】
<a href="アルバムアドレス" target="_blank"><img src="xxx.jpg" alt="xxx.jpg" width="" height=""></a>

【リンクしない を指定している場合】
<img src="xxx.jpg" alt="xxx.jpg" width="" height="">

ファイル名+拡張子
がalt属性として自動出力されます。「alt属性を自動で」という場合にはこのシステムになりますので、ファイル名称を予め意味のあるものにしておく必要がありますね。そしてローマ字に限定されてしまいます。

例えば
<img src="xxx.jpg" alt="日本の美しい夕焼け" width="" height="">

上記にように適切な内容にしたい場合は、旧投稿画面でしたらhtmlタグが可視状態ですから手入力で書き換えてください。
新投稿画面の場合は以下の記事をご参照ください。

参考記事: アメブロの機能改善「画像の代替テキストが入力しやすくなりました」はFC2ブログでも既にできます
https://vanillaice000.blog.fc2.com/blog-entry-859.html

もう一つ方法があり、これがノブさんの希望に一番近い形かと思います。
アップロードしたファイルの右側に「ファイル名修正」というのがあります。クリックすると「タイトル」と「ファイル名」という項目が出てきますので、「タイトル」の方に「日本の美しい夕焼け」と入れて「更新」をクリック。
するとツールバーでの出力内容が

<img src="xxx.jpg" alt="日本の美しい夕焼け" width="" height="">

と、altが適切な内容になり拡張子も付きません。
といっても旧投稿画面をご利用であれば書き直しの手間の程度は同じです。ご自身の環境でやりやすい方法を選択されると良いと思います。

ヒントとしては、FC2ブログは画像の使い回しが可能です。使いたいファイルを見つけたい時にはアルバムで分類するのが最良ではありますが、上限設定が結構厳しいんですね。すぐにアルバムがいっぱいになってしまいます。
そういう場合には先程の「ファイル名変更」の機能を利用して「タイトル」を分類に使うと良いと思います。
例えば「夕焼け」「湖」「車」など。
タイトルで分類しておくとアップローダーにある検索窓にキーワードを入れると同分類の類似画像が出てきます。
そしてalt属性の書き換えについては「記事作成時・編集時」に行う、という方法ですね。
タイトルを自動出力用に用いるか分類に用いるか、ということです。

FC2ブログというのは尽く機能名称の名付けが下手くそなんです。通常「タイトル」と言われれば「title属性」のことだと思ってしまいますよね(この記事内で説明している属性です)
そして「ファイル名修正」のボタンからaltを操作できることに気付く人も少ないと思います。
もーマジで名付け!名付けデザイナーとか採用すれば良いのに(笑)

あとSEOについてはローマ字のSEO効果は低いと思います。英語(sunset)か日本語(夕焼け)とするのが最も良い形です。日本語圏であればやはり「夕焼け」が適切でしょうね。

ノブ
2019/05/12 (Sun) 14:37

To Akiraさん

詳しく解説頂きありがとうございました。
現時点で「ファイル名修正」から「ファイル名」や「タイトル」を変更しましたが、
何をどう間違えたのかサムネイルが出なくなったり、サムネイルが出ているのに記事内では
画像が出なくなったり(出なくなったのではなく、出ない様にしてしまったと思います)。
恐らく変更した事でそれぞれファイルが見つからなくなってしまった、と思います。
美味しい思いだけしようと言う浅はかな考えでしっぺ返しを受けてしまいました。
闇雲にやったので暫くは現状で放置です。

vanillaice (Akira)
Akira
2019/05/12 (Sun) 17:19

To ノブさん

こんにちは。

えー!マジですか (∵`)
消えてしまったページのURLを教えて頂けると助かります。
アップローダーの「タイトル」も新投稿画面の画像ダブルクリックで出てくる「説明」もファイル名とは結びついていないはずなんですが、もしかしたら「絶対」とは言えないものなのかもしれません。
その点を確認したいので、お時間が許すようならURLを教えてくださいね。

----- 追記
該当かなぁ、と思う記事を拝見しました。タイトルは「写真を撮りたい」です。
これは「ファイル名の修正」を行われていませんでしょうか。そして以下の記事と作業内容のすり合せも行ってください。

参考記事: 記事内の画像を変更してもサムネイルが変わらないという方へ【FC2ブログアイキャッチ仕様変更】
https://vanillaice000.blog.fc2.com/blog-entry-625.html

考えられるのは、

ファイル名を修正した(この時点で既存アイキャッチ画像のURLは消滅します)

アイキャッチ画像に指定されている画像を削除していない

これなんですが、いかがでしょうか。何故かというと、画像へのハイパーリンクURLと画像URLが合致していないので開くことができません(404 not found)
404ということはファイルが削除されたかファイル名が変更になったか、です。
アップロード後の「ファイル名」操作はしないように注意してください。サイトのアドレスと同じで一文字でも異なれば別のアドレスです。

ノブ
2019/05/12 (Sun) 23:33

To Akiraさん

再度のアドバイスありがとうございました。
ご指摘の通り「ファイル名」を変更していました。それもバラバラでした。
新規投稿画面にて「メタタグ編集」の「アイキャッチ画像」のURLと画像ダブルクリック「画像の挿入」の「URL」に齟齬がありました。
表示されない画像の有る記事について確認してみました。結果それらURLが全て同じになるように「メタタグ編集」及び「画像の挿入」で整合を取り、正常に表示されるようになりました。
この不整合は有る程度予想は出来ていたのですが、アイキャッチ(サムネイルって言わないのですね)のURLが何処に有るのかが、分からなかったです。
【FC2ブログアイキャッチ仕様変更】 で「これか!」と。いやはや、今回は面白かったです。

基本ルール通りに行なっていればこのような問題は起こらなかったはずです。ルール(htmlの基本)を知らずやるとこうなると言う事がよく分かるいい経験でした。
「いるんだよね、未だ理解もしてないのに自分勝手にやって、尻拭きをさせるやつが」です、ごめんなさい。^^;

vanillaice (Akira)
Akira
2019/05/13 (Mon) 00:38

To ノブさん

こんばんは。

やっぱり「ファイル名」の方を変えてしまったんですね。私の方でももっと注意を促すべきでした。
ファイルアップロード「後」に某かの失敗をする方が結構いらっしゃるようなので、また明日以降記事にまとめたいと思います。

ここでもFC2の名付け問題が。「メタタグ設定」じゃなんのことかわからないですよね。この機能名称ではhtmlの知識がある方でも「???」となるんです。実は。
「アイキャッチ画像」という名称もちょっと… どうかと思う ( ̄∀ ̄;)
そのあたりもまとめますね。

> 未だ理解もしてないのに自分勝手にやって〜

そんなことはないですよ。そうして覚えていくのであって、これもお勉強のうちです。
私でも痛い目に遭ったことは何度もありますし、そうやって覚えたものは忘れません(笑)

----- 追記(重要)
ファイル名変更した画像のハイパーリンク(a要素)のアドレスを忘れずに新しいファイル名に変更してくださいね。

<a href="旧ファイル名.jpg" target="_blank"><img src="新ファイル名.jpg" alt=""></a>

あるいは特にオリジナル画像表示が必要ない場合はaタグ(開始タグ及び終了タグ)を外してください。

ノブ
2019/05/14 (Tue) 20:41

To Akiraさん

ありがとうございます。
とりあえず現状、問題なさそうなので一安心です。

が、せっかくアドバイスいただいている追記(重要)内容が...
もうこの際ですから、いい格好せず恥を忍んでお伺いします。
・ハイパーリンクとは今回では「メタタグ編集」に有るURLと新規投稿時に画像ダブルクリックでのURLが一致している事、と言う解釈で宜しいでしょうか。
・現在問題なく表示出来ているようですがファイル名は上記整合が取れていれば問題なし、との理解でよいでしょうか。

もう、手間がかかるユーザーで本当に申し訳ございません。

vanillaice (Akira)
Akira
2019/05/14 (Tue) 21:16

To ノブさん

こんばんは。

「ハイパーリンク」というのはHypermedia Reference(他にも説はあります)のことで
hyper = 向こう側の
media = 情報
reference = 参照

要するに「リンク」のことです。私が言い方をちょっと変えてしまったので混乱させたようです。申し訳ない(笑)

画像のimg要素はa要素で囲われて以下のようになってますよね。

<a href="アドレス.jpg"><img src="アドレス.jpg"></a>

a要素内href属性の値であるアドレス

img要素内src属性の値であるアドレス

この2つは同一でなければいけませんよ、という意味です。ノブさんが「アルバムリンク」を選択しておらず「元画像リンク」に指定していると仮定した場合です。

----
メタタグの意味も説明しておきます。
metaタグというのは
<meta>
のことです。
<meta charset="utf-8">
など。これはページの文字コードの指定をしています。
本来は「メタタグ」ではなく「メタ要素」とするのが正しい表現です。

参考記事: 「タグを作る」という表現は超おかしいという話し
https://vanillaice000.blog.fc2.com/blog-entry-674.html

新投稿画面の「メタタグ」が何を指すかと言うと、

<meta property="og:type" content="website">
<meta property="og:url" content="ブログURL">
<meta property="og:title" content="ブログ">
<meta property="og:description" content="ブログ説明文">
<meta property="og:image" content="代表画像">

これらがいわゆる「OGP」関連のmeta要素です。その中の赤くした要素「OGP画像」のことだけを指しています。
meta要素は他にもたくさんありますけれど、FC2が「メタタグ」と言うときはOGP画像のことを指すようです。たぶん(笑)
私が「『メタタグ設定』なる名称はおかしい」と言うのはそういう意味です。

-----
ちょっと整理しますね。

トップページサムネイルとOGPサムネイルは同じ画像が対象になります。
・「本文」の一番最初に掲載した画像(エディターの絵文字は対象外)

これが通常です。ですからトップページのサムネイルとして表示される画像は、該当記事内で最初に目にする画像と同じものだ、ってことになります。

ですが私の記事のように、記事内には画像の掲載が無いのにトップページにはサムネイルが有る、という場合がありますよね。
その場合は
・「アイキャッチ画像」設定を利用してサムネイル画像を能動的に指定している

ことになります。
アイキャッチ画像の設定はもともとこのために追加された機能ではないかと思います。
記事に画像を掲載しない方でも、現在のweb一般では「サムネイル必須」とされていることが多いので(Googleの方針です)、「記事に掲載しなくてもサムネイルを指定できる機能」だと思っていれば間違いではないと思います。

で、自主的に「アイキャッチ画像」を指定しなかった場合どうなるかというと、本文の一番最初に掲載した画像が自動的にアイキャッチに指定されます。その件を書いているのが参考記事として記した「
https://vanillaice000.blog.fc2.com/blog-entry-625.html
この内容です。

で、ノブさんの「写真を撮りたい」の記事の「本文」最初の画像は
nikonF3.jpg
このファイル名の画像ですよね。
そしてトップページのサムネイル画像も
nikonF3.jpg
の画像です。つまり同一画像です。
この写真はおそらくノブさんが元のファイル名を旧ファイル名から変更したものだと思います。
変更したので自動指定されていたアイキャッチ画像への指定アドレスと食い違いが発生したのだと思います。
アイキャッチ画像の方を仮に
xxx.jpg
とします。旧アドレスという意味ですね。アイキャッチ画像に指定された画像は自主的に削除しなければそのまま残ってしまいますので、No imageになってしまったのはそれが理由です。

アイキャッチ --- 旧アドレス xxx.jpg
本文画像 --- 新アドレス nikonF3.jpg

そこでノブさんは「アイキャッチ画像」のアドレスを旧から新に書き換えているはずです。つまり現在は

アイキャッチ --- 新アドレス nikonF3.jpg
本文画像 --- 新アドレスnikonF3.jpg

こうして整合性が取れている、と。ところが一番最初に操作したエディターでの画像掲載時は以下の通りだったはずです。

<a href="xxx.jpg"><img src="xxx.jpg"></a>
それがファイル名修正により
<a href="xxx.jpg"><img src="nikonF3.jpg"></a>

a要素のhref属性の変更を忘れている、ということです。
実際の画像をクリックして確認をしてください。404 not foundのはずです。

-----
あと根本的なところなんですが、私は常々「何故みんな当たり前に画像をリンクにしているのだろう」と疑問なんです。
例えば小さめに掲載して、大きく見たい人はクリックする、というならわかるんですが、大きく表示しているものを同じ程度のサイズで表示させて何か意味があるのだろうか、と。

解像度の問題で「意味がある」とするのであればそれで良いんですが、画像をクリックする人が期待するのは「もっと大きく見やすい画像が表示される」ことなので、そのあたりを考えた上で
・リンク設定すべきかどうか
・元画像を開かせるならば単なるリンクにするのか、それとも拡大表示スクリプトを利用するのか

など方針を決めると良いと思います。
拡大スクリプトについての記事は以下の通り。

参考記事: 超軽量画像拡大スクリプトLuminousをFC2で使う方法
https://vanillaice000.blog.fc2.com/blog-entry-742.html

ノブ
2019/05/16 (Thu) 00:03

To Akiraさん これで最後にします...

a要素のhref属性と言うのもあるのですか!

記事「写真を撮りたい」では画像をChromeの右クリックにある「検証」からhtmlを編集。でhref属性をnikonF3に書き換えて画像クリックも正常に表示されるようになりました(本当に書き換えられたのか...)。
しかし記事「TEST」はアイキャッチも本文も画像は表示さていますが、画像をクリックすると404になり以下のようになっています。

<a href="https://blog-imgs-127-origin.fc2.com/y/a/m/yamnob/picnic.jpg" target="_blank"><img src="https://blog-imgs-127-origin.fc2.com/y/a/m/yamnob/tree.jpg" alt="版画木蔭" border="0" width="640" height="464"></a>

・href属性のpicnicをファイル名treeに書き換えるのですが、変わりません。そもそもhref属性の修正はどうやるのでしょうか。「写真を撮りたい」ではたまたま上手く行ったのでしょうか?
・href属性のリンク先は通常見ることができるのでしょうか。

正しく表示されないのはそれなりの理由が有る。それはよくわかりました。その構造知識と手を入れる方法が未熟です。
Akiraさんのお忙しい貴重な時間をこのような稚拙なことに費やされるのは申し訳ないです。
これからも勉強します、ありがとうございました。

vanillaice (Akira)
Akira
2019/05/16 (Thu) 01:20

To ノブさん

ノブさん、こんばんは。

これを解決しようと思うとこれまで以上にややこしいことになります。
とりあえず解決策の方を先に書きますので、その作業を行ってください。
仕組みも説明しますが大混乱必至かもしれない(笑)

-----
該当画像が表示されているうちにドラッグ&ドロップでデスクトップへ保存

ファイル名を新規でつける(アップロード済み画像と名称が被らないよう注意)

アップロード

該当ページから一旦画像を削除、新規でアップロードしたものを改めて貼り付け(この作業で修正できます)

-----
a要素内の画像アドレスとimg要素内の画像アドレスは大抵の場合は同じものです。
「大抵の」というのは「絶対ではない」という意味です。
例えばページ表示のスピード対策を行う場合

<a href="大判オリジナル画像A"><img src="縮小画像B"></a>

AとBは同じものが写っていますが、初期表示は縮小あるいは容量削減を行った画像です。
全く同じオブジェクトが写っていても別の画像ですからアドレスが違います。
Aのオリジナルの容量が仮に200KBだとします。
Bの縮小画像の容量が仮に50KBだとします。
ページがローディングされた時に読み込まれるのはBの方なので50KBで済みます。
Aのオリジナル画像は閲覧者がクリックして初めてダウンロード(保存という意味ではなく表示させるためのデータ取得)されます。ここで200KBの通信となります。
初回ローディングが軽くて済む、という意味です。

ですがほとんどの方はそこまで考えませんし、FC2ブログのエディターを利用すると同一画像のアドレスが自動記入されますので、スピード対策など何らかの理由が無い限りはa要素内画像とimg要素内画像のアドレスは全く同一です。同一でない場合は「既に表示されている画像とクリックして表示される画像が別のもの」となります。
現在ノブさんのhtmlソースはそういう形になってます。

a要素 --- picnic.jpg
img要素 --- tree.jpg

旧投稿画面を利用している場合はhtmlタグが表示されていますので、該当部位を修正してください。
新投稿画面の場合はhtmlタグは表示されませんので、html表示に切り替えるか、貼り直しを行ってください。

こういったことが起こった理由は以下の通りです。

・ファイル名修正をしてしまった --- img要素のファイル名は書き換わるが、a要素のファイル名は書き換わらないため整合性が失われてしまった

----
画像が404になる件なんですが、こちらはより複雑な事情があります。
ノブさんは「画像の高速表示」を「無効」にしているはずです。理由は「テキスト広告を消すため」ではないかと思います。
広告が消せるよ!と広報するのは簡単なんですが、この設定は「代償」があります。
代償とは先に述べた「CDNサーバーの利用が不可になる」ことです。

参考記事: FC2ブログの【アカマイ】画像表示高速化の仕組み
https://vanillaice000.blog.fc2.com/blog-entry-526.html

で、CDNを利用しない場合、アドレスの中に origin という文字列がつきます。これは「原本」であることを示しています。
このoriginつきのアドレスの扱いは非常に厄介で、正しく上書きが行われないことがあります。
記事編集画面を一旦開き、何も修正しなくて構わないのでそのまま「保存」つまり更新を行うと解消されることがあります。
ですがいずれにしろノブさんの場合はhtml修正を行う必要がありますので、今回は再アップロードと貼り直しを行ってください。

トップページはOKで個別記事は… という点については、トップページでは広告を非表示化したユーザーであってもoriginがつきません。これは何故か知りませんが、FC2はそういう仕様になってます(笑)

ともかく「上書き・ファイル名修正は絶対に行わない」と頭に叩き込んで運営してください(笑)
なにそれ、って感じだけど ^^;

vanillaice (Akira)
Akira
2019/05/19 (Sun) 15:36

To ノブさん(重要)

お気づきになると良いのですが (∵`)

今ノブさんのブログで起こっているのはこの記事に合致しています
参考記事: 【重要】FC2ブログ新投稿画面で画像のサイズ変更が容易になりました(但しまだデバッグ中のもよう)
https://vanillaice000.blog.fc2.com/blog-entry-902.html

ノブ
2019/05/19 (Sun) 20:48

To Akiraさん お世話になりました

プライベートで忙しく、せっかくコメント助言いただいたのにお礼が遅くなり失礼いたしました。
先づは不審な表示については再アップロードを致しましたし、他もメンテナンスをして行きます(余計なことしなければいいですがね)
そして今後の画像アップロードにつては「サイズ変更が...」の記事も参考にして縦サイズのauto、alt属性を意識した説明欄の入力。
不要な上書き・ファイル名修正をしない様にします。
他にも自分でわかる範囲では有りますが設定や調整を行って行きます。

知ると「なるほど〜」と興味が湧きます。でも、世の中簡単にアップロード出来れば良いだけ、の方も居ますよね。そう言った方向けに
「初心者モード」があっても良いかもな、と今回の事で感じました。(え?もう来なくて良い?そ、そんな〜)

とにかく本当にお世話になりました。ありがとうございました。

vanillaice (Akira)
Akira
2019/05/20 (Mon) 02:12

To ノブさん

こんばんは。

新投稿画面はFC2運営もユーザーも「初心者向け」という認識だと思います。
今回の問題点については一過性のはずで、修正を待つという形でしょうかね。それか機能自体無くなるか(笑)

> 世の中簡単にアップロード出来れば良いだけ、の方も居ますよね〜

そうですね。その場合はもっと自由度の低いサービスがありますので、そういうサービスを探すことになります。
FC2は「それだけで良い『わけではない』」方が集まるサービスなので、あくまで初心者の方は「新投稿画面を使っとけばオッケー」状態になるような整備ができると良いのですが。

Yahoo!ではalt属性の書き換えすらできなかったわけですから、FC2でも同じように「何もしない」を徹底すれば済む話ではあります(笑)

ittsuie
2021/10/21 (Thu) 05:54

アイキャッチ画像が原因と思われる W3Cエラー

Francesca を使用させて頂いているittsuieと申します
先回は、htmlエディター上でenterキーを押しても改行や段落が出来ない件で、結局犯人はFireFoxだったというオチでお世話になりました

Akiraさんの推奨されているW3C vadidatorでエラー修正をずっと行っていますが、最後の最後でどうしても対処出来ないので教えて頂きたいです

https://ittsuie.blog.fc2.com/blog-entry-243.htmlで例えると、ページ内下のyou may also likeに出ている9件の同類カテゴリー記事ですが、エラー対象になっているのが9件のアイキャッチ画像で、alt属性が無いよって言っていると思うんですがどうでしょうか?

本文内の<img~画像>については、altを付けて解消出来ましたが、OGP画像設定のアイキャッチ画像にaltを付ける事がどうやっても出来ないのです

現在はブラウザがchrome、新管理画面のhtmlエディター、環境設定の画像のリンクは元画像にリンクさせてです

試してみた事は、ファイル名修正→タイトル変更→日本語でブログテンプレート変更として保存し、アイキャッチ画像を一旦削除して保存、再度立ち上げ、アイキャッチ画像を先程タイトル変更した画像で保存です

W3Cで確認すると<img src="https://blogthumbnail.fc2.com/r72/146/i/t/t/ittsuie/20210805150023e24.jpg" />と出てエラーでした

アイキャッチ画像を選択するまたはアップロードしたURLを入力内のURLは
//blog-imgs-146.fc2.com/i/t/t/ittsuie/20210805150023e24.jpgとなっています

vanillaice (Akira)
vanillaice (Akira)
2021/10/21 (Thu) 13:21

To ittsuieさん

こんにちは ('0')/

結論から言うと、FC2ブログの仕様上避けにくいエラーです。
参考記事: W3C validatorのエラーの説明(サムネイル画像のエラーを参照のこと)
https://vanillaice000.blog.fc2.com/blog-entry-782.html

避けにくい、という表現を説明すると、
関連記事というのはFC2ブログの個人設定が用意されおり、

https://admin.blog.fc2.com/control.php?mode=setting&process=2#setting2
関連記事リスト > リストの表示位置
① 個別ページの記事下
② 一覧ページの記事下
③ 個別・一覧ページの記事下
④ テンプレート変数のみ
⑤ 上記全て

の5種あります。仮にテンプレート作者がテンプレートのhtmlに正確な(alt付きの)関連記事リストを入れても、個人設定の大抵は①か②で、「テンプレートに関連記事リストのhtmlが含まれている」と考える人は稀なんですね。そして使われない場合は(つまり「テンプレート変数のみ」を選んでいない場合は)htmlもCSSも無駄になってしまいます。
そういった事情で私の場合はブログ内限定配布テンプレート以外は関連記事リストのhtmlは記載していません。ブログ内限定配布の場合はDLする際に必ずDL+説明ページを訪れるので注意点として伝えられるんですが、一般共有の場合はそういうわけにはいかないので (∵`)

というわけなので、解消しようと思えば
・ 関連記事リストのhtmlをテンプレートhtmlに直書きする
・ 関連記事リストのデフォルトCSSをテンプレートスタイルシートに直書きする
・ 個人設定を「テンプレート変数のみ」に変更する

上記に加え、必須ではありませんが「サムネイル対象が無い場合」も考えないといけませんので、実質4手順が必須です。とても大変な作業なので、一般ユーザーさんへは「気にしない」ことをおすすめ ^^;
個別記事の画像の場合最も大事なのが「記事内にある画像」でこれは当然検索対象になりますので、しっかりとalt属性を書いてください。関連記事サムネイルやサイドメニューの最新記事サムネイルなどはメインコンテンツではないので目をつぶってもそんなに問題にはなりません。

バリデート時に邪魔になる場合は、「関連記事サムネイルはエラー対象である」としっかり認識した上で、除外項目にして検証を行うと良いと思います。ただしalt属性抜けを指摘除外に指定した場合は記事内の画像へのaltこぼしがあった場合でも指摘が行われませんので、記事内altの検証には使えなくなってしまいますので、その点だけ注意してください。

また、alt属性がつかない件についてはFC2リクエストでも長く要望されていますので清き一票お願いします(笑)
https://request.fc2.com/ja/request/6769

時間が取れれば書き換えの記事を書こうかなぁ、と考えています… けれどもまぁ、結構面倒というか、テンプレートを変更したときに個人設定の変更を忘れて大慌てするといったケースもあるので、そっとしておく(FC2が対応するまで諦める)方が良いかもしれない (∵`)

ittsuie
2021/10/21 (Thu) 14:53

To vanillaice (Akira)さん

こんにちは!
今回も解りやすい説明有難う御座います!

僕自身、一番大事な事は内容であり、読者の方がその裏を除くためにわざわざ来ているわけではない!
って事は解っているんですが、W3Cを開いた時のエラー文が気になって気になって・・・

最初はもっとめちゃくちゃエラー文が出てたんですが、その度にこちらにお邪魔して、解決策を探ってここまで来る事が出来ました

いつも参考になる記事を有難うございます!

””~~ 一般ユーザーさんへは「気にしない」ことをおすすめ ^^; ”
この言葉を、知識のある方に早く言ってほしかった!かも・・・です

とてもスッキリしました!

軟弱者の票ですが、1票入れました

今回もお忙しい中有難うございました! <(_ _)>

vanillaice (Akira)
vanillaice (Akira)
2021/10/21 (Thu) 20:11

To ittsuieさん

こんばんは ('0')/

記事を書きました。お時間があればやってみても良いかもしれません。それか、そのままでも良いと思います(笑)
気にしだすと「あれもこれも」となってしまって、ブログ更新が疎かになってもいけませんので、「お時間が十分にある時、その気になった時」ぐらいが良いですね :)

ittsuie
2021/10/22 (Fri) 10:32

To vanillaice (Akira)さん

こんにちは!
いつも感謝です!
記事にまでして頂いて有難う御座います!

指示通り試したらエラー無くなりました!もうめちゃくちゃスッキリです!

・・・ただですね~
もうひとつ可能なら教えて頂きたいです

使用テンプレートはFrancescaですがデフォルトで現在観覧中表示が出ます、そこを触って新しく記事を書いた時に出る、newの点滅構文を引っ張って、今までは現在観覧中を点滅させていました

今回、alt属性の件ですが
➀htmlは <!--/more--> の直下に入れました
②今回の記事内容の中で、閲覧中ページも含める場合は <!--relate_entry_other--> と <!--/relate_entry_other--> を削除します。 と書かれていたので、そこを削除して観覧中ページを含める仕様にしました
③CSSは、 ~関連記事リスト list of related articles~の直下に入れました
④個人設定変更をテンプレート変数のみに変更しました
ここまででaltに関するエラーが消えて、閲覧中ページも含めた関連リストになりました

そしてそして、現在観覧中を表示させたいので
デフォルトの現在観覧中表示はrelate_entry_title_textの中にあるので、今回入れた上書き用のrelate_entry_title_textの後にそのまま、
relate_entry_title_text::before,
.fc2relate_entry_thumbnail_off .relate_li_nolink::before {
content: "【現在閲覧中】";
color: rgb(255,0,0);
animation: blink 1s ease-in-out infinite alternate;
を入れた所、関連リストすべてに反映されてしまいました

上書き用はの構文をじっくり見た所、タイトル全体に効く構文のようで当たり前かと・・・

でもここから、じゃぁどないするねんとなってしまいました・・・

教えて頂けたら有難いです

vanillaice (Akira)
vanillaice (Akira)
2021/10/22 (Fri) 20:35

To ittsuieさん

こんばんは ('0')/

追記しましたのでご覧くださいね。よろしくお願いします :)

----- 別件
Yahoo!時代の記事〜の件ですが、これに該当している可能性はないでしょうか ↓

参考記事: 旧投稿画面「自動改行」で書いた記事の修正
https://vanillaice000.blog.fc2.com/blog-entry-1085.html

ittsuie
2021/10/23 (Sat) 07:38

To vanillaice (Akira)さん

こんにちは!
記載されている②閲覧中記事をリストに含める場合で試した所、現在観覧中復活しました!
有難う御座います!

しつこくて申し訳ありません!
使用中のテンプレートはFrancescaですが、記事の最下部のまとめに書かれている
~lazyload対応の弊テンプレートをご利用の方は、画像部位をlazyload用のマークアップに変更します。~ですが

Francescaはlazyload対応と思われるのですが、この構文は②の場合、img~から始まる箇所が2か所ありますが、この2か所をlazyload用に変更するでよろしいでしょうか?

~話変わって
記事を読んで頂いたようで有難う御座います!
Akiraさんが思われたように、実はAkiraさんのこの記事は、不具合発生時に拝見させて頂いています

まさしくその通りで、ヤフーからFC2に引っ越した時、記事を書くのデフォルトは旧管理画面の新投稿画面で改行も何も触っていないので自動(と思われます)で、見たまま編集でした(・・・ややこしいですね)

答えは近い!と思いましたが、結果的にダメでした

不具合発生時の状況は、ブラウザはchromeで、新管理画面の投稿画面で、改行の扱いをHTMLタグのみでHTML編集で記載で起きました

試した事は
●旧管理画面の新投稿画面で改行の扱いをHTMLタグのみ、HTML編集で記載
●旧管理画面の旧投稿画面で改行の扱いをHTMLタグのみ、HTML編集で記載

実はAkiraさんに問い合わせをしようとしたんですが、前回の質問が直近だったので、小心者の僕は遠慮してしまって問い合わせ出来ませんでした((+_+))

もう時すでに遅しでして・・・
ヤフー時代の記事は、HTMLを新しく記事を書くにコピペして、構文を編集して、投稿日付を合わせて新しく投稿という形にしました
当たり前ですが、古い記事の方が新しい目の記事番号を追い抜いております・・・(-_-;)

先回のAkiraさんへ問い合わせた、HTML編集上でenterキーを押しても改行や段落してくれない件で、犯人がFireFoxでしたが、当時もFireFoxだったので、何か関係あるのかな?と・・・
くどいようですが、もう時すでに遅しですが・・・

あ~やっぱり問い合わせればよかった~~~です
さらにくどいようですが、もう時すでに遅しですが・・・

vanillaice (Akira)
vanillaice (Akira)
2021/10/23 (Sat) 14:49

To ittsuieさん

こんにちは ('0')/

> img~から始まる箇所が2か所ありますが、この2か所をlazyload用に変更する〜

はい。そういうことです。htmlの方に loading="lazy" を指定してありますので、無理に変更する必要はありません。書き換えた場合は表示がフワっとなる、という程度です。

----- 移設記事の件

> 旧管理画面の新投稿画面で改行の扱いをHTMLタグのみ、HTML編集で記載〜

旧投稿画面の新エディターでは改行の扱い変更はできないので、何か別の作業と勘違いされたのかな?と思います。

> 旧管理画面の旧投稿画面で改行の扱いをHTMLタグのみ、HTML編集で記載〜

FC2で書いた記事の場合は 旧投稿画面 + 旧エディター の組み合わせであればFirefoxでも修正可能であることを確認しています。なのでおっしゃる通り、移設した記事だけができない、ということですよね。

「自動改行」で書いた記事(移設記事もこちらに含まれます)を新エディターの「HTML編集」で修正する場合は 一旦旧エディターで「改行の扱い HTMLのみ」に変更して保存してから でないと解除できませんので、もしかするとそこでつまずいた可能性は無いでしょうかね。
もう既に記事が残っていないということなので検証しようがないけれど ^^;
全部新規投稿として直されたのだとしたら大変な作業だったと思います。お疲れ様です。

ittsuie
2021/10/23 (Sat) 19:34

To vanillaice (Akira)さん

こんばんは!

関連リストの画像抜け対処完了できました、今回も解りやすい説明で有難う御座いました!<(_ _)>

----- 移設記事の件

察しの通りだと思います
今更悔やんでも仕方無いですが、やはりAkiraさんに問い合わせるべきでした・・・

ちなみに今日会社に行ったら、ニュースで見た事がある、鳥インフルエンザや豚インフルエンザが発生した時並みの白服の人が数人にいて、何じゃらほい?と思ったら、違う部署でコロナの陽性の人が1人出たという事で、てんやわんや状態でした

またまたちなみに、僕はワクチン接種しているのでAkirtaさんには移しませんよ~

今回も問い合わせが多い中、貴重な時間を割いて頂き有難う御座いました!<(_ _)>

通りすがり
2022/05/13 (Fri) 15:33

alt属性ついて

通りすがりですみません。
且つて「alt属性」は目の不自由方が使用する「音声ブラウザ」の読み上げ対象でした。どのような画像が挿入されているのか、その情報をalt属性で提供していました。おっしゃるように「コンピュータのためのもの」でありましたが、他方で「人間のためのもの」としてとても重要な役割を担っていました。
近頃のことは確認していませんがこの役割は変わっていないのではないでしょうか。。。

vanillaice (Akira)
vanillaice (Akira)
2022/05/16 (Mon) 19:53

To 通りすがりさん

こんばんは ('0')/

> 近頃のことは確認していませんがこの役割は変わっていないのではないでしょうか。。。〜

はい。変わりありません。音声読み上げを解釈するのもコンピュータです。altと音声については
https://vanillaice000.blog.fc2.com/blog-entry-747.html
こちらの記事で触れていますのでよろしければご一読を :)

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)