記事のタイトル部分をカスタムしてみよう
記事のタイトルは見てくれる人が必ず目にするところなので、カスタムした方がいいでしょう
背景に色をつけてみよう
背景に色を敷いて見出しというのを強調してみましょう。
変更前の見出しはこのような感じです。
![ピグタウン](https://stat.ameba.jp/user_images/20130113/17/reporter000/7b/3d/p/o0685015312374932999.png?caw=800)
この背景に色を敷いて見出し感をUPします。
するとこのようなわかりやすい見出しになります。
もちろん色は自由に変えることができます。
![ピグタウン](https://stat.ameba.jp/user_images/20130113/17/reporter000/23/38/p/o0680016312374933000.png?caw=800)
それでは、やり方と解説をします。
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;
これは文字に対しての余白を設定します。
}
自分のブログに合う背景色を選んで変更してみましょう
色のコードがわからない場合はこちらを参考にしてください。
背景に画像を設定しよう
今度は色だけではなく画像を設定してみましょう。
利用する画像は下記のものです。
![](https://img-proxy.blog-video.jp/images?url=http%3A%2F%2Fstat.blogskin.ameba.jp%2Fblogskin_images%2F20130113%2F18%2F38%2Fb4%2Fp%2Fo01400140agasahakase-aptx1358067894139.png)
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;
これは文字に対しての余白を設定します。
}
出来上がったものがこちら
![ピグタウン](https://stat.ameba.jp/user_images/20130113/18/reporter000/8d/ab/p/o0674014812374967060.png?caw=800)
アイデア次第で色々なカスタムができますので、是非チャレンジしてみてください。