Jimdoの見出しの下線に半円を使いたい

水玉の繰り返しを制限して半円を作っています

女性向けの商品などを扱っているところでは使えるかもしれません

半円の下線として使用したい場合

<style type="text/css">

#content_area h1{

    padding: 20px 20px;
    border: 1px solid #909;
    box-sizing: border-box;
    background-image: radial-gradient(circle, #909 50%,#A1A 50%); background-size: 20px 20px;
   color: #FFF;
   text-shadow: 0 0 3px #FFF;
   border-radius: 10px;

}

</style>

CSSを書きます。

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

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

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

※見出し中に設定したい時は、h1をh2に、見出し小に設定したい時は、h1をh3にそれぞれ変更して保存すれば実現できます。バーのカラーは、ホームページで利用しているカンパニーカラーにすると配色ミスは避けられます。

バリエーション

用途は思いつかないけど面白い模様が出来たので公開(笑)

半円を思いっきりかぶせてしまいました。

<style type="text/css">

#content_area h1{

    padding: 20px 20px 20px;
    border: none; box-sizing: border-box;
    background-image: radial-gradient(circle, #FCF 70%,#FFF 72%);
    background-size: 20% 160px;
    color: #09f;
    text-shadow: none;
    background-position: bottom -80px left;
    background-repeat: repeat-x;
    border-radius: 20px;
    text-shadow: 0 0 3px #FFF;

}

</style>

電車関係とか扱っている人は面白いかな?

下線の中に水玉模様

<style type="text/css">

#content_area h1{

    padding: 0 0 30px;
    border: none;
    box-sizing: border-box;
    background-image: radial-gradient(circle, #FFF 30%,#093 35%);
    background-size: 30px 16px;
    color: #093;
    text-shadow:
none;
    background-position:
    bottom 0px left;
    background-repeat: repeat-x;
    text-align: center;

}

</style>

ありがちな水玉下線も作れます。

色を変えれば水玉模様の下線も

<style type="text/css">

#content_area h1{

    padding: 0 0 30px;
    padding: 0 0 30px;

    border: none;

    box-sizing: border-box;

    background-image: radial-gradient(circle, #F80 30%,#FFF 35%);

    background-size: 16px 16px;

    color: #c00;

    text-shadow: none;

    background-position: bottom 0px left;

    background-repeat: repeat-x;

    text-align: center;

}

</style>

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

株式会社 PIK

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

TEL.03-6433-0422