アメブロテンプレートカスタムpartⅢ

カスタム可能なテンプレートを使って簡単なカスタムを紹介します

今回は、メイン記事アウトライン変更です

前回の変更がまだの方は↓

メイン記事とリンクスの文字スタイル変更

　何を変えるかと言うとこんな感じ　↓

まずは、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:２px solid #696969;

border-radius: 5px;

background:#ffffff;/* ←記事に背景を敷きたいとき */

}

角のアールは確認しながら変更してくださいね

次に、記事タイトルの前の飾りです

/* skinArticleHeader 記事タイトルエリア */

.skinArticleHeader{

margin:0 29px;

padding:2px 10px;

border-left:5px solid #e4e4e4;

}

ここですね↓

margin:0 29px; 

padding:2px 10px;

border-left:5px solid #e4e4e4;

何が書いてあるか言うと

borderは端とか淵のことですね

border-leftですから左端からとなります

solidにカラー指定されてます

margin は外側の指定ですね

paddingは内側の指定です

まとめると、左端から上下に2px左右に10pxのところに

薄いグレーの実線を5px引きなさいと定義されています

まあ、なんとなくわかればいいので

変更箇所は
border-left:5px solid #e4e4e4; だけです

太くするのは5pxを増やせばできます

カラーは好みで変えてください

サンプル

/* skinArticleHeader 記事タイトルエリア */

.skinArticleHeader{

margin:0 29px;

padding:2px 10px;

border-left:10px solid #ff1493;

}

以上です

おまけのcss

marginとpaddingには4種類の指定方法があります

例：
　margin:5px;1つだけの措定は上下左右
　margin:5px 5px;は前で上下の指定後ろで左右の指定
　margin:5px 5px 5px;は前で上の指定中で左右の指定後ろで下の指定
　margin:5px 5px 5px 5px;4つはそれぞれ指定しています

paddingも同じです

半角スペースで仕切って指定します

おまけでした