はてなブログに会話形式の吹き出しを導入!CSSを使えば意外と簡単!
スポンサードリンク
どうも、よつぶです。
まあまあ記事も継続的に書けるようになってきたので、そろそろブログのカスタマイズをしようかなと思い、会話形式の吹き出しを導入してみました。
おー!これが今流行りの吹き出しか!
うん!やってみたら意外と簡単に出来たよ!
カスタマイズは結構調べたり勉強したりと大変ですが、できてしまえば意外と楽しいものですね!
ちなみに吹き出し初導入した記事はこちら!
留学経験者あるある!いきなり「英語喋って」は結構辛い - よつブログ。
短いですが、新しい機能を導入という事でかなりワクワクしました!
そして、導入にはこちらのサイトを参考にさせて頂きました。
基本的にはこちらで説明しているように、CSSにコード貼り付けて、HTMLの会話部分に違うコード貼り付けて少し編集するだけですぐ導入できます。
こんなに簡単なのになぜか2時間くらいあたわたしてました。改めてHTMLの知識のなさに驚愕しました。
ということで、会話形式の吹き出しを導入する上で、僕が悩んだ部分をいくつか紹介していこうと思います。
CSS
吹き出しをブログの記事に追加するには「CSSコード」と「HTMLコード」の二つを貼り付ける必要があります。
そもそもCSSは僕もまだ理解できてないんですが、なんとなく「デザインとかのカスタマイズする時にブログの全記事に当てはめる時はCSSコード貼り付けとけば便利だよ」って認識でいます。
という事で、今回は上のリンク先にあるCSSコードを丸々コピーして、ブログのCSSに貼り付ける必要があります。
はてなブログの場合は『デザイン』→『カスタマイズ』→『デザインCSS』から貼り付けれます。既に違いコード入れてる場合はスペース空けて一番下に追加しちゃいます。
HTML
CSSはコード丸コピで良かったのに対して、HTMLコードは画像や会話内容などをいじる必要があります。
まずはリンク先の2つ目のコードを丸コピして自分の記事上で、吹き出しを使いたい部分に貼り付けます。注意する点は必ずHTML編集の画面で貼り付けをして下さい。
そして、コードの中に「画像URL貼ってください」とか「会話内容はここ」とか書いているので、その部分だけ編集すればOKです。
はてなブログの場合は「プレビュー」で随時確認してやると分かりやすいです。
画像URL
上のHTML編集の際に「画像URL」を入れる必要があります。
画像URLはこの吹き出しの左のアイコンのURLになるよ
この画像のURLの入手方法になぜか結構手こずりました。
調べてみるとデスクトップにある画像は一回ウェブ上に上げないとこのURL を入手できないそうです。
なので一度吹き出しのアイコンにしたい画像をブログ上にアップします。その後に写真を右クリックして「画像URLをコピー」をクリックすれば画像URLをゲットできます。
はてなの場合は一度プレビューにしてからやるとできます。
スマホのデザイン
「え?スマホって別々に設定するの?レスポンシブなら必要ないんじゃ?」ってなぜかここで悩んで、1時間くらいGoogle先生と格闘してたんですが、結論レスポンシブデザインなら特に何もしなくて大丈夫だそうです。
別々にデザインしている人は設定する必要がありますのでご注意を。
特にスマホで別々にしていると吹き出しのサイズが合わなかったりするので、CSSとHTMLをスマホにも別途設定する必要があります。
スマホのCSS
結局僕はレスポンシブだったので必要なかったのですが、無駄に勉強してしまったので、スマホのCSSの設定をする必要がある人用に紹介しておきます。
はてなブログの場合、スマホのCSSは以下の手順で設定できます。
『デザイン』→『スマートフォン』→『ヘッダ』→『タイトル下』→『スマートフォン用にHTMLを設定する』にチェック→CSSを貼り付け
やっぱりHTMLって難しいですね。僕はしばらくレスポンシブデザインから抜け出せられなそうです。
まとめ
という事で、会話形式の吹き出しをブログで表現できるようになったので今後はじゃんじゃん使って行こうと思います。
内容によっては吹き出しの方が断然読みやすく人気も出るそうなので。
確かに長文読むよりは会話系式の方が抵抗少ないし、わかりやすいですよね。
次はLINE版なんかも挑戦してみようかな。