はてなブログで会話形式の吹き出しの記事を参考に設定してみましたが、表示されないので思い切って別の方法にするとようやく表示され無事に解決されましたのでその方法を記事にしてみました。
しかもこちらの方法が簡単だと思いますので
上手く設定できない
CSSをパソコン・スマホの両方設定するのが面倒だ
途中でテーマを変えたい
と感じるかたに向いてます。
「はてなブログ会話形式」などで検索すると１ページ目にこちらの記事が出ますのでコードのみコピーして利用させていただきました。
そのため私の記事にコードは掲載いたしませんのでコードが必要な際は下記サイトを参照下さい
上記ブログをもとにCSSの設定は行いましたが試行錯誤しても表示されず
表示されなかったので試したこと
ＣＳＳの順番を上に持ってきた
結果・・・×
画面表示サイズの確認
問題なかったので結果・・・×
検索してもこの２つくらいしかわからず原因が解決できませんでした。
あとコードを見直すのが面倒だったこととレスポンシブデザイン対応のテーマですが、パソコンとスマホを別々の設定にしているので早々にあきらめてしまいました 。
２つも設定するのって面倒だなぁ～
別々に設定と言うことはそれぞれにＣＳＳの設定が必要
あきらめようかな～・・あっあれを応用してみよっ！
先程も記載したパソコンとスマホで別々の設定が必要なのでそれが面倒で紹介頂く記事を見るものの手つかずでしたが、こちらの蛍光マーカーを引く記事を拝読し１つの設定でどちらも対応可能とのことで設定したことを思い出しました。
記事を読んで頂くと理解できたと思いますが
「設定」→「詳細設定」→「headに要素を追加」に吹き出しのコードを設定するとパソコン・スマホの両方に表示され無事完了！
最初に <style type="text/css">
会話形式のコード
最後に </style> をけて下さい
無事に表示されました！
実際のブログに利用する場合
「Google拡張機能」を利用して吹き出しを簡単に表示させる記事もありますが、それも私は面倒に感じるのと複数のパソコンやブラウザが少々異なっても同一環境にしておきたいと思い「Google拡張機能」は利用せず
「はてなブログ」の編集サイドバーにある「定型文貼り付け」に予め定型文として作成し選択すれば吹き出しのコードが文章に貼れるようにしました。
設定した内容
「テキスト」など文字・数字なんでも構いませんので下の〇〇〇内に入れておかないと「見たまま編集」の場合、挿入したときにどこに貼付けできたかわからなくなります。
「HTML編集」・「プレビュー」の場合は表示されます。
予め文字を ＞〇〇〇＜／Ｐ＞ 〇〇〇内に１文字以上入れておき貼付け後に書き換え
以上、今回実施した「会話形式の吹き出し」設定でした。
不具合があるかまだわかりませんが今のところは大丈夫そうです。
