裏の高速大量回転法

KTK(高速大量回転)法のやり方、習得へのヒントを中心に発信していきます

【はてなブログ】会話形式の吹き出しを文字数に応じて自動調整できるようにしてみたよ!

f:id:deviching:20190911230456j:plain

高速大量回転法の実践家デビっちんです。

 

吹き出しを使って会話形式にしているブログ、見ていて楽しそうで、自分も使ってみたい!と思ったことありますよね?

 

難しいことやっているのかなと思っていたら、先人の知恵のおかげで以外と簡単にできました^_^

 

しかし、吹き出しを出すのは簡単でしたが、より見た目をよくしたいと欲を出してしまってからが大変でした(>_<;

 

同じように、吹き出しの幅を文字数に応じて自動調整してみたいけど挫折した、時間が足りない、簡単に実装したい、という人のお役に立てればと思い、記事にしました。

 

今回、はてなブログで会話形式の吹き出しを文字数に応じて自動的に調整するカスタマイズ方法をお伝えしています。

 

吹き出しで会話形式にするカスタマイズ方法

吹き出し用アイコン画像の準備

吹き出しといったら顔が写った画像を用意する必要があります。

参考にさせていただいたのは以下のサイトです。

mamazakki.hatenablog.com

 

丁寧に解説してくれているので、大変わかりやすかったです^_^

 

吹き出し機能の実装

調べてみたところ、吹き出しを出すには色々な方法がありましたが、HTMLの変更を最小限にしてくれている以下のサイトが神でした^_^

www.notitle-weblog.com

 

吹き出しを使うことに対するハードルがめっちゃ下がります!

 

上記サイトに従って、CSSのコードをコピペして少し変更するだけで吹き出しを出すことができます!

 

吹き出しを出せるようになったはいいが、ちょっとダサい

何個か試しに吹き出させてみて感じたのは、短い文字数のときに吹き出しの余白が多くて、もうちょっとカッコよくできないかなーという不満でした。

 

じゃー、文字数にあわせて吹き出しの幅が自動的に変わるといいね。

 

それができるといいね^_^
やってみよう!

  

吹き出しをすぐ出せたし、ちょっとググればすぐできるだろうと思っていましたが、それは甘い考えでした。

 

探せども探せども簡単にできそうなものが見つからない……。

  

調査沼にハマりそうだったので、一旦諦めて自分でやってみることにしました。

 

吹き出しを文字数に応じて自動調整する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もそんなに詳しくないので苦戦しました。

仮説を立て、試しては失敗して、また次の仮説を検証することで大変勉強になりました。

 

自分で調べて、何度も失敗して、最後は狙った動きができるようになったのは、以下のサイトでエクセルマクロを学べたお陰です。 

「エクセルマクロ・VBA基礎編」講座と演習 | エクセルマクロ達人養成塾

有料講座ですが、価格の100倍以上は得るものがあったと自信を持って言えます!

 

単純にエクセルマクロの書き方を学ぶだけでなはく、学び方そのものを学ぶことができます。

 

自分で問題を見つけ、自分で解決できるようになったら最高ですよね!

魚をくれるのではなく、魚の取り方を教えてくれます。

 

こんなのも自分で作れるようになりましたよ^_^

www.kousokutairyoinfo.com

 

それでは今回はこのへんで。
でびっちんでした♪