MuLife

MuLife

日常の調べ事を忘れないようメモ変わりに。。。

MuLife

吹き出しを使用して会話形式にする。はてなブログ

SPONSORED LINK

拭き出しを使用する

よく見ますねこんな感じの拭き出し。

そうですね。 やってみたかったんですが、難しそうで。。。

意外と簡単ですよ。基本コピペなんで。。。(爆)

こんな会話形式をやってみたくて調べてみました。

基本HTMLとかCSSとか全くといっていいほど触れない自分でも出来たので、誰でも出来ると思います。

というより誰でも出来るような参考サイトを作ってくれた方に感謝です!

ありがとうございます。

それではできるように設定していきましょう!

参考サイト

www.notitle-weblog.com

ありがとうございました。

コードの記述場所

デザインカスタマイズ{}デザインCSS

はてなブログカスタマイズ   はてなブログカスタマイズ

下記コードを先ほどのCSSの場所へコピペして下さい

CSSにすでにコードが書かれている場合(自分もそうでした)は、一番に下に追加すればいいと思います。

/* 吹き出しのCSS */
.entry-content .l-fuki,
.entry-content .r-fuki {
    position: relative;
    width: 80%;
    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;
}
.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;
}
@media screen and (max-width: 620px) {
    .entry-content .l-fuki,
    .entry-content .r-fuki {
        width: 70%
    }
    .entry-content .l-fuki {
        margin-right: 30%;
    }
    .entry-content .r-fuki {
        margin-left: 30%;
    }
}
@media screen and (max-width: 478px) {
    .entry-content .l-fuki::after,
    .entry-content .r-fuki::after {
        width: 60px;
        height: 60px;
        border-radius: 30px;
    }
    .entry-content .l-fuki::after {
        right: -84px;
    }
    .entry-content .r-fuki::after {
        left: -84px;
    }
}
.クラス名::after {background-image:url(画像のURL);}
.クラス名::after {background-image:url(画像のURL);}

クラス名と画像のURLを自分のサイトの情報に書き換えてください。

※先頭文字に数字は使えません。

※クラス名の前に点(ピリオド)があるので間違って消さないように。

クラス名

クラス名は自分がわかりやすい名前を自由に決めて大丈夫です。例えば、僕の場合ですと

.fukidashi1 ::after {background-image:url(画像のURL);}

.fukidashi2 ::after {background-image:url(画像のURL);}

とかにしています。

.boy ::after {background-image:url(画像のURL);}

.girl ::after {background-image:url(画像のURL);}

というように名前さえ変えればいくつでも作れます。 作った分だけ画像を用意すれば登場人物も増やせます。

画像のURL

画像のURLはHatenaFotolifeで使用したい画像を表示させ右クリックで画像アドレスをコピーでコピーできます。

カスタム画面

.fukidashi2::after {background-image:url(コピーした画像アドレスをここにペースト);}

※この場合fukidashi2にC-3POの画像を使用しました。

まとめ

クラス名:fukidashi2

画像のURL:C-3POの画像のアドレス

.fukidashi2::after {background-image:url(C-3POの画像のアドレス);}

となります。

同じようにfukidashi1にはダースベーダーの画像を使用しました。

.fukidashi1::after {background-image:url(ダースベーダーの画像のアドレス);}

となります。これで会話形式が使用できる状態になりました。

ブログでの使用方法

Markdownで使用しています。

では、実際にブログで使用してみましょう。

<p class="l-fuki クラス名">テキスト</p>

<p class="r-fuki クラス名">テキスト</p>

  • l-fukir-fuki があるので話す画像によって使い分けます。
  • クラス名には上で設定したクラス名を入れます。
  • テキストは話す言葉を入れます。

r-fukifukidashi2(C-3PO)を使用して、「こんにちは」と話してみます。

<p class="r-fuki fukidashi2">こんにちは</p>

こんにちは

l-fukifukidashi1(ダースベーダー)を使用して、「できました!」と話してみます。

<p class="l-fuki fukidashi1">できました!</p>

できました!