ブログを書いているなら、吹き出しを使って会話形式にしているブログを見て、
- 楽しそう!
- わかりやすい!
- 自分も使ってみたい!
と思ったことはありませんか?
デビっちんも吹き出しを使ってやってみたいと思っていたんですが、難しいだろうなと思って敬遠していました……。でもやっぱり、やってみたいと思って調べたら、先人の知恵のおかげで実装することができました^_^
しかし、より見た目をよくしたいと欲を出してしまってから時間がかかって大変でした。WordPress主流の中、はてなブログにそのまま使える解説記事が少なかったからです。最終的には自力でCSSコードを改変して狙った動きを実現しました。
今回、はてなブログを使用している人のお役に立てればと思い、会話形式の吹き出しの文字数を自動調整するコードと実装方法を記事にしました。
以下に当てはまる人に特におすすめです。
- 吹き出しの幅を文字数に応じて自動調整してみたいけど挫折した
- 時間が足りない
- CSSやプログラミングの知識はないけど簡単に実装したい
コピペ用のコードを記載しているので、ぜひ文字数に応じた吹き出し形式を実装し、ブログライフを楽しんでください!
- 吹き出しで会話形式にするための準備とカスタマイズ方法
- 吹き出しを出せるようになったはいいが、ちょっとダサい
- 吹き出しを文字数に応じて自動調整するCSSコード
- 詳しくないCSSコードを自力で改変できたのは、学び方を知っていたから
吹き出しで会話形式にするための準備とカスタマイズ方法
吹き出し用アイコン画像の準備
吹き出しといったら顔が写った画像を用意する必要があります。
参考にさせていただいたのは以下のサイトです。
丁寧に解説してくれているので、大変わかりやすかったです^_^
吹き出し機能の実装
調べてみたところ、吹き出しを出すには色々な方法がありましたが、HTMLの変更を最小限にしてくれている以下のサイトを参考にさせていたきました。
吹き出しを使うことに対するハードルがめっちゃ下がります!
上記サイトに従って、CSSのコードをコピペして少し変更するだけで吹き出しを出すことができます!
吹き出しを出せるようになったはいいが、ちょっとダサい
何個か試しに吹き出させてみて感じたのは、短い文字数のときに吹き出しの余白が多くて、もうちょっとカッコよくできないかなーという不満でした。
じゃー、文字数にあわせて吹き出しの幅が自動的に変わるといいね。
それができるといいね^_^
やってみよう!
吹き出しをすぐ出せたし、ちょっとググればすぐできるだろうと思っていましたが、それは甘い考えでした。
WordPress用の解説記事はバンバン出てくるのに、はてなブログの記事で探せども探せども簡単にできそうなものが見つからない……。
調査沼にハマりそうだったので、一旦諦めて自分でやってみることにしました。
吹き出しを文字数に応じて自動調整するCSSコード
CSSを少し変えてはプレビュー画面を確認、その往復をすること数十回。調べては仮説を立て、何度も失敗をくり返し、ついに狙った動きになりました^_^
そのCSSコードです!
コピペして使ってください!
吹き出しを文字数に応じて自動調整するCSS
.entry-content .l-fuki, .entry-content .r-fuki { display: table; position: relative; max-width: calc(100% - 120px); box-sizing: border-box; -webkit-box-sizing: border-box; padding: 20px; border-radius: 6px; border: 2px solid #999; box-shadow: 1px 1px 5px #aaa; background-color: #fff; z-index: 1; } .entry-content .l-fuki { margin: 20px 20% 40px 0; margin-left: auto; margin-right: 20%; } .entry-content .r-fuki { margin: 20px 0 40px 19%; } .entry-content .l-fuki::before, .entry-content .r-fuki::before { position: absolute; content: ""; top: 16px; width: 10px; height: 10px; border-right: 2px solid #999; border-bottom: 2px solid #999; background-color: #fff; z-index: 2; } .entry-content .l-fuki::before { right: -7px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .entry-content .r-fuki::before { left: -7px; transform: rotate(135deg); -webkit-transform: rotate(135deg); } .entry-content .l-fuki::after, .entry-content .r-fuki::after { position: absolute; content: ""; width: 80px; height: 80px; top: -10px; border-radius: 40px; border: 3px solid #fff; background-size: cover; background-position: center center; background-repeat: no-repeat; box-shadow: 1px 1px 5px #aaa; } .entry-content .l-fuki::after { right: -110px; } .entry-content .r-fuki::after { left: -110px; } .クラス名::after {background-image:url(画像のURL);} .クラス名::after {background-image:url(画像のURL);}
コピペした後、一部書き換えが必要
はてなブログの貼付け先は、以下の順番です。
「デザイン」
↓
「カスタマイズ」
↓
「デザインCSS」
以下の部分については、ご自身で書き換える必要があります。
67行目:クラス名
68行目:画像のURL
やり方はこちらのサイトの説明がわかりやすいです!
【はてなブログ】コピペで簡単!吹き出しを使って会話形式にするカスタマイズ方法を試してみたよ! - アラフォーママの雑記ブログ
CSSコードの改変した部分の紹介
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 | SHIROMAG
上記、めっちゃ楽にする神コードから改変した部分を参考までに記載します。
- 3行目:display: table;を追記
- 5行目:幅の表記を変更
- 17行目:margin-left: auto;
- 18行目:margin-right: 20%;
こう書くとあっさりなんですが、HTMLもCSSもそんなに詳しくないので苦戦しました。
詳しくないCSSコードを自力で改変できたのは、学び方を知っていたから
何度も失敗しつつも、仮説を立て検証することで、最後に狙った動きができるようになったのは、以下のサイトでエクセルマクロを学んだ際の教え方にあります。
「エクセルマクロ・VBA基礎編」講座と演習 | エクセルマクロ達人養成塾
有料講座ですが、価格の100倍以上得るものがあったと自信を持って言えます!
単純にエクセルマクロの書き方を学ぶだけでなはく、学び方そのものを学ぶことができたからです。実際に今回やりたかった会話形式調の機能を自分の希望通りに実装できました。
事務系の仕事だとExcel使うこと多いので業務の効率化に役立つことはもちろん、その空いた時間を新たに価値あることに注ぐことができます。
また、用意された道具を使う立場から自分で道具を作り出す方に転換することができます。
Excelの関数は便利ですが、自分でマクロを組めるようになると自由度は広がりストレスはグッと減ります。例えば、マクロの基礎を学んだら、VLookUP関数なんて面倒くさくて使えなくなります。
自分で問題を見つけ、自分で解決できるようになったら最高ですよね!
魚をくれるのではなく、魚の取り方を教えてくれているサイトがこちらです^_^
「エクセルマクロ・VBA基礎編」講座と演習 | エクセルマクロ達人養成塾
ついでに言うと、こんなのも自分で作れるようになりました!
それでは今回はこのへんで。
でびっちんでした♪