Jimdoの見出しをグラデーションにしたい

最近の傾向としては見出し背景にグラデーション排除の方向にある

それでもグラデーションを実現したい人のために

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

CSSを書きます。

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

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

<style type="text/css">

#content_area h1{ 

    font-weight: bold;
    font-size: 28px;
    padding: 0.7em;
    background: #f0f0f0;
    background: linear-gradient(#fff 0%,#f0f0f0 100%);
    border: 1px solid #ccc;
    line-height:1.5;

    margin:0 0 20px;

    color:#333;

}

</style>

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

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

/*  文字色を指定 */

    color:#333;

/*  文字の太さを指定 */

    font-weight: bold;


/*  文字の大きさ指定 */

    font-size: 28px;


/*  内側の余白を指定 */

    padding: 0.7em;

 

/*  グラデーションに対応していないブラウザのために背景を指定  */

    background: #f0f0f0;


/*  グラデーションを指定 白(#fff) から薄いグレー(#f0f0f0)に */

    background: linear-gradient(#fff 0%,#f0f0f0 100%);


/*  枠線を指定 */

    border: 1px solid #ccc;


/*  改行した時の行間を指定 */

    line-height:1.5;

バリエーション

アクアっぽいデザインにしてみた

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

解説
/* グラデーションを4色で指定 */
background: linear-gradient(#FFF 0%,#F0F0F0 50%,#E7E7E7 50%,#F0F0F0 100%);

/* 追加 文字に白の影を追加して凹んだ感じにすることで背景の立体感を強調
 */
text-shadow: 1px 1px 0 #FFF;

上記デザインで背景を濃くして文字を白抜きに変えてみる

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

【解説】

/* 爽やかな青系の背景をグラデーションで指定 */

background: linear-gradient(#CDF 0%,#39F 50%,#07F 50%,#39F 100%);

/* 枠色も青系に変更 */

border: 1px solid #03C;

/* 文字色を白に */

color:#FFF;

/* 文字の左上に影を追加して凹みを表現 */

text-shadow:-2px -2px 0 rgba(0,0,0,0.3);

さらに枠線を工夫

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

【解説】

/* 枠線に少し手を加えてみた */

border: 4px #4AF groove;

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

線種の参考資料

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

solid
実線

double
二重の線

groove
谷型の線

ridge
山型の線

inset
凹型の線

outset
凸型の線

dotted
点線

dashed
破線

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

株式会社 PIK

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

TEL.03-6433-0422