プロの主婦になりたい

家計管理やポイ活などを学んで、主婦のエキスパードになりたい人のブログです。

ブログカスタマイズ②【吹き出しを使って会話形式にするのに試行錯誤した話】

f:id:mtoki:20190331222208j:plain


こんばんは!トキです。

昨日はブログカスタマイズに苦戦しておりました~(;^ω^)
以前もちょろっとやりたいと言っていた、吹き出しにチャレンジ!!

1.吹き出しに使う画像を用意する


f:id:mtoki:20190313162537p:plain:w100f:id:mtoki:20190314182607p:plain:w100f:id:mtoki:20190314182600p:plain:w100f:id:mtoki:20190314182620p:plain:w100

使うかわからないけど、使いたくなった時のために喜怒哀楽の表情を用意。
買ったものの使っていなかったペンタブを使うときが、ようやく来た!!
もちろん似てません。可愛く描きました。
色白な女性が羨ましいので、色白に描きました。


f:id:mtoki:20190314182634p:plain:w100

私と会話してくれる相手は、インコにしました。
鳥のトキにしようと思ったんですが、まったく可愛く描けないし、難しいのでインコ。
トキよりインコのほうが実は好きです。

どのくらいのサイズが良いのかわからず、というか考えずに500×500で作成しましたが、問題はなさそうです。


色んなブログを見ていると、プロやセミプロみたいな方に
描いてもらっている方もいらっしゃるようです。

フリー素材とか、アイコンを作るアプリなんかを使っても良いですね。

2.使用するCSSを決め、コピペするだけ!


まず、検索するとかなりの確率で参考サイトとして掲載されている、シロマさんという方のブログ。
設定もわかりやすいし、使うときも簡単で良いと思います。


www.notitle-weblog.com


こちらの手順通りに進めるだけで、簡単に設定できることができました♪
とても丁寧に解説されていてはてなフォトライフ(この存在すら知りませんでした)へのリンクや、画像URLのコピペの仕方等も載せてくださっているので、特に悩むことなく設定することができました!

このままでも良いけど、吹き出しの余白が気になるので直してみた


こんにちはー

こんにちはー


短文のときの、吹き出しの余白が気になってしまいました。

文章の長さに合わせて、可変できるものにしたい。


saruwakakun.com


よくお世話になっているサルワカさんのサイトで、文字数に応じて幅を可変できるコードの存在を知りました。
【display:inline-block】これを追加すれば、可変できるようになるはず・・・

なんですが、一行追加するだけでは、できませんでした( ノД`)シクシク…

更に、試行錯誤してみる・・・

あれこれ試していると・・・


f:id:mtoki:20190317144928p:plain


直したのは、冒頭です。ただし、不完全です。
下記に難点も書いているので、それでも良い方は使ってください(^-^;

元のコード

/* 吹き出しCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
position: relative;
width: 80%;

修正したもの

/* 吹き出しCSS */
.entry-content .l-fuki {
position: relative;
display: inline-block;
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 .r-fuki {
position: relative;
display: inline-block;
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;
}

赤字の部分が追記した部分です。
吹き出しのlとrをそれぞれ【display: inline-block;】で指定しないと、ダメでした。

【-webkit-box-sizing: border-box;】の「-」は半角の「‐」です。
はてな記法で書いているもので、半角のまま入力すると箇条書きになってしまう(;^ω^)

吹き出しの幅が可変するように設定したときの難点


f:id:mtoki:20190316190858p:plain


難点は、右画像:左吹き出しの配置です。
右画像の位置がコメントの長さによって変わってしまいます。

それに、スマホから見た場合には問題ないですが、パソコンから見ると、
短文のときに近すぎて変かな~と思ったりして(^-^;

ただ、これを右寄せにしてしまうと、文字も右寄せになってしまうんですよね。
文字だけ左寄せのままにする方法がわからず、断念しました。


左画像:右吹き出しの配置しか使わないよーって方には使える仕様かと思います。

しばらくブログを続けてみて、シモブクレちゃんの出番があまりないようだったら、
今回試したCSSを使ってみようかなと思っています!

【display:inline-block】のコードは吹き出し以外にも応用できるので、知っておくと便利そうです。

■ HTMLタグを簡単に入力する方法


個人的に、はてな記法が便利だなと思って使っているんですが、
はてな記法だと、HTMLタグを入れないといけません。
毎回メモからコピペするのは面倒なので、私はパソコンの辞書ツールにHTMLタグを登録しています。


f:id:mtoki:20190313162537p:plain:w100

この画像で吹き出しを使いたいときには、「えがお」で登録してあるので、
えがお」と入力するだけで、HTMLタグに変換されるので便利です。

ちなみに、ボックスやマーカーを使うときのタグも同様に使っています。
みなさんはどうしているんでしょうか??
少し気になっていたことであります(;^ω^)


色を変更したり、影を消す方法


このままのデザインも素敵だけど、オリジナリティを少し出そうかと思って調べてみたところ、
丁寧に載せてくださっている方がいましたよ~♪

どこを直せば良いか、丁寧に解説してくださっています。
色を変えたくなった時には参考にさせていただきます!


www.uenoyou.net



番外編:画像の下に名前を入れることもできる


色々なブログを見ていると、画像の下に名前を入れている方がいますよね。


てゆーか君、誰?

僕はシモブクレちゃんだよ

そう。シモブクレちゃんですw
このインコの名前まで決めていたので、ぜひ取り入れたかったのですが、
私が参考にさせていただいた、シロマさんのCSSを改変して名前を入れている方は見つかりませんでいた。
簡単に見つかると思って、先走ってしまったw


ただ、別のCSSコードを使用して、名前まで入る吹き出しを作っている方がいたので、紹介します。

fantastech.net


しかもしかも!!

読者さんの要望に応えて、私がやりたかった

「文字数によって吹き出しの幅を可変できるようにする方法」まで公開してくださっています!


fantastech.net


ならこっちの吹き出し使えばいいのでは?って感じなんですけど、
私のブログでは崩れてしまってうまく表示されなかったので、早々と諦めてしまいました(^-^;

でもカスタマイズするのは楽しいです(^▽^)/