株式会社ドリル Home > アメブロカスタマイズ > 記事のカスタマイズ > 【アメブロカスタマイズ】3-3 記事のタイトル文字を目立たせる – 記事の注目度を上げよう

【アメブロカスタマイズ】3-3 記事のタイトル文字を目立たせる – 記事の注目度を上げよう

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

2013 01 08 1911

 

こんにちは、ドリル 鈴木です。
今回は記事のタイトルを目立たせるCSSのカスタマイズを行います。

 

タイトル文字をカスタマイズして、他のブログとはちょっと違ったイメージを演出すれば、目立つ事間違いなし。
記事を読んでもらえる可能性も高くなるでしょう。

 

今までのカスタマイズができていれば簡単なので、試してみて下さい。
それでは、スタートです。 

 

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

今回はCSSをカスタマイズして記事のタイトルが目立つ様にします。
文字の大きさと大きくし、色も変えています。

また、カーソルが重なった際にわかりやすい様に、影をつける様にもしています。
ただ、これはブラウザ(InternetExprolerなど)によって効果が変わってしまうと言う問題点があります。
それをご理解の上、使用して下さい。

 

CSSの編集画面を開く

2013 01 28 1526

まずは、CSSの編集画面を開いて下さい。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。

 

修正前のページとCSS

何も加工していない場合の記事のタイトルとCSSは以下の通りです。
これに修正を入れて行きます。

2013 02 03 2212

/* (1-3) 記事/メッセージボード内の文字のスタイル
--------------------------------------------*/

/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}

 

CSSを修正する

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;
}

追加後の表示は以下の通りです。
上が通常時の表示、下がカーソルが重なった際の表示です。
カーソルが重なると薄く影がつき、わかりやすくなります。

2013 02 03 2355

2013 02 03 2356

 

まとめ

以上で修正は終了です。

文字の色を直したい場合は、「color」のカラーコードを修正して下さい。

参考:色見本と配色サイト – Color Sample

また、文字の大きさを変えたい場合は「font-size」、太文字をやめたい場合は「font-weight」を「normal」に変えて下さい。
カーソルが重なった際の効果は「.skinArticleTitle:hover」になります。
不要な場合は全て削除して下さい。

 

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

 

以上、鈴木でした。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です