記事のタイトル部分をカスタムしてみよう

記事のタイトルは見てくれる人が必ず目にするところなので、カスタムした方がいいでしょう

背景に色をつけてみよう

背景に色を敷いて見出しというのを強調してみましょう。

変更前の見出しはこのような感じです。

この背景に色を敷いて見出し感をUPします。
するとこのようなわかりやすい見出しになります。

もちろん色は自由に変えることができます。

それでは、やり方と解説をします。

CSS編集で下記を一番下に追加します。


.skinArticleHeader{
    background:#98FB98;  
    border-left:7px solid #A0522D;  
    padding:10px;  
}

解説は次の通りです。


    background:#98FB98;
この部分は背景の色を指定します。  
    border-left:7px solid #A0522D;
この部分はタイトル横の線（茶色）を引いています。border(線を)-left(左に)7pxのサイズでsolid(実線)を#A0522D(色)で引け、という指示になります。
    padding:10px;  
これは文字に対しての余白を設定します。
}

自分のブログに合う背景色を選んで変更してみましょう
色のコードがわからない場合はこちらを参考にしてください。

背景に画像を設定しよう

今度は色だけではなく画像を設定してみましょう。

利用する画像は下記のものです。

CSSの一番下に追加します。


.skinArticleHeader{
    background-image:url(画像のURL);  
    border-left:7px solid #A0522D;  
    padding: 10px;
}

解説は次の通りです。


    background-image:url(画像のURL);
この部分はアップロードした画像のURLを指定してタイトルの背景に敷きます。  
    border-left:7px solid #A0522D;
この部分はタイトル横の線（茶色）を引いています。border(線を)-left(左に)7pxのサイズでsolid(実線)を#A0522D(色)で引け、という指示になります。
    padding:10px;  
これは文字に対しての余白を設定します。
}

出来上がったものがこちら

アイデア次第で色々なカスタムができますので、是非チャレンジしてみてください。

記事のタイトル部分の変更