Jimdoの見出しに下線を引きたい

見出に下線を引く方法

シンプルな下線を使用した見出しサンプル

こんな見出しを作ってみました。

CSSを書きます。

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

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

<style type="text/css">

#content_area h1{ 

    background:none;

    line-height:1.5;

    padding:0.5em;

    margin:0 0 20px;

    border-bottom:3px solid #666;

    font-size:28px;

    color:#333;

    font-weight:bold;

}

</style>

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

上記スタイルシートの説明

/* 下記 h1をh2に変更すれば『見出の中』に対応。h3に変更すれば『見出し小』に対応 */
#content_area h1{

/* 背景を消す*/
background:none;

/* 見出しで改行があった時の行の高さ*/

line-height:1.5;


/*内側の余白 0.5文字分*/

padding:0.5em;


/*外側の余白 上方向に0 横方向に0 下方向に20ピクセル*/

margin:0 0 20px;


/*下線の指示 太さ3ぴクセス 直線 色はグレー(#666) */

border-bottom:3px solid #666;


/*文字のサイズ 28ピクセル */

font-size:28px;


/*文字色 濃いグレー(#333) */

color:#333;


/*文字の太さ
 ボールドタイプ(太文字) */

font-weight:bold;

バリエーション

下線を点線にして文字も線も緑にしてみる

こんな見出しを作ってみました。

解説

/* 太さを10px 線種を点線(dotted) 線色を青(#2e8b57) */
border-bottom:10px dotted #2e8b57;


/* 文字の大きさも大きくする 40px */

font-size:40px;

/* 文字の色も青(#2e8b57) */

color:#2e8b57;

下線を2重線にしてみる

こんな見出しを作ってみました。

解説
/* 太さは3px 線種を二重線にdouble 線色はグレーのまま(#666) */ 

border-bottom:3px double #666;

下線の両端に角丸をつけてみる

こんな見出しを作ってみました。

解説
/* 角丸を追加 */ 

border-radius: 20px;

下線だけでも色々なバリエーションが楽しめますね。
どんな色がいいかな?って悩んだ時には、原色大辞典がオススメです。
⇒ 原色大辞典のページ

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

株式会社 PIK

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

TEL.03-6433-0422