《ブログ運営》会話形式のCSSをはてなブログに入れる時に注意しなければいけないこと。
Google Adsense
ブログをカスタマイズする時に学んだことを少しずつ書いていけたらと思います。
会話形式はプレビューでは上手く表示されない。
これで何時間頑張ったことか。インタビュー記事を作成するにあたって会話形式を組み込もうと思ったのでどうやったら入れられるかということを調べていました。
参考にさせて頂いたのはこの方々です。
(K)CSSで作った対談（会話）式吹き出しをLINE風にしてスマホにも対応させる | web(K)campus
で、その間に色々CSSの事も見て、吹き出しデザインのCSSについては（というかCSSの仕組みが）少し分かりました。
これもブログをやっていなければ一生触れることもなかったことと思います。感謝。
それを参考ページに載っている通りに挿入し、さあ会話形式で記事を書くぞ〜とルンルン気分で記事を書いたわけです。
一度見てみるとこんな感じ。きちんと表示されていたので「よっしゃー！すごいCSS！」とこうなったわけです。
で、一応こっちもみておくかということでスマホからの表示も確認したところで事件が起きました。
こちらだと吹き出しが表示されないんですよ。もう頭真っ白ですよね。CSSとか詳しいことはわからないのでどうすれば良いのだと。
調べるうちにこう思ったんです。
・これ、レスポンシブになっていないのではないか。
そうなるとスマホ用にCSSを組む必要があるわけですよね。でそれも調べて挿入、そして手順同じくスマホからプレビューをみたんです。
表示されないんですよ。どうしたものか。
会話形式のCSSは投稿して初めて影響する（スマホで）
これが答えでした。
どう頑張っても無理なので、
このように共有URLを作成して、投稿した時の状態で改めて見てみようとなったんです。これは偶然そう思いついたのでそうしたのですが。
するとどうでしょう。しっかりと吹き出しが表示されるではないですか。
えー！今までの数時間はなんだったの・・・。
そんな感じで少し落ちこんでしまいましたけどこれもまあブログを運営して初めて経験したこと。良い経験です。
お陰でCSSの事少し興味が湧いてきましたしね。次違うブログを立ち上げるとしたらもっとCSSの自由度が高いものにしてみようとさえ思ってきました。
ブログで会話形式を使いたいという方へ
このように、CSSを入れたけど映らない！という人は私のように「実際に投稿してみるときちんと反映されている」ということがあるかもしれません。一度確認してみると良いかと思います。それ以外で反映されない時は知りません。笑
ありがとうございました。
