★対象テンプレート:ManicStar

このエントリーでは、テンプレートの各部分のフォントサイズを変更する方法を紹介します。
スタイルシートで該当する箇所を探す場合は、ナンバリング(「/*[3.4]*/」など)を参考にすると便利かと思います。

■ ページ全体のフォントサイズの変更
/*[2.1]*/
body {
margin : 0;
padding : 0 2em;
line-height : 1.5;
color : #aaa;
font-family : "Verdana", "MS UI Gothic", "Osaka", sans-serif;
font-weight : normal;
font-size : 85%;
background-color : #333;
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/manicstar_background.png");
background-repeat : repeat-x;
background-position : left top;
background-attachment : fixed;
}
この中の、
  font-size : 85%;
を変更してください。


■ メインカラムのフォントサイズの変更
/*[5.1]*/
#main {
float : left;
width : 64%;
overflow : hidden;
}
この、{ と } の間に次の記述を挿入してください。
  font-size : ○○%;
○○の部分に適当な数値を入力してください。

■ 記事本文のフォントサイズの変更
/*[8.1]*/
div.entry-body {
margin : 0 2em;
}
この、{ と } の間に次の記述を挿入してください。
  font-size : ○○%;
○○の部分に適当な数値を入力してください。

■ サブメニューのフォントサイズの変更
/*[16.1]*/
div#sub{
width : 35%;
float : right;
/* for IE5 */ text-align : center;
}
この、{ と } の間に次の記述を挿入してください。
  font-size : ○○%;
○○の部分に適当な数値を入力してください。
スポンサーサイト




★対象テンプレート:ManicStar

このエントリでは、タイトル部の各種カスタマイズについてまとめています。

■ タイトル画像を変更する
スタイルシートから、
/*[3.1]*/
#header {
background-image : url("http://blog-imgs-41.fc2.com/r/i/m/rimse/manicstar_title.jpg");
background-repeat : no-repeat;
background-position : center top;
padding : 170px 0 110px;
color : #fff;
}
を探してください(ナンバリングを目安にすると便利です)。

background-imageプロパティ内にあるurl("")の波線部を、変更したい画像のURLに置き換えてください。

■ タイトル・ブログ紹介のエリアを移動する
上と同じ箇所の、paddingプロパティを調節することでエリアを移動することができます。
このとき、
padding : (上からの位置) 0 (下からの位置);
となるようにしてください。(0を忘れないようにお願いします)。

なお、タイトルエリアのサイズは固定されておらず、paddingプロパティを大きくすればその分だけタイトルエリアが大きく確保されます。また、ブログの紹介文の文章量などによってもサイズは変動します。ご了承ください。



Recent Entries