Jimdoで斜めに切り取る見出し

見出し中、見出し小、などに利用すると良いかもしれませんね。

見出し大に共通した縦方向のバーをつけます

斜めに切り取る見出し

CSSを書きます。

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

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

<style type="text/css">

#content_area h1{

    background: linear-gradient(45deg,#333,#333 5%,#d2b48c 5%, #d2b48c 75%,#333 75%);
    border-bottom: 5px groove #C00;
    padding: 20px 1.5em;
    border-top: 3px double #ccc;
    font-size: 30px;
    border: 2px solid #d2b48c;
    color: #fff;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
    box-sizing: border-box;

}

</style>

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

※見出し中に設定したい時は、h1をh2に、見出し小に設定したい時は、h1をh3にそれぞれ変更して保存すれば実現できます。

バリエーション

線種を増やせば、リボンを四隅にかけたような効果を出すことも出来ます。

フチにリボンをかけたような見出し

background: linear-gradient(45deg, #d2b48c,#d2b48c 2%,#333 2%,#333 5%,#d2b48c 5%, #d2b48c 95%,#333 95%,#333 98%,#d2b48c 98%);

フチにリボンをかけたような見出し

background: linear-gradient(90deg, #d2b48c,#d2b48c 2%,#333 2%,#333 5%,#d2b48c 5%, #d2b48c 95%,#333 95%,#333 98%,#d2b48c 98%);

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

株式会社 PIK

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

TEL.03-6433-0422