◎ カテゴリー＆エントリー毎にタイトルを変える
一般的なブログでは、ブログタイトルが全ページに適用される事が多く、カテゴリーページやエントリーページ（記事表示）ごとにタイトルが変化しないものが多いようです。
ＦＣ２ブログでは、ＦＣ２独自タグを使うことで、カテゴリーページやエントリーページ毎にタイトルを変える事ができますが、ここでは、そのために必要なFC2ブログ テンプレート中で使える変数について説明します。
■カテゴリー＆エントリー毎にタイトルを変える為に必要な変数
- <%blog_name>：ブログのタイトルを表示
- <%sub_title>：サブタイトルを表示。エリアによりタイトルが変わる。
※トップページでは表示しない
※カテゴリーページの時は、カテゴリー名を表示
※エントリー記事ページの時は、個別エントリー名を表示
※月別アーカイブページの時は、年・月・日の数字を表示
※検索結果ページの時の時は、検索語句を表示 - <!--index_area--> 〜トップページにのみ表示〜 <!--/index_area>
- <!--category_area--> 〜カテゴリーページにのみ表示〜 <!--/category_area>
- <!--permanent_area--> 〜個別エントリーページにのみ表示〜 <!--/permanent_area>
- <!--date_area--> 〜月別アーカイブページにのみ表示〜 <!--/date_area>
- <!--search_area--> 〜検索結果ページにのみ表示〜 <!--/search_area>
エリアタグは、notをつける事でその「エリア以外」で表示させることもできます。
※例 ： <!--not_index_area--> 〜トップページ以外に表示〜 <!--/not_index_area-->
タグ ： カスタマイズ
※注意；テンプレートによってクラス名が違う場合もあります
■ブログ全体の文字サイズや色、行間隔などを変更するには
body{
font-size: 12px; // 文字サイズ
color: #333333; // 文字色
line-height: 130%; // 行間隔
text-align: center; // テキスト配置位置
}
■エントリー本文の文字サイズや色、行間隔などを変更するには
※ブログ全体の指定を引き継ぐ場合には設定の必要はありません
.mainEntryBlock {
font-size: 13px; // 文字サイズ
color: #555555; // 文字色
line-height: 130%; // 行間隔
text-align: left; // テキスト配置位置
}
■メニュー枠の文字サイズや色、行間隔などを変更するには
※ブログ全体の指定を引き継ぐ場合には設定の必要はありません
※3カラムの場合には「.menu2BlockBase」も設定する必要がある場合もあります
.menu1BlockBase {
font-size: 13px; // 文字サイズ
color: #555555; // 文字色
line-height: 130%; // 行間隔
text-align: left; // テキスト配置位置
}
◎HTMLソース部分
◎ <!--mainEntryBase--> 〜 <!--/mainEntryBase--> で囲まれている部分がエントリー記事内容部分です緑字の部分は、テンプレートにより異なる場合もありますので注意して下さい
<!--mainEntryBase-->
<div class="mainEntryBase">
<div class="EntryBody_cm">
→ ※エントリー記事部分、広告挿入欄のサンプル 上部スペース ←
</div>
<div class="editentry">
<a href="./admin.php?mode=editentry&no=<%topentry_no>" title="記事を編集する">
<%topentry_year>/<%topentry_month>/<%topentry_day>(<%topentry_wayoubi>)</a>
</div>
<div class="mainEntryBody"><%topentry_body></div>
<div class="mainEntryMore">
<!--more_link-->
≫<a href="<%topentry_link>#more">[<%topentry_title>]の続きを読む</a>
<!--/more_link-->
<!--more-->
<a name="more" id="more"></a><%topentry_more>
<!--/more-->
<div class="EntryBody_cm">
<hr />
→ ※エントリー記事部分、広告挿入欄のサンプル 下部スペース ←
<p class="cm_banner">
◎ 広告のサンプル
</p>
</div>
</div>
<div class="mainEntryDate">
<a href="<%topentry_category_link>" title="カテゴリ一分類"><%topentry_category></a> |
<!--allow_tb-->
<a href="<%topentry_link>#trackback">トラックバック：<%topentry_tb_num></a> |
<!--/allow_tb-->
<!--deny_tb-->
<!--/deny_tb-->
<!--allow_comment-->
<a href="<%topentry_link>#comment">コメント：<%topentry_comment_num></a> |
<!--/allow_comment-->
<a href="#page_top" title="ページトップへ"> Page Top↑</a>
<!--deny_comment-->
<!--/deny_comment-->
</div>
</div>
<!--/mainEntryBase-->
◎CSSソース追加部分
.EntryBody_cm {
margin: 10px 0px 10px 0px;
font-size: 14px; color: #6C6C6C;
}
.cm_banner {
text-align: center;
margin: 5px 0px 2px 0px;
}
記事にご満足頂けましたら、クリックをお願い致します
人気blogランキング！ 
人気ブログ検索-ブログフリーク 
FC2ブログランキング
■記述例
※<a href="http://yakibuta.blog14.fc2.com/" target="_blank" accesskey="t"> ただ タダ 無料ブログ</a>（T）
※ <a href="http://seo298.blog44.fc2.com/" target="_blank" accesskey="s">SEO対策ブログテンプレート</a>（S）
■表示例
※ ただ タダ 無料ブログ（T）
※ SEO対策ブログテンプレート（S）
これで、上記のリンクは、キーボードの「T」「S」を使っても移動できるようになります。
（Windowsの場合は、[Alt]＋[T]で・・・無料ブログが、[Alt]＋[S]でSEO対策・・・を選択）
■ショートカットの利用方法
※Windowsの場合 ⇒ [Alt]＋[T]キー
※Macintoshの場合 ⇒ [command]＋[S]キー
■注意点
※Internet Explorer と Netscape Navigator 以外のプラウザでは利用できない場合もあります。
※Windows版Internet Explorerの場合は、リンクにフォーカスが移動し、
リンク先へ移動するには、その後[Enter]キーを押す必要があります。
※Netscape Navigatorの場合は、キーを押すと同時にリンク先へ移動します。
※指定できるのは英数キー名の方だけです。
しかし、下記のように背景色が代替文字と同じような色の場合、代替文字が認識しずらくなってしまいます。
このような場合の対処方法として代替文字に対して文字色を指定する方法があります。
■代替文字に対して文字色を指定する方法（スタイルシート）
<div style="color:#fff;">
<img src="画像.gif"
alt="代替文字" width="100" height="30" border="0">
</div>
※上記のソースでは、文字色として白色を指定しています。
背景色に濃い色を使っている場合などは、代替文字に文字色を指定すると良いでしょう。
テキストボックス風のオブジェクトを作ります。
▼ 実行例-1 ＆ ソース ▼
この部分に、文字やイメージなどを挿入します。
</div>
▼ 実行例-2 ＆ ソース ▼
この部分に、文字やイメージなどを挿入します。
背景色や背景画像、枠線の種類などの指定もできます。
</div>
以下のCSSを、透明化させたいオブジェクト内に記入して下さい。
background-color:背景色;filter:Alpha(opacity=60);
※数字(60)の部分が少ない程透け具合が強くなります。
|
ここでは、テーブルタグ内をスタイルシートで制御しています。 ※記入例；style="background-color:背景色;filter:Alpha(opacity=60);" 
|
