Jimdoの見出しを良く見かけるアノ形に

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

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

見出しの前にあのバーをつけてみました。

前にバーのついているあの見出しよく見かけますよね?

通常は、画像を使っていることが多いのですが、スタイルシートだけでも出来てしまいます。
バーに丸みを付けたくなければ、border-radiusの1行を削除してしまえば実現できます。

CSSを書きます。

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

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

<style type="text/css">

#content_area h1{

    padding:0.2em 30px 0.2em;

    margin:0 0 20px;

    line-height:1.5;

    font-size:24px;

    font-weight:bold;

    border:1px solid #ccc;

    background:#FFF;

    border-radius:6px;

    position:relative;

}


#content_area h1:before{

    position:absolute;

    left:10px;

    top:15%;

    content:"";

    display:block;

    height:70%;

    width:10px;

    border-radius:6px;

    background:#093;

    background:linear-gradient(#093 50%,#082 50%);

}

</style>

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

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

線種の参考資料

以下の線種の指定方法 ⇒ border:10px #b0c4de 線種指定;

solid
実線

double
二重の線

groove
谷型の線

ridge
山型の線

inset
凹型の線

outset
凸型の線

dotted
点線

dashed
破線

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

株式会社 PIK

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

TEL.03-6433-0422