JIMDOの見出しを吹き出し風にしたい

シンプルな線で全体を囲ったふきだし風サンプル

フキダシ風の見出しが完成!!

CSSを書きます。

以下のコードを下のタグの貼り付け方に沿って貼り付けます。

※すでに<style></style>が存在していた場合は、赤い文字の部分だけをその中に入れます。
保存したあと、ページの再読み込みをしてください。(キーボードのF5ボタンを押す)

<style type="text/css">
#content_area h1{
    padding:1.5em;
    line-height:1.5;
    margin:0 0 2em;
    border:7px solid #900;
    font-size:32px;
    text-align:center;
    color:#333;
    font-weight:bold;
    border-radius:100%;

    background:#fff;

    position:relative;
}

    

#content_area h1:before{
    position:absolute;
    bottom:-1em;
    right:20%;
    content:"";
    display:block;
    border:7px solid #900;
    width:60px;
    height:60px;
    background:#fff;
    border-radius:100%;
}


#content_area h1:after{

    bottom:-2em;
    right:10%;
    position:absolute;
    content:"";
    display:block;
    border:7px solid #900;
    width:30px;
    height:30px;
    background:#fff;
    border-radius:100%;

}

</style>

▼ タグの貼り付け方はここ マウスを当てると画像が開きます。

カラムに入れて横を半分のサイズにしてみました。

簡単ビックリフキダシ風見出し!

線の色を変更したり、太さを変えたりするだけで、バリエーションが出来上がります。
是非試してみてください。
また、横サイズを縮めても、ふきだし風のままを維持できます。


この記事がいいなと思ったらメールマガジンに登録していただけると嬉しいです。
メールアドレスを入力して登録ボタンを押してください。

株式会社 PIK

〒108-0075 港区港南3-4-12

TEL.03-6433-0422