暮らしと勉強、猫と一緒に~Bettyのブログ

実家の母を介護するために北海道から引っ越してきました。その介護も終わり、片づけと大学通信教育部の勉強と猫と。そんな雑記ブログです。当サイトはアフィリエイト広告を利用しています。

「吹き出し」スマホで表示されない時の対処法

にほんブログ村 ライフスタイルブログ 小さな暮らしへ
にほんブログ村

昨日の記事「ブログのカスタマイズ」には、たくさんのコメントをありがとうございました。

www.betty0918.biz

 

目次 

 

f:id:Betty0918:20210728204503j:plain

 

スマホでは「吹き出し」が表示されていなかった

私は、ブログに吹き出しを表示する方法に成功し、小躍りしていましたが、実は記事をアップした後に、スマホで確認すると、吹き出しも画像も表示されておらず、台詞のみが普通に表示されていました。

 

あら、それは残念

 

しかし、コメントでこみひ(id:komihi)さんよりご紹介いただいたサイトで、指示通りにやってみると、あっさりと難題は解決しました。

  SHIROMAGさんが、わかりやすく説明してくださっています。

www.notitle-weblog.com

 

スマホで「吹き出し」を表示する方法

スマホで「吹き出し表示」を適用するには、レスポンシブに設定していない場合、デザイン→スマートフォン→ヘッダ→タイトル下CSSを記述します。

この時、<style>○○○○(ここにCSS)</style>と言う具合に<style></style>CSSを囲んで記述します。

 

「デザイン」をクリック

20210728164008

 

スマートフォン」→「ヘッダ」

20210728164611

タイトル下でCSSを記述

ここで<style></style>CSSを囲んで記述します。

f:id:Betty0918:20210728163307p:plain

で、「変更を保存」にします。

操作はこれで終了です。

 

完成!

このやり方で、私もスマホでも「吹き出し」が表示されるようになりました。

やってみると、難しいことは何もありませんでした。

f:id:Betty0918:20210728170223p:plain

 

まとめ

今回、吹き出し設定がパソコンでは表示できるのに、スマホでは表示できなかった原因として、私がレスポンシブに設定していなかったことが考えられます。

しているつもりだったのです。

でも何かのタイミングでその設定をハズしてしまったのかもしれません。

 

画像のサイズや吹き出しの「幅」に原因があるのかと、いろいろ触ってみました。

結局私は、吹き出しの「幅」はスマホ設定では少し小さく320pxにしています。(パソコンでは478px

それらが原因ではなかったのですが、あれこれやっているうちに画像サイズの変更や画像を「はてなフォトライフ」からHTML編集で貼り付けることもできるようになりました(笑)

やってみるもんですね。

 

みなさんのおかげですね!

 

nana@バァバ (id:nana-plant51)さん、ポヤラ (id:poyara)さん、こみひ(id:komihi)さん、ありがとうございました!

そして、プラウザからやってみればとアドバイスをくださり、いち早く「スマホでも吹き出し表示できてますよ」と連絡くださったにゃにゃにゃ工務店 (id:JuneNNN)さん、本当に本当にありがとうございました!(たぶん私が設定を変更しているのと、にゃにゃにゃさんが記事をスマホで見てくださるのが、ほぼほぼ同時進行だったと思われますw)

 

 

私のような知識のないブロガーが情報発信させていただきました。

吹き出し」設定するより、このブログを作成する方がずっとずっと時間がかかってしまいましたが、自分の備忘録のためにも残させていただこうと思いました。

最後までお読みくださり、ありがとうございました。

 

はてな、万歳!🙌

 

 

 

にほんブログ村 ライフスタイルブログ 小さな暮らしへ
にほんブログ村