Jimdoの見出しを流行の付箋風にしたい

右端とかがちょっとだけペロっとめくれちゃった感じ見出しを作ります

見出し中、見出し小、などにも利用が可能ですね。

最近流行の付箋のような見出しです!

最近、良く見かけるようになった、付箋風の見出し。

ネットサーフィンをしている最中に、見かけることが多くなりました。
少し派手目な色合いを使っもなんとなく様になってしまうのが、この付箋風の見出しです。

CSSを書きます。

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

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

<style type="text/css">

#content_area h1{

    padding:0.5em 30px 0.5em;

    margin:0 0 10px;

    font-size:24px;

    font-weight:bold;

    background:#ffffa3;

    background:linear-gradient(135deg,#EFEF93,#FFFFA3 10%,#FFFFA3 90%,#EFEF93);

    position:relative;

    box-sizing:border-box;

    border-radius:0 0 5px 0;

    border:1px solid #EFEF93;

    line-height:1.5;

}

#content_area h1:before{

    position:absolute;

    right:5px;

    bottom:-16px;

    content:"";

    display:block;

    width:30%;

    height:15px;

    background-image:linear-gradient(4deg,#fff 60%,#ccc 95%);

    background-repeat:no-repeat;

}

</style>

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

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

バリエーション

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#EFB479,#FFC489 10%,#FFC489 90%,#EFB479); border: 1px solid #EFB479;

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#79EF79,#89FF89 10%,#89FF89 90%,#79EF79); border: 1px solid #79EF79;

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#79EFB4,#89FFC4 10%,#89FFC4 90%,#79EFB4); border: 1px solid #79EFB4;

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#7979EF,#8989FF 10%,#8989FF 90%,#7979EF); border: 1px solid #7979EF;

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#EF79EF,#FF89FF 10%,#FF89FF 90%,#EF79EF); border: 1px solid #EF79EF;

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#EF7979,#FF8989 10%,#FF8989 90%,#EF7979); border: 1px solid #EF7979;

和色でもキレイですね

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#E8E4D6,#F8F4E6 10%,#F8F4E6 90%,#E8E4D6); border: 1px solid #E8E4D6;

最近流行の付箋のような見出しです!

background: linear-gradient(135deg,#5F413C,#6F514C 10%,#6F514C 90%,#5F413C); border: 1px solid #5F413C;
color:#FFFFFF;

配色の事で悩んだら原色大辞典

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

株式会社 PIK

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

TEL.03-6433-0422