今回は、メイン記事アウトライン変更です
前回の変更がまだの方は↓
メイン記事とリンクスの文字スタイル変更
何を変えるかと言うとこんな感じ ↓
![アウトライン](https://stat.ameba.jp/user_images/20120608/01/seo-you/56/26/p/o0390011312016235446.png?caw=800)
まずは、CSS編集画面を開いてください
281行目から変更します
/* (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{}
/* skinArticleBody 記事本文エリア */
.skinArticleBody{}
.skinArticleBody2{
margin:0 29px;
}
/* skinArticleFooter 記事フッターエリア */
.skinArticleFooter{
margin:10px 29px 0;
border-top:1px dotted #949494;
}
まずは記事のアウトラインの太さとカラーを変えましょう
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:1px solid #dddddd;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
ここですね↓
border:1px solid #dddddd;
border:1pxは太さが1pxですよと指定されています
solidは実線のことですね
cssでは境界線の時に使います
1pxを2pxに変更します
次に、カラーです
めちゃ薄いです
エガちゃんの頭頂部ぐらい薄いです
dimgray #696969
gray #808080
どちらかのカラーにしましょう
border:2px solid #696969;
↑こうですね
次に角を丸くしますね
角を丸くするタグは
border-radius: ??px; これで4隅が丸くなります
/* skinArticle 記事エリア */
.skinArticle{
/* 注 ベースのcssに margin-bottom の記述有り */
padding:16px 0;
border:2px solid #696969;
border-radius: 5px;
background:#ffffff;/* ←記事に背景を敷きたいとき */
}
角のアールは確認しながら変更してくださいね
次に、記事タイトルの前の飾りです
ここですね↓
margin:0 29px;
何が書いてあるか言うと
borderは端とか淵のことですね
border-leftですから左端からとなります
solidにカラー指定されてます
margin は外側の指定ですね
paddingは内側の指定です
まとめると、左端から上下に2px左右に10pxのところに
薄いグレーの実線を5px引きなさいと定義されています
まあ、なんとなくわかればいいので
変更箇所は
border-left:5px solid #e4e4e4; だけです
太くするのは5pxを増やせばできます
カラーは好みで変えてください
サンプル
以上です
おまけのcss
marginとpaddingには4種類の指定方法があります
例:
margin:5px;1つだけの措定は上下左右
margin:5px 5px;は前で上下の指定後ろで左右の指定
margin:5px 5px 5px;は前で上の指定中で左右の指定後ろで下の指定
margin:5px 5px 5px 5px;4つはそれぞれ指定しています
paddingも同じです
半角スペースで仕切って指定します
おまけでした