FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

文字の大きさを変える

文字の大きさを変える方法を紹介します。

スタイルシートの次の変数が文字の大きさに対応しています。


/* サイトタイトル */
h1 {

  font-size: 1.2em; /* タイトルの大きさ */

}


/* サブタイトル(サイト説明) */
h2 {

  font-size: 0.8em; /* サブタイトルの大きさ */

}


/* エントリー(記事)タイトル */
h3 {

  font-size: 0.8em; /* 記事タイトル文字の大きさ */

}


/* エントリー(記事)スタイル */
.article {

  font-size: 75%; /* エントリー(記事)の文字の大きさ */

}


/* メニュータイトル */
.menu_title {

  font-size: 0.8em;

}


/* メニューコンテンツ */
.menu_cont {

  font-size: 75%; /* メニューコンテンツの文字の大きさ */

}

※旧バージョン
.plug_cont {

  font-size: 75%;
}


Ctrlキーを押しながらFキーを押すと検索できて素早く目的の変数を見つけることができると思います。

各数値を変えてお好みのサイズにカスタマイズしてください。
スポンサーサイト

サイト幅を変える(standardシリーズ)

※こちらは当サイトのテンプレート、standardシリーズ用の記事です。
lightframeシリーズの場合はこちらになります。


私がリリースするテンプレートはカラム数可変ですが、3カラムで使うなら幅が狭く、2カラムなら少し広いと思います。

そこでサイト幅を変える方法を紹介します。

スタイルシートで次のようなところがあります。

.base_table {

  width: 50em;

}

上のほうにあるのですぐ見つけられると思います。
この数値を変えてお好みのサイズにカスタマイズしてください。

またブラウザサイズに合わせて可変するリキッドレイアウトにしたい場合は%で表記します。

.base_table {

  width: 100%;

}

こうすると画面全体まで幅が伸びます。

サイト幅を変えても左右のメニューカラムの幅は変わりません。メニュー幅を変えたい場合は次のところを変えます。

.left_width {

  width: 11em;

}

.right_width {

  width: 11em;

}

left_widthが左、right_widthが右のメニューカラムの幅を指定しています。

数値を変えてお好みのサイズにカスタマイズしてくださいね。

カレンダーの「更新した日」を目立たせる方法

私がリリースするテンプレートのカレンダーの「更新した日」を目立たせる方法を紹介します。

スタイルシートにこちらを加えます。

.calender td a {
background-color: #cccccc;
}

赤い部分の数値を変えれば色が変わります。

またこの色の部分を大きくしたときはもう一行加えます。

.calender td a {
background-color: #cccccc;
padding: 2px;
}

しかしこのままだとリンクされた日の幅だけ大きくなってしまうので他の日付も同じ幅にするためにさらに次も加えます。

.calender td {
padding: 2px;
}

日付も幅が皆等しくなりましたがカレンダー全体が少し膨らんでしまったと思います。次の修正をすれば小さく落ち着くと思います。

/*カレンダー*/
.calender {
color:#666;
font-size: 110%;
margin: 1em 0.8em 0;
}

この赤い部分の数値を0にします。

/*カレンダー*/
.calender {
color:#666;
font-size: 110%;
margin: 1em 0em 0;
}

これで完了です。
更新日を目立たせたい方はどうぞお試しください。

旧バージョンの修正方法

このたび(1/20 23時頃)「ある共有プラグインを用いるとIEにてレイアウトが崩れる」という問題を修正して再アップしました。

旧バージョン(タイトル横に検索窓がある)タイプで既に独自のカスタマイズをされた方も多いと思います。お手数をお掛けして誠に申し訳ありません。

旧バージョンからの問題修正方法を紹介致します。
念のため修正前のものはバックアップを取っておくことをお薦めします。

まずHTMLを編集します。


<!--▼▼ プラグイン カテゴリー1 ▼▼-->

<div class="plug_cont">

</div><!--/plug_cont-->

<!--▲▲ プラグイン カテゴリー1 ▲▲-->


この赤い部分の行を次のように書き換えてください。


<!--▼▼ プラグイン カテゴリー1 ▼▼-->

<table border="0"><tbody><tr><td class="plug_cont">

</td></tr></tbody></table>

<!--▲▲ プラグイン カテゴリー1 ▲▲-->


同様に
<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->
にも同じ処理を施してください。

次にスタイルシートを編集します。

/*----メニューレイアウト-----*/
.plug_cont {
margin: 0 1em 1em;
font-size: 75%;
}

赤い行を次のように書き換えてください。

/*----メニューレイアウト-----*/
.plug_cont {
padding: 0 1em;
font-size: 75%;
}

以上が旧バージョンの問題を解決できる最も簡単な方法です。
この方法は本日発見しました。私が昨日新バージョンに施した修正よりもずっと簡単でシンプルなものです。

この度はお騒がせして誠に申し訳ありませんでした。
ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
12 | 2006/01 | 02
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

12 | 2006/01 | 02
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
ユーザータグ


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。