ブログ カスタマイズ 方法

ここでは、 ブログ カスタマイズ 方法 に関するカテゴリー情報を紹介しています。
ポータルサイトのタグリストへのリンクを貼る

記述例

<!--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"などの部分)は、テンプレートにより異なります。


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

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

<!--topentry-->
<!--community-->
<a href="<%topentry_community_janrelink>" title="<%topentry_community_janrename>" target="_blank"><strong><%topentry_community_janrename></strong></a><br />
 L <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 />
 L <a href="<%topentry_thread_link>" title="<%topentry_thread_title>" target="_blank"><%topentry_thread_title></a>
<!--/community-->
<!--/topentry-->
</div></div>
<!--/スレッドテーマ-->


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


記事の内容にご満足戴けましたならクリックをお願いします ↓
JRANKブログランキング 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!) */
}

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

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

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

.menuBlockBase {
background-color : #123456;
}

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


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

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

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

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

記事の内容にご満足戴けましたならクリックをお願いします ↓
JRANKブログランキング 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>

ブログタイトルを画像で表示する際の注意点(※ SEO対策として)

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

タグ : カスタマイズ,