 ブログをレスポンシブデザイン対応のテーマに変更した

みなさん こんにちは ひさしぶりに吹き出し先生の登壇です 今日は はてなブログ吹き出し表現についてお話します 吹き出しについてはずいぶん前に下に紹介したブログ記事に書いてあります

tomi-kun.hatenablog.com

先生 こんにちは 吹き出しって前にやったけどPCでは上手くいったけどスマホだと吹き出しにならなくて失敗したんですよね

そうですね あの時は上手く行かなくて読んでくださる人たちに「デスクトップ用Webサイトを表示」で読んでください なんて失礼なことを書いていましたね

それで諦めちゃったんですよね

そうでしたね 何やらブログのテーマデザインがPCとスマホの表示が同じに観られるレスポンシブデザインに対応していなくてできなかったんですね

でも今回は上手く吹き出しが表現できてるみたいなんですが

そうなんです 親切な人に相談したらヒントを教えてくれたんです そのあたりの事はブログの管理人に説明してもらいましょう

みなさん こんにちは 管理人です 日頃は当ブログをご贔屓いただいて感謝しています 今回はブログにPCとスマホの両方に吹き出し表現をするためにはレスポンシブデザインが必要だよというお話ですが口頭ですと説明し難いのでここからは文書で説明します

はてなブログ吹き出しについて
ブログを書くのに吹き出し表現を使うとただの文章よりも読者との親近感が湧くような気がします。ずい分前にも吹き出し表現に挑戦したのですが当ブログがレスポンシブデザインに対応したテーマデザインではなかったためPCでは表現できてもスマホでは観られませんでした。あるブログ→ 吹き出し会話をカスタマイズしてみた - jack-hana’s blog

を参考にして再度試してみました。そのブログにもレスポンシブデザインを設定すると書いてあります。設定方法は はてなブログダッシュボードのサイドバーにある「デザイン」をクリックしてスパナマークの隣りにあるスマホマークを選び「詳細設定」で「レスポンシブデザイン」にチェックをいれます。この設定でPCもスマホでも吹き出しを観ることができました。しかし当ブログのテーマデザインが本質的にレスポンシブデザイン対応でないためにスマホの表示でフォントの大きさ等の設定ができず 異常に小さな文字となり読むに耐えない状態になりました。また諦めかけたのですが この際に思い切ってテーマデザインをレスポンシブデザイン対応のものと変更してみることにしました。幸い当ブログには背景画像などのカスタマイズをいっさいしていないのでCSSのみコピペするだけで済みました。

f:id:tomi_kun:20211029095208j:plain

結果はみてのとおりです。読者のみなさんにはどんな風に映っているのか分かりませんが不具合は順次修正していきたいと思います。今後もよろしくおねがいします。
なお今回 思い切ってブログのテーマ変更の決断を後押ししてくれた はなお (id:jack-hana) さんに感謝します。

See you tomorrow!

follow us in feedly