Jimdoの見出し背景にドットをつけたい

水玉の応用編です

シンプルなドットは制作、設計などの見出しの背景に使用すると効果的かも

背景をドットにする

CSSを書きます。

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

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

<style type="text/css">

#content_area h1{

   padding: 20px 20px;

   border: 1px solid #ccc;

   box-sizing: border-box;

   background-image: radial-gradient(circle, #eee 20%,#FFF 20%);

   background-size: 5px 5px;

   color: #555;

   text-shadow: none;
}
</style>

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

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

バリエーション

ドットの間隔を空けたい

   background-size: 10px 10px;

上記にさらにシャープさを出すため下線のボーダーをひと工夫

ドットの間隔を空けたい

   border-bottom: 5px groove #C00; /* 追加 */

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

株式会社 PIK

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

TEL.03-6433-0422