カズブロ

【カズブロ】KAZ ブログ 写真ACの推移・旅・日常・会社など  日々の出来事 いろいろな情報をざっくり提供

【はてなブログ】会話形式の吹き出しを少し異なる方法で設定してみました

f:id:kz-photo:20200830090304j:plain

 

はてなブログで会話形式の吹き出しの記事を参考に設定してみましたが、表示されないので思い切って別の方法にするとようやく表示され無事に解決されましたのでその方法を記事にしてみました。

 

しかもこちらの方法が簡単だと思いますので

上手く設定できない

CSSをパソコン・スマホの両方設定するのが面倒だ

途中でテーマを変えたい

と感じるかたに向いてます。

 

「はてなブログ会話形式」などで検索すると1ページ目にこちらの記事が出ますのでコードのみコピーして利用させていただきました。

 

そのため私の記事にコードは掲載いたしませんのでコードが必要な際は下記サイトを参照下さい

 

www.notitle-weblog.com

 

mamazakki.hatenablog.com

 

上記ブログをもとにCSSの設定は行いましたが試行錯誤しても表示されず

 

表示されなかったので試したこと

 

CSSの順番を上に持ってきた

結果・・・×

 

画面表示サイズの確認

問題なかったので結果・・・×

 

検索してもこの2つくらいしかわからず原因が解決できませんでした。

 

あとコードを見直すのが面倒だったこととレスポンシブデザイン対応のテーマですが、パソコンとスマホを別々の設定にしているので早々にあきらめてしまいました 。

 

2つも設定するのって面倒だなぁ~

 

別々に設定と言うことはそれぞれにCSSの設定が必要

 

あきらめようかな~・・あっあれを応用してみよっ!

 

先程も記載したパソコンとスマホで別々の設定が必要なのでそれが面倒で紹介頂く記事を見るものの手つかずでしたが、こちらの蛍光マーカーを引く記事を拝読し1つの設定でどちらも対応可能とのことで設定したことを思い出しました。

 

hirochiki10.hatenablog.com

 

 

記事を読んで頂くと理解できたと思いますが

「設定」→「詳細設定」→「headに要素を追加」に吹き出しのコードを設定するとパソコン・スマホの両方に表示され無事完了!

 

最初に <style type="text/css">

会話形式のコード

最後に </style> をけて下さい

 

無事に表示されました!

 

実際のブログに利用する場合

「Google拡張機能」を利用して吹き出しを簡単に表示させる記事もありますが、それも私は面倒に感じるのと複数のパソコンやブラウザが少々異なっても同一環境にしておきたいと思い「Google拡張機能」は利用せず

「はてなブログ」の編集サイドバーにある「定型文貼り付け」に予め定型文として作成し選択すれば吹き出しのコードが文章に貼れるようにしました。

 

f:id:kz-photo:20200830092531j:plain

 

設定した内容

「テキスト」など文字・数字なんでも構いませんので下の〇〇〇内に入れておかないと「見たまま編集」の場合、挿入したときにどこに貼付けできたかわからなくなります。

「HTML編集」・「プレビュー」の場合は表示されます。

 

予め文字を >〇〇〇</P> 〇〇〇内に1文字以上入れておき貼付け後に書き換え

 

f:id:kz-photo:20200830093029j:plain

 

以上、今回実施した「会話形式の吹き出し」設定でした。

不具合があるかまだわかりませんが今のところは大丈夫そうです。

 

 

 

にほんブログ村 写真ブログ 写真日記へ にほんブログ村