読者です 読者をやめる 読者になる 読者になる

フキダシで会話形式のブログが書ける簡単CSS

はてなブログカスタム

f:id:george-gogo:20160223181312p:plain

こんにちは!いつの間にか14回目のカスタム記事!今回はブログでよく見かける『会話形式』の記事を簡単に実現させるCSSを作りました!ぜひご覧あれ!

はじめに

参考記事としてこちらの記事を参考にいたしました。

akiueo (id:akiueos)さんのCSSも素晴らしいデザインですが、レスポンシブに未対応というのと、会話のアイコン画像が正方形の画像を使用しないと丸く表示されないので、この2点を改良して今回制作しました。

上記の記事内に「どなたか改良版をお願いします。」と書かれているので正々堂々と改良いたします!

追記:少しCSSを修正しました。(2/24)

完成系

 

こんにちはー!じょーじでーす!今回は会話形式のCSSを作ったよー!

 

あら、こんにちは、じょーじさん。

私はまったくHTMLとかCSSを理解してないけど使えるかしら?

 

うん!大丈夫!極限まで簡単に作ったぜ!(僕のできる範囲で)

コピペで簡単に使えるから是非使ってね!

 

という茶番劇を繰り広げることができますぞ!

まずはCSSをコピペしよう!

はてなブロガーの方はいつも通り「デザイン」「カスタムCSS」にペロっと貼り付けてくださいな。その他のブログサービスやホームページの方は各自のスタイルシートに貼り付けてください。

スマホ版のデザインを分けて設定している方は、しっかりスマホ用のカスタムページにもCSS全文を貼り付けてくださいね!

/*****ここから会話のCSS*****/
.talk-wrap{
display: block;
clear: both;
margin:0 auto 3px auto;
}
.talk-wrap p{
margin:0;
}
.left-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius: 50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:left;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*左のアイコンの影の設定*/
border: 3px solid #fff; /*左のアイコンの枠の設定*/
margin-bottom: 10px;
}
.talk-left{
float:right;
position: relative;
background: #fff; /*左の会話の背景色*/
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 70%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa; /*左の会話の影の設定*/
margin-bottom: 10px;
}
.talk-left:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-right-color: #666;
position: absolute;
left: -20px;
top: 25%;
margin-top: -9px;
}
.talk-left:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-right-color: #fff;
position: absolute;
left: -16px;
top: 25%;
margin-top: -8px;
}
.right-icon{
width: 100px;
height: 100px;
border-radius: 50%;
-webkit-border-radius:50%;
background: no-repeat;
background-size: 180%;
background-position: center;
float:right;
display:inline-block;
box-shadow: 1px 1px 5px #aaa; /*右のアイコンの影の設定*/
border: 3px solid #FFF; /*右のアイコンの枠の設定*/
margin-bottom: 10px;
}
.talk-right{
float:left;
position: relative;
background: #fff; /*右の会話の背景色*/
border: 2px solid #666;
padding: 3%;
border-radius: 10px;
width: 70%;
margin-top:10px;
box-shadow: 1px 1px 5px #aaa; /*右の会話の影*/
margin-bottom:10px;
}
.talk-right:before {
content: "";
display: inline-block;
border: 10px solid transparent;
border-left-color: #666;
position: absolute;
right: -20px;
top: 25%;
margin-top: -9px;
}
.talk-right:after {
content: "";
display: inline-block;
border: 9px solid transparent;
border-left-color: #fff;
position: absolute;
right: -16px;
top: 25%;
margin-top: -8px;
}
.talk-end{
clear:both;
}
/*****レスポンシブ設定*****/
@media screen and (max-width: 480px){
.left-icon{
width: 80px;
height: 80px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 80px;
height: 80px;
}
.talk-right{
width: 65%;
}
}
@media screen and (max-width: 380px){
.left-icon{
width: 60px;
height: 60px;
}
.talk-left{
width: 65%;
}
.right-icon{
width: 60px;
height: 60px;
}
.talk-right{
width: 65%;
}
}

ブログでの使い方

<!--左の会話-->
<div class="talk-wrap">
<div class="left-icon" style="background-image: url('ここに左側の人の画像のURLを貼って下さい!');"></div>
<div class="talk-left">
<p>会話内容をここに記述してください!</p>
</div>
</div>
<!--左はここまで-->
<!--右の会話-->
<div class="talk-wrap">
<div class="right-icon" style="background-image: url('ここに右側の人の画像のURLを貼ってください!');"></div>
<div class="talk-right">
<p>会話内容をここに記述してください!</p>
</div>
</div>
<!--右はここまで-->
<!--↓会話部分の最後にこれを必ず付け加えて↓-->
<div class="talk-end"></div>
  • まずこれをブログのHTML編集での会話を挿入したい箇所に貼り付けてください。
  • 左の会話に画像URLを貼り付けてください。画像のURLの取得方法はこちらの記事で。
  • 会話の内容を書いてください。普段通りに太字や文字色なんかも使えます。
  • 右の会話にも同じことをやって下さい。
  • 会話をさらに伸ばすときは、最後の行の『↓会話部分の~』の上まで、つまり左と右の会話部分のみをコピペで増やして下さい。
  • 最後には必ず↓会話部分の~』を付け加えてください!

簡単解説(飛ばして良し!)

akiueoさんとの最大の違いは、アイコン画像を背景で表示していること。これによって元画像の形に依存しないで円で画像を表示しています。

まとめ

 

ね?簡単でしょ?パッと見でコードが長いと感じるけどさ、CSSは一回貼り付けちゃえば終わりだし、HTMLも画像リンク張って文字を書くだけよん。

 

ほんとね!このコードをメモ帳かなんかに保存しておけばいつでも使えるね!

 

そうそう、その通りだよあおいちゃん

でもどうして僕は話し相手に君を選んだのかね。いや、可愛いんだけどさ。なんか僕キモいよね?

 

おしまい。

※もし不具合があれば教えてください、高速で修正します。

▼もしも勉強するならこの本がマジでおすすめ。学校で使ってました。

こんな記事も書いてるよん。

ブログにおすすめのフォントサイズと行間を徹底解説【簡単CSS】
【保存版】簡単コピペの"続きを読む"ボタンデザイン集
直帰率対策!スマホのヘッダーに注目記事を