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

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

ページ送りナビゲーションに枠を付ける

以前に「ページ送りナビゲーション」を表示する方法を紹介しました。
この各リンクを枠で囲んで表示する方法を紹介します。

以前紹介したページ送りナビゲーションのスクリプトにこのような箇所があります。

if (i == c) {
document.write(' <b>' + i + '</b> ');
} else {
document.write(' <a href=\"' + base + (i - 1) + ext + '\">' + i + '</a> ');
}


これを次の様に書き換えてください。

if (i == c) {
document.write(' <b><span class="pnavi">' + i + '</span></b> ');
} else {
document.write(' <span class="pnavi"><a href=\"' + base + (i - 1) + ext + '\">' + i + '</a></span> ');
}


そしてスタイルシートの末尾に以下を加えてください。

.pnavi {
border: 1px solid #cccccc;
padding:2px;
}


これでページ送りナビゲーションに枠を付けることができます。

プラグインフリーエリア等の中身を横に4つ並べて表示する

下記のようすると、プラグインフリーエリア等の中身を横に4つ並べて表示できます。

<table style="width:100%;"><tr>
<td style="width:25%; vertical-align:top;">中身1</td>
<td style="width:25%; vertical-align:top;">中身2</td>
<td style="width:25%; vertical-align:top;">中身3</td>
<td style="width:25%; vertical-align:top;">中身4</td>
</tr></table>


プラグイン3の幅を広げる(standard)

以前にプラグイン3の幅を広げるカスタマイズを紹介しましたが、これはlightframeシリーズを対象にしたものでした。

今回はstandardシリーズを対象に、プラグイン3をサイト幅と同じ幅に広げてヘッダー直下に表示するカスタマイズを紹介します。

プラグイン「最新記事」に表示される記事タイトルが長過ぎる場合は省略する

プラグインの「最新記事」において、表示される記事タイトルが長過ぎる場合は
「○○○○○
 ○○○○○...」
と、「...」で省略して表示する方法を紹介します。

任意のプラグインHTMLを下記のようにしてください。

<ul>
<!--recent-->

<script type="text/javascript"><!--

var mojisu = 10; //最大表示文字数を設定
var str = new String();
str = "<%recent_title>";

if ( str.length > mojisu ) {
str = str.substring(0,mojisu);
str = str+"...";
}

document.write('<li><a href="<%recent_link>" title="<%recent_title>">',str,' (<%recent_month>/<%recent_day>)</a></li>');

--></script>

<!--/recent-->
</ul>


上記の場合だと10文字を超える記事タイトルは11文字目以降が「...」として省略されます。
最大表示文字数はお好きなように設定してください。

【2009/10/28 追記】日付が不要であればこの部分を削除してください。
コンマ「,」やシングルクォーテーション「'」も忘れずに削除してください。

,' (<%recent_month>/<%recent_day>)</a></li>'




【2009/11/17 追記】以前追記した内容に間違いがありました。誠に申しわけありません。
日付が不要であればこの部分を削除してください。

(<%recent_month>/<%recent_day>)


特定の記事で一部分を非表示

特定の記事で一部分を非表示にするカスタマイズを紹介します。

HTMLを編集します。
特定の記事で非表示にしたい部分を、このdivタグで囲んでください。

<div class="none_en<%topentry_no>"></div>


そしてスタイルシートの末尾に以下の様な設定を加えてください。

.none_en1 { display: none; }
.none_en2 { display: none; }
.none_en3 { display: none; }


赤い数字は記事番号を設定してください。各記事番号は、その記事ページのURLを見ると判ります。
http://〜/blog-entry-x.html
xの位置にある数字がその記事の番号です。

ここで設定した番号の記事が、上記タグで囲んだ部分を表示しなくなります。


例えば当サイト配布のテンプレートであるlightframeシリーズの場合、記事の下にあるコメント等へのリンク
[日付] カテゴリ | TB(0) | CM(0)
という部分を記事番号99(blog-entry-99.html)において表示させたくないときは、次の様になります。

HTMLの以下の箇所に赤い記述を加えます。

<!--▼ エントリー(記事)▼-->

</div><!--/ently_text-->
<div class="none_en<%topentry_no>">
<div class="ently_navi">

</div><!--/ently_navi-->
</div>
</div><!--/ently_body-->

<!--▲ エントリー(記事)▲-->


そしてスタイルシートの末尾にこれを加えてください。

.none_en99 { display: none; }


これで記事番号99(blog-entry-99.html)において、記事の下にあるコメント等へのリンクを非表示にすることができます。

タイトル画像のaltとリンクタイトルを「記事タイトル 〜 ブログタイトル」とする

以前紹介した「タイトルを画像にしたときのSEO」は、個別記事ページにおいてタイトル画像のaltとリンクタイトルを「記事タイトル」にするものでした。
この「記事タイトル」を「記事タイトル 〜 ブログタイトル」とする方法を紹介します。

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

HTMLを編集します。タイトルを画像にしているとき、そのリンクタイトルとalitを次の様に書き換えてください。

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

<h1><a href="<%url>" title="<!--not_permanent_area--><%blog_name> トップページへ<!--/not_permanent_area--><!--permanent_area--><%sub_title> 〜 <%blog_name><!--/permanent_area-->"><img src="画像のURL" alt="<!--not_permanent_area--><%blog_name> トップページへ<!--/not_permanent_area--><!--permanent_area--><%sub_title> 〜 <%blog_name><!--/permanent_area-->" width="画像の横幅" height="画像の高さ" /></a></h1>

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


これでタイトル画像のaltとリンクタイトルを「記事タイトル 〜 ブログタイトル」とすることができます。

FC2ブックマークの位置を変更

FC2ブックマークの場所を変更するカスタマイズを紹介します。

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

ページナビゲーションを記事の下に表示する (standard)

当サイト配布の共有テンプレート standardシリーズの個別記事ページにおいて、記事の下(コメントの上)に
<< 前ページ | HOME | 次ページ >>
というようなページナビゲーションを表示するカスタマイズを紹介します。

このページナビゲーションはlightframeシリーズでは標準で実装されています。

トップページや個別記事ページで一部のスタイルを変える

トップページや個別記事ページにおいて、一部のスタイルを変える方法を紹介します。

例えば当サイト配布の共有テンプレート lightframe_white の記事背景色は通常白ですが、トップページや個別記事ページでこの色を変えたいときは以下の手順になります。

HTMLを編集します。赤い部分を加えてください。

<!--▼ エントリー(記事)▼-->
<!--topentry-->
<div class="ently_outline <!--index_area-->topcss<!--/index_area--> <!--permanent_area-->entrycss<!--/permanent_area-->">


そしてスタイルシートの末尾に以下を加えてください。

/* トップページのとき */
.topcss {
background-color:#CCCCCC;

/* 個別記事ページのとき */
.entrycss {
background-color:#99FFFF;
}


このようにトップページや個別記事ページでスタイルを変えることが出来ます。

メニューバーのドロップダウンにカテゴリを表示

以前にメニューバーのドロップダウンを紹介しましたが、このドロップダウンにカテゴリを表示する方法を紹介します。

このドロップダウンメニューは親子設定したカテゴリにも対応しています。
ブログ内検索1
ブログ内検索2
プロフィール

Author:いたお
更新は非常にマイペースです^^;

当サイトはリンクフリーです。
カレンダー
10 | 2009/11 | 12
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 - - - - -
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

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

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


△ ページトップへ戻る