ブログ記事のタイトルのカスタマイズ・その3・初心者向けアメブロカスタマイズ
|
お知らせ(2016年3月8日追記)
2016年3月より、「CSS編集用デザイン」テンプレートが新たに3つ追加されました。そちらのカスタマイズでは以下のカスタマイズが使えないものも多いため、「新CSS編集用デザイン徹底解剖」と題して新たに目次を設けてカスタマイズの方法を公開中です。2016年3月前の従来のCSS編集用デザインについてのカスタマイズは、当ページでカスタマイズができますので、ご利用状況に応じて使い分けてください。
新CSS編集用デザインでのカスタマイズがご希望のかたは、こちらの目次をご覧くださいませ→新CSS編集用デザイン目次
>>こちらもどうぞ
(1)文字のスタイルのブロックの中の「(1-3) 記事/メッセージボード内の文字のスタイル」の部分を解説します。
「(1-3) 記事/メッセージボード内の文字のスタイル」の解説
ブログタイトル文字とは以下の画像の部分となります。

では早速CSS編集の画面を開いてください。
(1-3) 記事/メッセージボード内の文字のスタイルの構成は以下のようになっています。
/* (1-3) 記事/メッセージボード内の文字のスタイル
--------------------------------------------*//* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}
--------------------------------------------*//* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:1.31em;
font-weight:bold;
color:#0066cc;
}
前回同様のプロパティが入っていますので、ここを変更することで文字の装飾をすることができます。font-sizeが文字の大きさを表すプロパティ。font-weightが文字の太さを表すプロパティ。colorが文字の色を指定するプロパティでした。では実際にこの3つをさわってみましょう。
例えば・・・
文字色をグレーにし、文字のサイズをもっと大きくしてみます。以下のように変更してみました。(赤字が修正箇所)
/* (1-3) 記事/メッセージボード内の文字のスタイル
--------------------------------------------*/
/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:2.31em;
font-weight:bold;
color:#CCCCCC;
}
--------------------------------------------*/
/* skinArticleTitle 記事タイトル文字 */
.skinArticleTitle,.skinArticleTitle:hover,.skinArticleTitle:focus,
.skinArticleTitle:visited{
font-size:2.31em;
font-weight:bold;
color:#CCCCCC;
}
下記の画像のように文字の色と大きさを、変更できました。
あなたのブログの背景やサイズにあわせてタイトルの文字をカスタマイズしてみてください。