紅の豚をDVDで見ててやっぱりジブリっていいなぁと思うタマネギボムです♪
今日は記事タイトル部分の背景を編集していこうと思います。
記事タイトルを見てもらえばわかるのですが、灰色の縦棒だけって
なんか寂しい感じがしますし、記事タイトルの背景もこだわれば
オリジナリティ溢れるブログができること間違いなしですよ！
なので、今回は記事タイトルを画像に変えるCCSを解説していこうと思います。
それではまずデザインの変更→CSSの編集から編集画面を開きます。
次にCSS編集エリアから以下のような部分を見つけて下さい。
/* (3-6) 記事
--------------------------------------------*/
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}
色々とごちゃごちゃしていますが、そこまで難しいことはしません。
それはCSSタグを付け足して編集していきます。
/* (3-6) 記事
--------------------------------------------*/
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
.skinArticle2{}
.skinArticle3{}
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader{
margin:0 29px;
padding:2px 10px;
border-left:10px solid #FF8C00;/*記事タイトルの縦棒を変更*/
border-bottom:2px solid #e4e4e4;/*記事タイトルに下線を引く*/
}
.skinArticleHeader2{}
それでは編集したブログを見て見ましょう。
どうでしょうか？
目立たないかもしれませんが変わってるのがわかるかと思います。
『border:;』というのは線を引くというタグです。
『border-』の後に
top left right bottom
とそれぞれ指定することによって上、左、右、下と線を引くことができます。
『border:;』の中に『solid』と指定していますがこれは何かというと
1本線を引くという意味です。
これはsolid以外にも色々あるので、参考に紹介しておきますね。
とこのようにバリエーションに富んだものがあるのがわかると思います。
指定するタグを色々試しながら、自分の好みにあったものを使ってみてください。
さて、いかがだったでしょうか？
今回は色々と覚えるものが多いという印象を受けたかと思います。
もしこれどうやってやるんだっけ？とかこれができるのを見た気がする
というのがあったら今回の記事を見直してもらって、確認してもらえればと思います。
そうやって何度も見ている内に自然とCSSを使えるようになっていますよ！
それでは最後まで読んで頂きありがとうございました(*^∇^*)
