はてなブログカスタマイズ｜コメント欄をCSSで吹き出し風にしてみた

HTMLもCSSも全くの初心者のmonoです。皆さんこんにちわ♪

今日は、はてなブログのコメント欄をCSSを使ってよくある吹き出し風のデザインへ変更してみました。

↑目指す出来上がりはこんな感じです。

手順その1 三角形を作る
コメント欄をCSSで吹き出し風にしてみる
雑感

手順その1 三角形を作る

CSSには吹き出しを作るようなコマンドはないので、三角形と枠を重ねて吹き出し風の背景を作ります。

CSSで三角形を作る方法ですが、これが最初意味が全然わかりませんでした。

borderを使って作るのですが、普通はborderって外枠を書くときに使いますよね。

その外枠のborderの幅を広げて、必要のないところをtransparentで隠して三角形を表現します。

文章に書いていてもよくわからないと思うので、少し図形を使って説明しますね。

ボーダーが幅広の四角

少し幅広の枠はこんな感じに作ります。

.sankaku p:before{
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    margin: 100px;
    border-style: solid;
    border-color: #EDF3F7 #000 #343434 #999;
    border-width: 10px 10px 10px 10px;
}

高さと幅が50pxで、ボーダーの幅が10pxです。

高さと幅を0にする

高さと幅を0にすると中身がなくなってボーダーだけになって、三角形ができます。

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: #EDF3F7 #000 #343434 #999;
    border-width: 25px 25px 25px 25px;
}

必要のない三角形をtransparentで消してしまう

必要のないところをtransparentで消してしまいます。

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: #EDF3F7 transparent transparent transparent;
    border-width: 25px 25px 25px 25px;
}

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
    border-width: 25px 25px 25px 25px;
}

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: transparent transparent #343434 transparent;
    border-width: 25px 25px 25px 25px;
}

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: transparent transparent transparent #999;
    border-width: 25px 25px 25px 25px;
}

こんな感じで三角形が出来上がります。

コメント欄をCSSで吹き出し風にしてみる

今回は下向きの三角形を使って吹き出し部分を作ります。pタグの擬似要素beforeに三角形を設定します。

.comment-content p:before {
    content: "";
    position: absolute;
    width: 0px;
    height: 0px;
    margin: auto;
    border-style: solid;
    border-color: #EDF3F7 transparent transparent transparent;
    border-width: 10px 10px 0 10px;
    left: -8px;
    top: 5px;
}

pタグには普通にbackground-colorを設定します。

.comment-content p {
    margin: 0 0 .6em 0;
    padding: 15px;
    background-color: #EDF3F7;
    border-radius: 15px;
    position: relative;
}

できあがり♪

雑感

今まで、何気に見ていたデザインでもCSSで作ろうとしたら結構大変なんですね。勉強になりました。

今日覚えたCSS

transparent

monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。