TOMOKO OOSUKI

イラストレーター オオスキトモコのブログです。

【noteエクスポートβ】はてなブログへ移植したときに、スマホでの画像表示がおかしいときの対処法

【最終更新:2021/5/18】
*(2021/5/18)なんと「noteエクスポートβ」は、今月末か来月いっぱいで終了してしまうそうです。移転をお考えの方は急いでバックアップを!

今回は、「noteエクスポートβ」を利用して、noteからはてなブログに記事を移転した場合に、スマホでの画像表示がおかしいときの対処法を紹介します。

1・実はnoteは記事のエクスポートができるし、はてなブログなら画像も移転できる

現状、noteは、記事のエクスポート(外部取り出し・外部保存のこと)ができないとされています。

非公式ツールではありますが、「noteエクスポートβ」を使用すれば、ブログ記事のバックアップを取ることができ、記事を他のブログに簡単に移転することができます。

pon-navi.net
↓使い方

note.comまた、はてなブログの場合、このエクスポートツールと、はてなブログのインポートツールを利用すれば、画像も移転できます。
私はこのツールを利用して、はてなブログに記事の移転を行いました。
↓詳しくは、下記記事を参照

petitmatch.hatenablog.com
しかし、これらのツールも完璧ではないので、はてなブログへ移植したときに、スマホでの画像表示がおかしいときがあります。
何もしなくても、画像がきちんと表示される記事と、ダメな記事があります。

今回は、移転後に、画像がおかしい記事を見つけて、修正する方法を紹介します。

2・画像表示がおかしい記事を見つける方法

まず、画像表示がおかしいと想定される記事を検索する

まず、画像表示がおかしいと想定される記事を検索する

「記事の管理」→「記事を検索」で、

width="620”(画像の幅を指定する部分のHTML)
または
width= 

で検索。

出てきた記事は、画像表示がおかしくなってる可能性が高い記事です。
記事をスマホ版プレビューで開いてみると、実際歪んでいました。

画像表示がおかしい(歪んでいる)記事

画像表示がおかしい(歪んでいる)記事。タテに伸びてしまっています

3・HTMLを修正する

記事を1つ1つ開いて、HTMLを修正します。

この部分に注目。この部分が画像のHTMLです

この部分に注目。この部分が画像のHTMLです

「HTML編集」画面で、
width="620” などの、画像の幅を指定する部分の指定を、削除します。

ここの、青で選択した部分が、不要な部分です。

ここの、青で選択した部分が、不要な部分です。

他にもclass= とか、画像ファイル名の左にあるものは削除してしまいます。

このようにします

このようにします

そうすると表示の指定が、はてなブログの指定の大きさ(自動)に変わります。

その後、プレビューで確認します。

画像表示が、正しい比率に修正されました。

画像表示が、正しい比率に修正されました。

これで、対応できるはずです。

私が知る限りでは「noteエクスポートβ」で、画像まで移植できるのは、はてなブログだけです。

しかし、もし今後、他社のブログサービスが、はてなブログのように、MT形式でのエクスポート→インポートで画像移植に対応した際には、HTML編集ができるブログでなら、同じ対応で修正できると思います。
ご参考まで…

関連記事

petitmatch.hatenablog.com

petitmatch.hatenablog.com

petitmatch.hatenablog.com