アメブロカスタマイズ記事編：記事のタイトルを目立たせて注目度UP☆彡

今回は、記事のタイトルを目立たせるカスタマイズです。

記事のタイトルを目立たせることによって記事を読んでもらえる可能性を上げます。

カスタムを始める前に

記事タイトルを目立たせる為に、文字の大きさを大きくして色を変えます。
また、カーソルが重なった時に影を付けます。

この影ですが、Internet Explorerなどのブラウザによって効果が変わってしまうという問題点があります。
それをご理解の上、必要のある方のみこのカスタムは行って下さい。

CSSの編集画面を開く

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

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

修正魔のページとCSS

何も変更していない状態のタイトルです。


以下のCSSを修正してきます。

/* (1-3) 記事／メッセージボード内の文字のスタイル --------------------------------------------*/   /* skinArticleTitle 記事タイトル文字 */ .skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{ font-size:1.31em; font-weight:bold; color:#0066cc; }

CSSを修正する

対象となる箇所を書き換えて下さい。
また、「.skinArticleTitle:hover」だけの部分は修正ではなく追加になります。

/* (1-3) 記事／メッセージボード内の文字のスタイル --------------------------------------------*/   /* skinArticleTitle 記事タイトル文字 */ .skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{ font-size: 200%; font-weight: bold; color:#333333; } .skinArticleTitle:hover { text-shadow: 1px 1px 3px #999999; -ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(color=#999999,offx=1,offy=1)"; /* IE8 */ display: block; }

追加後の表示は以下の通りです。
▼通常時の表示

まとめ

以上で修正は終了です。

文字の色を直したい場合：「color」のカラーコードを修正
参考：色見本と配色サイト – Color Sample

文字の大きさを変えたい場合：「font-size」

太文字をやめたい場合：「font-weight」を「normal」に変えて下さい。

カーソルが重なった際の効果は「.skinArticleTitle:hover」になります。
IEでは効果が変わって表示されます。不要な場合は全て削除して下さい。

予想通りに修正出来ましたか？
今までやってきた修正ととても似た内容なので、修正箇所がわかればそんなに難しくはないと思います。
もし、わかりにくい所があれば、コメントにて気軽に質問して下さい。