②bloggerからはてなブログへ移行。テーマZENO-TEALトップページ 画像がうまく表示されない対処方法

f:id:Morning-Glory:20180509153750j:image

 

bloggerから移行させると画像が表示されない理由

前回の記事の最後で、画像がうまく表示されないという事を書きました。

これに関して直し方がわかったので、ログしておきます。

 

結論は

やはり『blogger』と『はてなブログ』との記述の問題にありました。

なぜ、気付かなかったのかというと、はてなブログの、「見たまま」という便利機能で直していたからでした。

 

blogger・はてなブログの違い

HTML表記が違うと知りながら、「見たまま」でも偶然直ってしまった記事が多く存在してしまったため、HTMLを調べるというところをサボってましたね。

 

いろいろ調べていくと、制作者の方曰く

<p>〜</p>で囲まれた最初の画像がトップ画像に出るようにしてある。

とのこと、その事を知りながらも調べなかった失態。お恥ずかしい限りであります。

 

早速、調べようとしたものの出先でPCがない。

どうにかiPhoneからできないものかと、考えていたら、アプリでなくブラウザならいけるかもと。

 

編集モードでHTMLを見ることができました。

小さなHTMLをどうにか編集していきます。

 

blogger

bloggerでは、画像のように<div>でくくる表記ですが、それが残ってしまってます。

f:id:Morning-Glory:20180509163923j:image

この状態を直すには、みたままモードでの編集はできません。

HTML編集モードで消し去る必要があったのです。

 

画像を貼り替えた際に 偶然<div>が外れた記事だけが、うまく表示されていたわけです。

 

というわけで、早速<div>をはずします。

編集モードの1番上の左が<p>で始まるように書き直しすることで、解決です。

 

ビフォーアフター

<div>が付いてる

f:id:Morning-Glory:20180509163256p:image

 

<div>を消した

f:id:Morning-Glory:20180509163407j:image

完全解決です。

 

ちなみに

冒頭で書いたように<p>でくくった最初の画像がトップにくるなら、画像から始めず、見出しから普通に記事を書いておいて、トップ画像にしたいもの以外を<div>で挟めば、いけるんではないかと考えました。

 

すなわち、何枚目の画像出会っても<p>で囲まれてる画像が1枚なら それが表示されるはず。

 

結果

ダメでした。。。

表示されず。

 

まぁ、今回無事に解決出来て良かったです。

 

それでは、今後とも『mono-log』を宜しくお願いいたします。

 

 

www.kohta-urakami.net