昨日の記事「ブログのカスタマイズ」には、たくさんのコメントをありがとうございました。
目次
スマホでは「吹き出し」が表示されていなかった
私は、ブログに吹き出しを表示する方法に成功し、小躍りしていましたが、実は記事をアップした後に、スマホで確認すると、吹き出しも画像も表示されておらず、台詞のみが普通に表示されていました。
あら、それは残念
しかし、コメントでこみひ(id:komihi)さんよりご紹介いただいたサイトで、指示通りにやってみると、あっさりと難題は解決しました。
SHIROMAGさんが、わかりやすく説明してくださっています。
スマホで「吹き出し」を表示する方法
スマホで「吹き出し表示」を適用するには、レスポンシブに設定していない場合、デザイン→スマートフォン→ヘッダ→タイトル下にCSSを記述します。
この時、<style>○○○○(ここにCSS)</style>と言う具合に<style>と</style>でCSSを囲んで記述します。
「デザイン」をクリック
「スマートフォン」→「ヘッダ」
タイトル下でCSSを記述
ここで<style>と</style>でCSSを囲んで記述します。
で、「変更を保存」にします。
操作はこれで終了です。
完成!
このやり方で、私もスマホでも「吹き出し」が表示されるようになりました。
やってみると、難しいことは何もありませんでした。
まとめ
今回、吹き出し設定がパソコンでは表示できるのに、スマホでは表示できなかった原因として、私がレスポンシブに設定していなかったことが考えられます。
しているつもりだったのです。
でも何かのタイミングでその設定をハズしてしまったのかもしれません。
画像のサイズや吹き出しの「幅」に原因があるのかと、いろいろ触ってみました。
結局私は、吹き出しの「幅」はスマホ設定では少し小さく320pxにしています。(パソコンでは478px)
それらが原因ではなかったのですが、あれこれやっているうちに画像サイズの変更や画像を「はてなフォトライフ」からHTML編集で貼り付けることもできるようになりました(笑)
やってみるもんですね。
みなさんのおかげですね!
nana@バァバ (id:nana-plant51)さん、ポヤラ (id:poyara)さん、こみひ(id:komihi)さん、ありがとうございました!
そして、プラウザからやってみればとアドバイスをくださり、いち早く「スマホでも吹き出し表示できてますよ」と連絡くださったにゃにゃにゃ工務店 (id:JuneNNN)さん、本当に本当にありがとうございました!(たぶん私が設定を変更しているのと、にゃにゃにゃさんが記事をスマホで見てくださるのが、ほぼほぼ同時進行だったと思われますw)
私のような知識のないブロガーが情報発信させていただきました。
「吹き出し」設定するより、このブログを作成する方がずっとずっと時間がかかってしまいましたが、自分の備忘録のためにも残させていただこうと思いました。
最後までお読みくださり、ありがとうございました。
はてな、万歳!🙌