うえのブログ

思いつくままに、書くのみです(^o^)

はてなブログで使える会話風吹き出し導入と簡単なカスタム方法を記載するよ

f:id:uenoyou111:20180320215210j:plain

【2018年3月20日更新】

会話風に掛け合いがあると楽しいですよね、うえの(id:uenoyou111)です。

 

他のブログでよく見かける会話風の吹き出しを作るCSSを導入してみました。

 

CSSには全く詳しくないので、なんかここ変更してみたら出来た!という初心者向けの内容です。

 

導入の仕方から簡単なカスタマイズまで乗せて行きます。

 

 

会話風の吹き出し設定方法

 

まず参考にしたのはシロマ (id:shiromatakumi)さんのこちらの記事。

 

www.notitle-weblog.com

 

色々な方が参考にされていて、とてもわかり易く説明されています。きちんとコピペして手順通りにやればしっかり出来ます。

 

私はちょっと変更して使ったので、変更箇所も含めてコードを載せます。

 

CSS

 

まずは下記のコードをコピーし、メモ帳とかに貼り付けます。

 

 

メモ帳に貼り付けた状態で、一番下のクラス名画像URLを変更していきます。

 

クラス名変更

 

このクラス名を使って吹き出しにさせたい文章を作るので、分かりやすい名前を付けましょう。

 

私の場合、自分のアイコンを使う時はuenoとしました。

 

上司さんを載せる時はjousiki、jousido、jousiaiというように、喜怒哀楽で振り分けています。

 

画像URL

 

次に画像URLを取得していきます。

 

特に使用したい画像がない場合は、フリー素材のいらすとやさんを使うといいかもしれません。

 

www.irasutoya.com

 

良いものが見つかったらペイントソフト等で顔部分を切り取りましょう。

 

そしてはてなブログへログインし、記事を書くにて新規記事を作成する画面に移ります。

 

f:id:uenoyou111:20180320213216j:plain

 

図のように、普通に画像を投稿します。上にある編集見たままの隣、HTML編集へ切り替えます。

 

f:id:uenoyou111:20180320213634j:plain

 

するとこんな表示になるので、図の様にhttps以降のコードを手前までコピーします。

 

画像の種類によってjpgだったりpngだったりするので、お間違えのないよう。

 

これでURLの取得は完了です、メモ帳に貼り付けた一番下のコード(画像URL)のカッコ内文字を消してURLをまるごと貼り付けで完了です。

 

画像を増やす場合は、同じ様にコードを増やしていけばどんどん使えます。クラス名の重複さえなければOKです。

 

変更が終わったらはてなブログへログイン後、自分のIDをクリック。デザインを選択します。

 

f:id:uenoyou111:20180320232858j:plain

 

スパナマークをクリックし、デザインCSSに変更したコードをまるごと貼り付けして準備は完了です。

 

f:id:uenoyou111:20180320233042j:plain

 

 

使い方

 

下記のHTMLコード、クラス名の部分を先程設定した名前に変更します。

 

 

l-fukiのコードを使うとアイコン画像が右側に配置されます。r-fukiは左側に配置されます。

 

まず会話風にしたい文章を打ち込み、HTML編集モードに切り替えます。

 

f:id:uenoyou111:20180320220330j:plain

 

この左側のpタグを消し、先程コピー&変更したコードを貼り付けていきます。

 

f:id:uenoyou111:20180320220520j:plain

 

適当に交互に配置してみました。これをプレビューに移行させるとこんな感じになります。

 

f:id:uenoyou111:20180320220630j:plain

 

なので、ある程度メモ帳にコードを作っておけば、必要に応じてHTML編集で貼り付ける状態になるかと思います。

 

ちょっと手間と感じる場合

 

Chromeをお使いであれば、拡張機能を使ってカンタンに書くことが出来ます。

 

詳しくはシロマ (id:shiromatakumi)さんが解説して下さっているので、下記の見たままモードでChrome拡張機能を使ってみようを参考に。

 

www.notitle-weblog.com

 

簡単なカスタマイズ方法

 

そのまま紹介したコードを使うと、先ほどの白地に若干浮き上がったような丸アイコンで表示がなされます。

 

私はテーマカラーに合わせて背景色を付けたかったのと、浮き上がり効果を消したくて色々いじくって見ました。

 

どこを消したらどんな風になるか?を記していきます。

 

ボックスシャドウの影

 

吹き出しとアイコンについている影の部分ですね。

 

f:id:uenoyou111:20180320222517j:plain

 

上で説明したCSSの左側に番号が振っているので、55番にあるbox-shadowの一列を消すとアイコンの囲みがなくなります。

 

f:id:uenoyou111:20180320223338j:plain

吹き出しの浮き出しが余計に目立ちますね、このbox-shadowが浮き出しの効果を発揮するみたいなのでお次は11番を消してみます。

 

f:id:uenoyou111:20180320223628j:plain

 

かなりスッキリしました。ちなみにbox-shadowの横に書かれている数字で影の強さを変えられるので、もっと強調させたい方はいじってみると良いかもしれません。

 

枠線と色の変更

 

アイコンは枠を外してしまいましたが、51番の#FFFを変えると色が変更できます。

 

f:id:uenoyou111:20180320224829j:plain

 

青にしてみました。同じく51番の3pxの数字を変えると太さが調節できます。

 

f:id:uenoyou111:20180320225006j:plain

 

6pxにしてみました。色によって微調整が必要なところなので、活用できるかと思います。

 

ちなみにカラーコードはこちらを参考にしてください。

 

www.colordic.org

 

カラーコードは#以降の数字6桁になります、CSSコードには数字の後ろにセミコロン(;)が付くので、こちらは消さないようにご注意くださいまし。

 

吹き出しの枠線は10番になりますので、アイコンの時と同じくカラーコードとpxで枠の太さを変更できます。

 

※アイコンの背景色は画像を貼り付けているので、色を変えたい場合は元々の画像に色をつけなくてはなりません。

 

吹き出し内の文字色

 

12番のbackground-color以降にあるカラーコードを変更します。

 

f:id:uenoyou111:20180320225858j:plain

 

あら、ひし形に白くなっちゃってる。多分、記号かなにかを乗せてるのかな?

 

こちらの色は30番のbackground-colorのカラーコードを変更すれば変わります。

 

f:id:uenoyou111:20180320230715j:plain

 

完成形

 

吹き出しの枠線も要らないなぁ~、という事で10番、28番、29番のカラーコードを真っ白にしました。

 

f:id:uenoyou111:20180320231312j:plain

 

全体図はこんな感じ。

 

f:id:uenoyou111:20180320231410j:plain

 

初期の頃と比べて、かなり柔らかくなりました。カラム外の色と合わせてちょっとお洒落っぽい感じですよね。

 

 

 

まとめ

 

導入時はなぜか画像が表示されなかったりしてかなり困惑しました(;゚∀゚)

 

画像を引っ張る時によく注意して、消しちゃいけないもの消してないか注意しながら貼り付けを行うべきですね。

 

あと、こまめにメモ帳とかにバックアップを取っておけばミスった段階でもとに戻せます。

 

多少面倒ですが、結局全部やり直しになるよりはマシです(;´∀`)

 

楽しいカスタマイズライフを\(˘ω˘)/

 

 

 

ではでは(`・ω・´)ゞ