目次
表示がおかしい埋め込み例
今回は、下記Wikipediaページの《最後の晩餐》の画像を埋め込んだ時に起きたエラーを例に、対処法をご紹介します。
クリックすると、画像を拡大できます。
正常に表示されず、HTMLコードが見えてしまっている状態ですね…
表示がおかしい埋め込みコード
表示エラーが起きているコードを見ていきます。
よく見ると、一部のHTMLタグが「特殊文字」になっています。
<p><a href="https://commons.wikimedia.org/wiki/File:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg#/media/ファイル:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Leonardo_da_Vinci_%281452-1519%29_-_The_Last_Supper_%281495-1498%29.jpg/1200px-Leonardo_da_Vinci_%281452-1519%29_-_The_Last_Supper_%281495-1498%29.jpg" alt="Leonardo da Vinci (1452-1519) - The Last Supper (1495-1498).jpg"></a><br><a href="https://en.wikipedia.org/wiki/ja:%E3%83%AC%E3%82%AA%E3%83%8A%E3%83%AB%E3%83%89%E3%83%BB%E3%83%80%E3%83%BB%E3%83%B4%E3%82%A3%E3%83%B3%E3%83%81" class="extiw" title="w:ja:レオナルド・ダ・ヴィンチ"><span title="イタリアのルネサンス期の博学者">レオナルド・ダ・ヴィンチ</span></a> - 不明, パブリック・ドメイン, <a href="https://commons.wikimedia.org/w/index.php?curid=24759">リンク</a>による</p>「<」「> 」とは？
HTMLの数値表現コード。
「<」：「less than」の略で、「＜」を表す。
「> 」：「greater than」の略で、「>」を表す。
対処法・直し方
こちらの方法で、表示エラーを解決できます！
「<」を「<」に置換する
「>」を「>」に置換する
先ほどのコードを「メモ帳」や「Word」などへコピー＆ペーストしてください。
一つずつ修正するのは大変ですが、「一括置換」機能を使えば漏れなく修正できます。
置換前
<p><a href="https://commons.wikimedia.org/wiki/File:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg#/media/ファイル:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Leonardo_da_Vinci_%281452-1519%29_-_The_Last_Supper_%281495-1498%29.jpg/1200px-Leonardo_da_Vinci_%281452-1519%29_-_The_Last_Supper_%281495-1498%29.jpg" alt="Leonardo da Vinci (1452-1519) - The Last Supper (1495-1498).jpg"></a><br><a href="https://en.wikipedia.org/wiki/ja:%E3%83%AC%E3%82%AA%E3%83%8A%E3%83%AB%E3%83%89%E3%83%BB%E3%83%80%E3%83%BB%E3%83%B4%E3%82%A3%E3%83%B3%E3%83%81" class="extiw" title="w:ja:レオナルド・ダ・ヴィンチ"><span title="イタリアのルネサンス期の博学者">レオナルド・ダ・ヴィンチ</span></a> - 不明, パブリック・ドメイン, <a href="https://commons.wikimedia.org/w/index.php?curid=24759">リンク</a>による</p>置換後
<p><a href="https://commons.wikimedia.org/wiki/File:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg#/media/ファイル:Leonardo_da_Vinci_(1452-1519)_-_The_Last_Supper_(1495-1498).jpg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Leonardo_da_Vinci_%281452-1519%29_-_The_Last_Supper_%281495-1498%29.jpg/1200px-Leonardo_da_Vinci_%281452-1519%29_-_The_Last_Supper_%281495-1498%29.jpg" alt="Leonardo da Vinci (1452-1519) - The Last Supper (1495-1498).jpg"></a><br><a href="https://en.wikipedia.org/wiki/ja:%E3%83%AC%E3%82%AA%E3%83%8A%E3%83%AB%E3%83%89%E3%83%BB%E3%83%80%E3%83%BB%E3%83%B4%E3%82%A3%E3%83%B3%E3%83%81" class="extiw" title="w:ja:レオナルド・ダ・ヴィンチ"><span title="イタリアのルネサンス期の博学者">レオナルド・ダ・ヴィンチ</span></a> - 不明, パブリック・ドメイン, <a href="https://commons.wikimedia.org/w/index.php?curid=24759">リンク</a>による</p>今回例にした《最後の晩餐》ではありませんでしたが、こちらも修正すると表示エラーを直せる場合あります。
「 」を「 」（半角スペース）に置換する
または
「nbsp;」を「 」（半角スペース）に置換する
修正完了
先ほど修正したコードに差し替えてください。
埋め込んだWikipedia画像の表示を修正できました。
Wikipediaの画像を自分のブログへ埋め込む方法はこちらをご覧ください。
あわせて読みたい
Wikipediaの画像を自分のブログへ埋め込む方法
【はじめに】 Wikipediaに掲載される画像には、著作権に関する情報を示すために「著作権タグ」と呼ばれるライセンステンプレートが用意されています。このライセンステ…
