はてなブログの記事上下などのカスタマイズエリアで画像を表示する方法

f:id:hazakurakeita:20161105205638j:plain
ブロガーのブロガーっぽくブログのデザインを細かく変えてみました。その際にカスタマイズエリアに任意の画像を貼ることに苦戦してしまったのでメモとして残しておきます。

HTMLで書くだけじゃだめだった

記事の一番したに僕のプロフィール欄を追加したいと思います。WEBは専門ではありませんが、HTMLはISIDの中学生時代に習得してます。だから画像を貼り付けるなんて秒殺ですよ。はっはっは。

<img 
scr="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hazakurakeita/20160330/20160330230629.png" 
alt="f:id:hazakurakeita:20160330230629:plain" 
Width="180" 
Height="180"/>

余裕ですね。さあ、プレビューしてみるか。。。

f:id:hazakurakeita:20161105204656p:plain

おかしいってばよ。
なぜか画像が表示されません。最初はTwitterから直リンクしてたので、それがだめなのか？と思ってフォトライフにアップしている画像にリンクを切り替えたのですが、これもだめ。

記事のHTMLをコピペ

もう分からなかったので、投稿済みの記事の編集画面を開き、更にHTML編集モードにします。このHTML編集モードから画像のIMGタグをコピペしてURLだけ変更してみました。

<img 
class="hatena-fotolife" 
title="f:id:hazakurakeita:20160330230629:plain" 
src="http://cdn-ak.f.st-hatena.com/images/fotolife/h/hazakurakeita/20160330/20160330230629.png" 
alt="f:id:hazakurakeita:20160330230629:plain" 
Width="180" 
Height="180"/>

コピペ前と比較してみるとclassやtitleが追加されてますね。。

f:id:hazakurakeita:20161105204947p:plain

表示された！

HTML直貼りだけではダメなのね

なんかよく分かりませんが、classとかtitleとかが揃っていないと表示できないみたいですね。カスタマイズエリアとはいえ、ここのHTMLがそのまま表示されるというわけではなく、はてなブログの処理後にHTMLに挿入されるのでしょうか。このため属性が不足していると非表示にされるとか？ググっても同じ問題で困っている人見つからなかったんですけど、皆さんどうしているんですかね？（もしかしてすごく初歩的なことなのかな。。）

おしまい。