アメブロカスタマイズ記事編：記事タイトルのデザインを変えて更にタイトルらしくしよう♪

前回、記事のタイトルを目立たせる為にタイトルテキストのカスタマイズをしました。

更に、枠をカスタマイズしてタイトルであることを強調していきます。
CSSを少し編集するだけでかなり印象が変わりますので是非チャレンジしてみて下さい。

カスタマイズを始める前に

今回は3パターンのカスタマイズを紹介します。

CSSの修正箇所は2カ所あります。
それぞれ場所が離れているので注意して下さい。
修正する場所を間違えると反映されない可能性があるので注意して下さい。

CSSの編集画面を開く

まずは、CSSの編集画面を開いて下さい。

「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。

編集前のページとCSS

修正前のタイトルはこの様に表示されています。

修正前のCSSです。
3カ所修正しますが離れている場所に記載されている所もあるのでしっかり上書きして下さい。

/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited {
font-size:1.31em;
font-weight:bold;
color:#0066cc;
} 
▼上記から少し下の方に記載されています。
/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader {
margin:0 29px;
padding:2px 10px;
border-left:5px solid #e4e4e4;
}
.skinArticleHeader2{}

パターン1：ボーダーの色を変えて下にもボーダーをつける

タイトルテキストの左についている縦線の色を変更します。

また、下にも色と太さの違うボーダーを付けてタイトルであることを強調します。

CSSは以下の通りです。
修正対象は「.skinArticleHeader」の一ヶ所だけになります。

/* skinArticleHeader 記事タイトルエリア */
.skinArticleHeader {
margin: 0 29px;
padding: 5px 10px;
border-left: 5px solid #CC0000;
border-bottom: 1px solid #e4e4e4;
}

パターン2：背景に色をつけて文字色も変更する。

横に着いているボーダーを消して背景全体に色を付けます。
文字色が読みにくくなるので、背景色に合わせて文字の色を変更します。

CSSは以下の通りです。
修正対象は「.skinArticleHeader」と「.skinArticleTitle」の２ヶ所になります。
場所が離れているので注意して下さい。


.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited {
font-size:1.31em;
font-weight:bold;
color:#FFFFFF;
}
 
.skinArticleHeader {
margin: 0 29px;
padding: 5px 10px;
border: none;
background-color: #CC0000;
}

パターン3：二重に枠を付けてよりタイトルらしくする

外側に枠をつけてタイトルをくくり、タイトルの左側に色のついたボーダーをつけます。

文字色と文字の大きさを調整してよりタイトルらしさを強調します。
スペースの開け方が若干難しいので、違いを確認して下さい。

CSSは以下の通りです。
修正対象は3カ所全てです。
こちらも場所が離れているので注意して下さい。


.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited {
font-size: 180%;
font-weight: bold;
color:#CC0000;
}
 
.skinArticleHeader {
margin:0 29px;
padding:5px 5px 5px 10px;
border:1px solid #E4E4E4;
background-color:#F8F8F8;
}
.skinArticleHeader2 {
padding:2px 0px 2px 10px;
border-left:5px solid #CC0000;
}

まとめ

以上で修正は終了です。
枠に関しては「.skinArticleHeader」を修正
文字に関しては「.skinArticleTitle」を修正すると覚えておけば間違いありません。

枠を二重にする場合はスペースの開け方が肝になります。
スペースをあける為の「padding」と「margin」の設定をよく確認して
自分にあわせて調節して下さい。

いかがでしたか？
「記事のタイトルを目立たせて注目度UP☆彡」の応用編として掲載しましたが、他の箇所にも応用のきく内容になっています。
CSSのコツがつかめてきた方は、他の箇所にも活用してみて下さい。

今までの修正と比較すると難易度が高くなっているので、わかりにくい箇所があれば気軽にコメントで質問して下さい。

アメブロカスタマイズ・アメブロ改造でランキングアップ

アメブロカスタマイズではアメブロを使ってホームページの様なオリジナルのブログを作るお手伝いをします。