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

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

プラグイン3を個別記事ページでは記事の下に表示する

当サイトが配布している共有テンプレートは、プラグイン3がトップページのみ記事の上に表示されるようになっています。
このプラグイン3を、個別記事ページでは「記事の下」に表示させるカスタマイズを紹介します。
スポンサーサイト



ブログタイトルの下にあるサイト紹介文を記事ページごとに変える。

ブログタイトルの下にあるサイト紹介文を記事ページごとに変えるカスタマイズを紹介します。

HTMLの中に<%introduction>という箇所があるはずです。

当サイトが配布しているテンプレートであれば、以下の箇所にあります。

lightframeシリーズ

<!--▼▼ ヘッダー ▼▼-->

<div class="intro"><%introduction></div>

<!--▲▲ ヘッダー ▲▲-->


standardシリーズ

<!--▼▼▼▼ ヘッダー(タイトル部分)▼▼▼▼-->

<h2><%introduction></h2>

<!--▲▲▲▲ ヘッダー(タイトル部分)▲▲▲▲-->



この<%introduction>という部分を以下の記述に置き換えてください。

<!--not_permanent_area--><%introduction><!--/not_permanent_area--><!--permanent_area-->ここは<%sub_title>について紹介しているページです。<!--/permanent_area-->


これで記事ページごとにサイト紹介文が変わります。
オレンジの部分はお好きな文言に変えてください。

記事上部に異なる背景画像のフリーエリアを表示

このカスタマイズはlightframeシリーズが対象です。

当サイトが配布している共有テンプレートはプラグイン3が記事上部に表示されますが、これに「異なる背景画像」となるとプラグイン3を使わずに直接HTMLを編集する必要があります。

固定リンク画面(blog-entry-x.html)以外で表示されるブロック

FC2ブログで個別記事ページ(blog-entry-x.html)以外で表示したい部分を以下の変数で囲んでください。

<!--not_permanent_area-->

<!--/not_permanent_area-->


この変数で囲まれた部分は個別記事ページ(blog-entry-x.html)では表示されません。

ユーザータグリスト改良版(サイト内・外検索)

先日記事毎に指定したユーザータグを表示と言うカスタマイズ方法(「サイト内タグ検索」とFC2ブログタグページにリンクさせる「サイト外タグ検索」の2種類)を貼りましたが、タグを設定していない記事には[タグ未指定]と表示されてしまいました。

今回はユーザータグを指定していない記事に関しては表示させない方法を紹介します。

これは現在閉鎖されたサイト様の記事内容を、そのサイト様のご好意により転載させてもらいました。

***** HTML *****

【サイト内タグ検索】
記事毎に指定したユーザータグを表示 その1(サイト内タグ検索)」の改良版。

<!--▼タグリスト▼-->
<!--topentry_tag-->
<div class="tag_list">[タグ]
<!--tag_list-->
<a href="<%url>?tag=<%topentry_tag_list_parsename>" title="「<%topentry_tag_list_name>」をタグに指定した記事を検索">& lt;%topentry_tag_list_name></a>
<!--/tag_list--></div>
<!--/topentry_tag-->
<!--▲タグリスト▲-->



【サイト外タグ検索】…FC2タグページにリンクさせます。
記事毎に指定したユーザータグを表示 その2(サイト外タグ検索)」の改良版。

<!--▼タグリスト▼-->
<!--topentry_tag-->
<div class="tag_list">[タグ]
<!--tag_list-->
<a href="http://blog.fc2.com/tag/<%topentry_tag_list_parsename>" target="_blank" title="「<%topentry_tag_list_name>」をタグに指定している他のブログを検索">& lt;%topentry_tag_list_name></a>
<!--/tag_list--></div>
<!--/topentry_tag-->
<!--▲タグリスト▲-->



***** スタイルシート(共通) *****

/* タグリスト */
.tag_list {
margin: 0;
padding: 0px 0px 5px 0px; /* 文字位置(上・右・下・左) */
text-align: right; /* 表示位置(右) */
list-style-type: none;
}


記事毎に指定したユーザータグを表示 その2(サイト外タグ検索)

前回は自サイト内の同じタグを設定した記事」を検索できるユーザータグを表示しました。
今回は「同じタグを設定した他のブログの記事」を検索できるユーザータグを表示する方法を紹介します。

これは現在閉鎖されたサイト様の記事内容を、そのサイト様のご好意により転載させてもらいました。

テンプレートのHTML、<!--topentry--> ~ <!--/topentry-->内にこれを。

<!--▼タグリスト▼-->
<!--topentry_tag-->
<div class="tag_list">[タグ]
<!--tag_list-->
<a href="http://blog.fc2.com/tag/<%topentry_tag_list_parsename>" target="_blank"
title="「<%topentry_tag_list_name>」をタグに指定している他のブログを検索">
<%topentry_tag_list_name></a>
<!--/tag_list--></div>
<!--/topentry_tag-->
<!--topentry_not_tag-->
<div class="tag_list">[タグ未指定]</div>
<!--/topentry_not_tag-->
<!--▲タグリスト▲-->


スタイルシートに以下を付け加えます。

/* タグリスト */
.tag_list {
margin: 0;
padding: 0px 0px 5px 0px; /* 文字位置(上・右・下・左) */
text-align: right; /* 表示位置(右) */
list-style-type: none;
}


これで「同じタグを設定した他のブログの記事」を検索できるユーザータグを表示することができます。

記事内ではなく、プラグインでこのユーザータグを表示したい場合は共有プラグイン「サイト外タグ検索」を利用してください。

記事毎に指定したユーザータグを表示 その1(サイト内タグ検索)

記事毎に指定したユーザータグを記事下に表示する方法を紹介します。
表示されたユーザータグのリンクをクリックすると、同じタグを設定している記事(サイト内タグ)を検索することができます。

これは現在閉鎖されたサイト様の記事内容を、そのサイト様のご好意により転載させてもらいました。

テンプレートのHTML、<!--topentry--> ~ <!--/topentry-->内に入れます。

<!--▼タグリスト▼-->
<!--topentry_tag-->
<div class="tag_list">[タグ]
<!--tag_list-->
<a href="<%url>?tag=<%topentry_tag_list_parsename>" title="「<%topentry_tag_list_name>」をタグに指定した記事を検索"><%topentry_tag_list_name></a>
<!--/tag_list--></div>
<!--/topentry_tag-->
<!--topentry_not_tag-->
<div class="tag_list">[タグ未指定]</div>
<!--/topentry_not_tag-->
<!--▲タグリスト▲-->


スタイルシートに以下を付け加えます。

/* タグリスト */
.tag_list {
margin: 0;
padding: 0px 0px 5px 0px; /* 文字位置(上・右・下・左) */
text-align: right; /* 表示位置(右) */
list-style-type: none;
}


これで記事毎に指定したユーザータグを記事下に表示することができます。
転載を許可してくれたサイト様ありがとうございました m(__)m

横カレンダーに背景画像を表示

以前にブログタイトル下に横カレンダーを入れるカスタマイズを紹介しました。

この横カレンダーに背景画像を表示するためには、スタイルシートの末尾に以下を加えてください。

.line_calendar {
background: url("画像URL");
line-height:2.5; /* カレンダーの高さ */
}


これで横カレンダーに背景画像を表示することができます。
カレンダーの高さはお好みにあわせて設定してください。

縦メニューの階層化

先日は縦メニューの設置方法を紹介しました。
今回はこの縦メニューを階層化する方法を紹介します。

縦メニューの設置

以前横メニューバーを設置する方法を紹介しましたが、今回は縦メニューの設置方法を紹介します。
ブログ内検索1
プロフィール

いたお

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

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

いたおの他の運営サイト
カレンダー
11 | 2009/12 | 01
- - 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をここに
今日の日付入りカレンダー

11 | 2009/12 | 01
- - 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 - -
ユーザータグ


△ ページトップへ戻る