Jimdoの見出しに水玉模様をつけたい

水玉の大きさや色を簡単に自由に設定できます

グラデーションが付けられない枠線の代わりにバックグラウンドに枠線を設定

背景に水玉模様を使った見出し

CSSを書きます。

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

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

<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>

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

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

バリエーション

水玉の大きさを変える

背景に水玉模様を使った見出し

background-size: 40px 40px;

上記で色を変えてみた

ほんのり香る色

border: 1px solid #ffe4c4;

radial-gradient(circle, #faf0e6 50%,#fffafa 50%);

color: #db7093;

text-align:center; /* 追加 */

水玉のスペースを空ける

おさかな図鑑

<style type="text/css">

#content_area h1{

    padding: 20px 20px;
    border: 3px solid #0060B2;
    box-sizing: border-box;
    background-image: radial-gradient(circle, #0090F2 30%,#0090E2 33%);
    background-size: 50px 50px;
    color:#FFF;
    font-size: 40px;
    text-align: center;

}

</style>

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

株式会社 PIK

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

TEL.03-6433-0422