ブログ カスタマイズ 方法

◎ポータルサイトのタグリストへのリンクを貼る

■記述例

<!--topentry-->
<!--topentry_tag-->
<!--tag_list-->
<ul>
<li &align><a href="http://blog.fc2.com/tag/<%topentry_tag_list_parsename>" target="_blank"><%topentry_tag_list_name></a></li>
</ul>
<!--/tag_list-->
<!--/topentry_tag-->
<!--/topentry-->

　※新管理画面になってから、FC2で公開している「テンプレート中で使える変数」では、
　　ポータルサイトへ直接リンクできなくなったので、「http://blog.fc2.com/」を直接指定しています。
　　（現在、直っているかどうかは不明）

■ブロック単位の記述例（※166_simple_3c系列のテンプレートの場合）

<div class="menu1BlockHead" style="text-align:center;">
<div class="menuTitle">ポータルサイト タグリスト</div>
</div>
<div class="menuBlockBody">
<div class="menuText" style="text-align:left;">
<!--topentry-->
<!--topentry_tag-->
<!--tag_list-->
<ul>
<li &align><a href="http://blog.fc2.com/tag/<%topentry_tag_list_parsename>" target="_blank"><%topentry_tag_list_name></a></li>
</ul>
<!--/tag_list-->
<!--/topentry_tag-->
<!--/topentry-->
</div></div>

※注意：
　・クラス指定（class="menuBlockBody"などの部分）は、テンプレートにより異なります。

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎スレッドテーマへのリンクを貼る

<!--topentry-->
<!--community-->
▼<a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>" target="_blank"><strong><%topentry_community_janrename></strong></a><br />
　Ｌ <a href="<%topentry_thread_link>" title="<%topentry_thread_title>" target="_blank"><%topentry_thread_title></a>
<!--/community-->
<!--/topentry-->

　※赤字の部分は、各ジャンルへのリンクです。
　※青字の部分は、共有スレッドテーマへのリンクです。

■ブロック単位の記述例（※166_simple_3c系列のテンプレートの場合）

<!--スレッドテーマ-->
<div class="menu1BlockHead" style="text-align:center;">
<div class="menuTitle">スレッドテーマ</div>
</div>
<div class="menuBlockBody">
<div class="menuText" style="text-align:left;">
<!--topentry-->
<!--community-->
▼<a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>" target="_blank"><strong><%topentry_community_janrename></strong></a><br />
　Ｌ <a href="<%topentry_thread_link>" title="<%topentry_thread_title>" target="_blank"><%topentry_thread_title></a>
<!--/community-->
<!--/topentry-->
</div></div>
<!--/スレッドテーマ-->

※注意：
　・クラス指定（class="menuText"などの部分）は、テンプレートにより異なります。

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎ サイト説明文（introduction）を改行して表示させる

タイトル部分の左右にスペースを空けることで、長くなりすぎたブログ説明文を、
自動的に改行して表示させることができます。

ブログの説明文をタイトル部分の左右にスペースを空けて表示するには、ブログの説明文（introduction）のブロックのパッディング（padding）で調整して下さい。

マージン（margin）指定でもスペースを空けることはできますが、
テンプレートのレイアウトが崩れることもあります。

※記載例
スタイルシートの部分の 赤字 の部分を調整
.introduction {
　　　　　　　padding: 0px 5px 0px 5px;
　　　　　　　text-align: left; 　 /* 必要に応じ追加 */
}
※記載例説明；注意（注釈）は不要
　・padding: 0px（上スペース） 100px（右スペース） 0px（下スペース） 150px（左スペース）;
　　（ブログ説明文の左に100px、右に150pxのスペースを空ける）
　・タイトル部分がセンタリング指定している場合必要に応じ「text-align: left;」を追加

タイトル部分の幅が、固定されている場合には、
.introduction {
　　　　　　　width: 580px; 　 /* タイトル部分の幅を580pxに指定 */
}
としても、同じ効果が得られます。

●注意点
サイト説明文（introduction）を改行して表示させることで、タイトル部分の文字がずれる場合には、
#headBlock {
　　　　　　height:110px; 　 /* この部分を調整（指定してない場合はそのままでOK!） */
}

▼ ブログ カスタマイズ 方法 記事一覧 >> １ >> ２

　※ フリースペース（index_area）について - 1
　※ フリースペースの編集について - ２
　※ 文字をスクロールさせる
　※ テキストボックス風のオブジェクトを作る
　※ 文字サイズや色、行間隔などを変更する
　※ カテゴリー＆エントリー毎にタイトルを変える
　※ エントリー記事部分に広告挿入欄などのスペースを挿入
　※ 記事の日付を表示しない設定方法
　※ ブログタイトル部分の背景色（画像）を変更する
　※ ページタイトル下部のカレンダー表示削除の方法
　※ ブログタイトルを画像で表示する
　※ ブログの背景色（画像）を変更する
　※ メニューの背景を変更する
　※ キーワード上位表示させる為のブログテンプレート カスタマイズ
　※ FC2ブログ サポートフォーラムへのリンク

◎ メニュー部分の背景色（画像）変更方法

以下のスタイルシート（CSS）の赤字部分を変更してください。

■ メニュー部分の背景色を変更する場合

.menuBlockBase {
background-color : #123456;
}

　※注意；「.menuBlockBase」の部分は、テンプレートにより異なります。
　※参考； HTMLリファレンス - カラー編（RGB）


■ ブログタイトル部分の背景画像を変更する場合

.menu1BlockBody {
background : #123456 url("画像へのパス（URL）");
}
　※注意；「.menu1BlockBody」の部分は、テンプレートにより異なります。
　※備考； "#123456" は、背景画像が表示されない時に表示する色を指定

● 関連する記事 ⇒ ※背景イメージを指定するCSS＆背景画像（フリー素材）

▼ 関連カテゴリー
　※スタイルシート（CSS）
　※HTML タグ 関連解説
　※JavaScript （ジャバスクリプト）
　※ブログ カスタマイズ 方法
　※HTML・CSS・JavaScript 解説本
　※ブログ関連 本・書籍・ブック

記事の内容にご満足戴けましたならクリックをお願いします ↓
ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！

◎ブログタイトルを画像で表示する

ブログタイトルをテキストではなく、画像で表示する場合には、以下のようにタグを変更して下さい。

▼ デフォルトのタグ
<h1 id="title"><a href="<%url>"><%blog_name></a></h1>

▼ タイトルを画像で表示する場合
<h1 id="title"><a href="<%url>" title="<%blog_name>"><img
src="画像へのパス" alt="<%blog_name>" width="横幅"
height="縦幅" border="0"></a></h1>

● ブログタイトルを画像で表示する際の注意点（※ ＳＥＯ対策として）

記事の内容にご満足戴けましたならクリックをお願いします ↓
　 ＪＲＡＮＫブログランキング FC2ブログランキング 人気blogランキング！