【はてなブログ】AMP記事の画像がはみ出る時の対策方法

Sponsored Link

f:id:langnerdmom:20210329000021j:plain:w300

こんばんは!

AMPという機能が気になりはてなブログを再開しました – ゆるミニマリズム」でお伝えした通り、

はてなブログ』を再開した理由はAMPなるモノを試してみたい

という、ただ1つの理由。

それだけで見切り発車をしました。

Sponsored Link

AMPって?

ブログユーザーにとって、AMPはモバイル環境で速やかに表示され、ブログがより快適に閲覧されるため、多くの人に読まれやすくなることが期待できます。一方で、デザイン上のカスタマイズなど、リッチな表現には制限があります。

AMPを使用する – はてなブログ ヘルプ

表示が速くて、AMPを導入しているウェブサイトだとスマホからストレスなく見られるっていうことらしいです。

最近、Googleの検索部分に⚡のマークがよく出ていて気になっていました。

はてなブログProなら簡単にAMP設定が出来る

私が普段ブログを書いている「Blogger」でAMPの設定をしようとすると

  • 設定の仕方がまず分からない
  • 記事を書く時にAMP用のコードで書かなきゃいけない(画像とか)

めんどくさい

WordPressは少し前に試してみて、スマホからブログを書く私には向かないと経験済み。

AMPを試してみてみるだけなら「はてなブログ」が簡単に出来そう

はてなブログ』自体を再開したばかりなので、メリットやデメリットなどは今のところ分からない状態ですが、楽しんでAMPページのカスタマイズをしています。

AMPを利用するには「はてなブログPro」契約が必要です。

詳しくは、「AMPを使用する – はてなブログ ヘルプ」をご確認ください。

カスタマイズしてもしなくても表示がおかしい

AMPページのカスタマイズをしている途中で気がついたのですが、ページが左右に動く。。。

なにかはみ出してない?

アドセンスの表示を直しても画面がズレたまま。

カスタマイズのCSSをすべて消してもおかしい。

ん??なんで??

よくよく見てみると

画像のサイズをMarkdownで設定しているはずが、AMPだとそれが効いてない!

f:id:langnerdmom:20210328232110j:plain:w250
分かりにくい例でごめんなさい😫

上のボックスが左に少しズレてるのがお分かりでしょうか?

写真が大きめに表示されていて、画面からはみ出していることに気づきました😫💦

はてなブログについてもっと知りたい

はてなブログ Perfect Guidebook

CSSからAMP用画像の横幅一括設定する方法

参考記事はてなブログのAMP配信で、imgからamp-imgへ変換する際の表示サイズの継承ルール – わたしと納豆ごはん」を読んでみると、

写真を個別に設定する場合は、HTMLで詳細に書かないといけないみたい。

めんどくさそう。。。

たまには不具合があってもいいから、一括で設定出来ないかな?と探してみたら

上記の参考記事内で案外、簡単な答えが。

amp-img {
max-width:300px;}

これをAMPのCSSに貼り付けるだけ。

f:id:langnerdmom:20210328232543j:plain:w250

「デザイン」→「カスタマイズ」→「AMP用CSS」にコードを貼り付け。

このブログはMarkdownで書いているので、AMPの画像サイズ設定がきちんと出来ていないよう。

でも、

横幅の最大サイズ:300px

と指定してあげることで、画面からはみ出すことがなくなりました。

記事を読んでいる時に画面が左右に動くのって軽いストレス

解決してよかったです

数字を変えると、画像の横幅を変えることが出来ます。

忙しいワーママに

忙しいワーママでも「はてなブログPro」でなら、簡単なのに本格的なブログが始められる


一緒に始めてみませんか?

息子と娘にこどもちゃれんじを始めました

幼児教育にまったく興味のなかった筆者。

そのせいなのか、3ヶ国語が入り乱れているせいなのか、息子が「発達遅れ」だと病院の先生から言われ、いろいろ検討した結果お家で出来る知育をはじめました。

こどもちゃれんじ」、モンテッソーリ、幼児向けの「ポピー」に挑戦中。

0歳向けの「こどもちゃれんじ」は、モンテッソーリ教具としても使えそうなので、生後2ヶ月の娘も受講の登録をしました。

この記事を書いた人
Ai
Ai

ミニマリストに憧れる、外国語が好きな2児(2歳&0歳)のママ。

育休中に日本語教育能力検定試験と英検1級の合格を目指しています。ハーフの子の育児、知育、外国語、お家のこと、家計など気ままにブログで書いています。

取得資格:仏検3級、TOEIC830、日本語教師養成講座420時間

Aiをフォローする
はてなブログブログのこと
Sponsored Link
Aiをフォローする
ゆるミニマリズム

コメント

タイトルとURLをコピーしました