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:1px solid #ccc;

    font-size:28px;

    color:#333;

    font-weight:bold;

}

</style>

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

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

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

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

line-height:1.5;


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

padding:0.5em;


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

margin:0 0 20px;


/* 線の指示 太さ1ピクセル 直線 色は薄いグレー(#ccc) */

border:1px solid #ccc;


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

font-size:28px;


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

color:#333;


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

font-weight:bold;

バリエーション

文字色と左側の線の色を変更してみる(左側の線は少し太く)

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

解説
/* 文字色もエンジ色に #b94047*/
color: #b94047;

/* 追加 左側の線を太くして5px 色を変える(エンジ色)
#b94047 */
border-left: 5px solid #b94047;

線を角丸にして少し立体感を出してみる(柔らかくなりますね)

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

解説

/* 角丸を追加 */
border-radius:6px
;

/* 追加 下線と右線を太くして立体間を出す */
border-right:3px solid #888;

border-bottom:3px solid #666;


下線を2重線にしてみる

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

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

border-bottom:5px double #666;

文字を中央合わせにして両端を丸くしてアクセントを入れてみる

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

解説
/* 追加 文字を中央合わせにする */
text-align:center;

/* 追加 両側に角丸を入れる
border-radius:30px;

/* 追加 両側を二重線にしてアクセント フォントと線の色を変えても面白いです。 */ 

border-left:8px double #ccc;
border-right:8px double #ccc;

上記のバリエーションで線や文字の色を変更しドットに変えた場合

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

解説
/* 線の色と線種(点線)に変える 線を外しても面白いです。  */
border:1px dotted 
#941f57;

/* 文字色を変える */
color:#941f57;


/* 追加 文字を中央合わせにする */
text-align:center;

/* 追加 両側に角丸を入れる
border-radius:30px;

/* 追加 両側を二重線にしてアクセント */ 

border-left:8px dotted #941f57;
border-right:8px dotted #941f57;

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

線種の参考資料

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

solid
実線

double
二重の線

groove
谷型の線

ridge
山型の線

inset
凹型の線

outset
凸型の線

dotted
点線

dashed
破線

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

株式会社 PIK

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

TEL.03-6433-0422