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

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

カスタマイズ
2017/01/07 13
vanillaice (Akira)
vanillaice (Akira)
HTML SEO 初心者向け

初心者向け 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="画像アドレス"> これでは検索ロボットがやって来ても、一体この画像が何なのか全く理解してくれません。
だからこうする ↓
<img src="画像アドレス" alt="The other way round"> こうしてロボットに対して明示してあげると、
「ああ、The other way round ね。」
とわかるわけです。

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

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

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

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

<h1><a href="ブログアドレス"><img src="画像アドレス"></a></h1>

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

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

<h1><a href="ブログアドレス" title="The other way round"><img src="画像アドレス"></a></h1>

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

じゃあこうだ ↓

<h1><a href="ブログアドレス" alt="The other way round"><img src="画像アドレス"></a></h1>

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

こうするのがベスト ↓

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

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

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

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

あるいは 「サイトロゴ」 とか 「会社ロゴ」 とか
ちょっと考えすぎちゃって、
「画像の説明をするんだから…? ブログ名なんだから? ブログ名をそのまま書くんでなく…? 『ロゴだぜ』って伝えれば良いんか!」
のんの〜〜〜ん (-ε-)b"
ここは直接ブログ名を記載。
私なら「The other way round」って書けばヨロシ。
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に騙されてた方です。

 13

There are no comments yet.
ノブ
ナルホド

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

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

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

2019/05/11 (Sat) 17:12
vanillaice (Akira)
Akira
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/11 (Sat) 17:35
ノブ
To Akiraさん

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

2019/05/12 (Sun) 14:37
vanillaice (Akira)
Akira
To ノブさん

こんにちは。

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

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

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

考えられるのは、

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

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

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

2019/05/12 (Sun) 17:19
ノブ
To Akiraさん

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

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

2019/05/12 (Sun) 23:33
vanillaice (Akira)
Akira
To ノブさん

こんばんは。

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

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

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

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

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

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

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

2019/05/13 (Mon) 00:38
ノブ
To Akiraさん

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

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

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

2019/05/14 (Tue) 20:41
vanillaice (Akira)
Akira
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/14 (Tue) 21:16
ノブ
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さんのお忙しい貴重な時間をこのような稚拙なことに費やされるのは申し訳ないです。
これからも勉強します、ありがとうございました。

2019/05/16 (Thu) 00:03
vanillaice (Akira)
Akira
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はそういう仕様になってます(笑)

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

2019/05/16 (Thu) 01:20
vanillaice (Akira)
Akira
To ノブさん(重要)

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

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

2019/05/19 (Sun) 15:36
ノブ
To Akiraさん お世話になりました

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

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

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

2019/05/19 (Sun) 20:48
vanillaice (Akira)
Akira
To ノブさん

こんばんは。

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

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

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

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

2019/05/20 (Mon) 02:12

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です。
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い

必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧

カスタマイズ