Blog

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

この記事は約2分で読めます。

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枚なら それが表示されるはず。

結果

ダメでした。。。

表示されず。

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

スポンサーリンク
シェアする
Morning-Gloryをフォローする
ハックルベリーに会いに行く
タイトルとURLをコピーしました