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

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

字体(フォント)を変える

字体(フォント)を変える方法を紹介します。

例えば'HGS教科書体'というフォントをタイトルに使いたい場合はスタイルシートに次の記述を加えます。

h1 {
font-family: 'HGS教科書体' ;
}


タイトルだけでなく、全体のフォントを変えたい場合はh1bodyに変えてください。

タイトル以外に個別に変えたいところがあれば、standardシリーズならこちらの記事を参考にスタイルシートを編集してください。

フォントは'HGS教科書体'の他にも様々なものが存在します。ただし目的のフォントがインストールされていない環境では表示できません。例えあなたの環境で表示されたとしても他の人が同じように見れるとは限らないので多用はお勧めできません。
スポンサーサイト



プラグインカテゴリ3を常に表示させる

プラグインカテゴリ3はトップページのみ表示されるようになっていますが、これをトップページ以外でも常に表示されるようにする方法を紹介します。

HTMLを編集します。

<!--▼▼ プラグイン カテゴリー3 ▼▼-->
<!--index_area-->
<!--plugin-->

<!--/plugin-->
<!--/index_area-->
<!--▲▲ プラグイン カテゴリー3 ▲▲-->


赤い部分を削除してください。これでどのページでもプラグインカテゴリ3が表示されるようになります。

カテゴリナビゲーションの日付を消す

プラグインの「カテゴリ」をクリックすると、中央カラム上部にそのカテゴリのナビゲーションが表示されます。このとき各記事の投稿日付も表示されるのですが、この日付を消す方法を紹介します。

HTMLを編集します。

<!--▼カテゴリー別記事ナビゲーション▼-->

<!--topentry-->
<li><a href="#entry<%topentry_no>" title="記事の先頭へ"><%topentry_title>&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]</a></li>
<!--/topentry-->

<!--▲カテゴリー別記事ナビゲーション▲-->


この&nbsp;[<%topentry_year>/<%topentry_month>/<%topentry_day>]を削除してください。

さらにこのカテゴリナビゲーションを太字で表示したい場合は次のように編集します。

<!--▼カテゴリー別記事ナビゲーション▼-->

<!--topentry-->
<li><b><a href="#entry<%topentry_no>" title="記事の先頭へ"><%topentry_title></a></b></li>
<!--/topentry-->

<!--▲カテゴリー別記事ナビゲーション▲-->


記事を画像で囲む

記事を画像で囲む方法を紹介します。

HTMLの下記箇所に赤い太文字の部分を加えます。


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

<table class="a_tbl" border="0" cellpadding="0" cellspacing="0">
<tr><td colspan="3" class="a_top"></td></tr>
<tr> <td class="a_left"></td><td class="a_center">


<h3><a href="<%topentry_link>" name="entry<%topentry_no>" id="entry<%topentry_no>" title="記事を参照"><%topentry_title>&nbsp;</a></h3>



</div><!--/bottom_navi-->
</div><!--/article-->

</td><td class="a_right"></td></tr>
<tr><td colspan="3" class="a_bottom"></td></tr>
</table>


<!--
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" ~



次にスタイルシートに下記記述を加えます。


/* - 記事全体 - */
.a_tbl {
width: 100%;
margin-bottom: 2em;
}

/* - 記事上部 - */
.a_top {
background-image: url(http://~);
height: 10px;
}

/* - 記事中央本文 - */
.a_center {
background-image: url(http://~);
}

/* - 記事右側 - */
.a_right {
background-image: url(http://~);
width: 10px;
}

/* - 記事左側 - */
.a_left {
background-image: url(http://~);
width: 10px;
}

/* - 記事下部 - */
.a_bottom {
background-image: url(http://~);
height: 10px;
}


http://~には画像のURLをいれてください。各width,heightの数値は画像にあわせて調整してください。

これで一応完成です。

投稿時間等がある記事文末下のスペースが空きすぎだと感じればスタイルシートの

.bottom_navi {
text-align: right;
margin-bottom: 3em;
}

赤い数値を減らすか、この行ごと削除してください。

またこの記事文末の罫線もいらなければHTMLの

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

<%topentry_more><!--/more-->
<hr noshade size="1" />
<div class="bottom_navi">

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


赤い部分の<hr noshade size="1" />を削除してください。

多少編集箇所があるので不安な方はバックアップをとって挑戦してくださいね。

記事文末にランキング投票や広告等を入れる

記事文末にランキング投票や広告等を入れる方法を紹介します。
下記HTMLの箇所に好きな文言や画像、タグ等を挿入してください。

【standardの場合】

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

<!--more-->
<%topentry_more><!--/more-->
<br />
ここにランキングや広告等を挿入

<div class="bottom_navi">

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


【lightframeの場合】

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

<!--more--><%topentry_more><!--/more-->
<br />
ここにランキングや広告等を挿入

</div><!--/ently_text-->

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


記事本文から間隔を空けたい場合は<br />の数を増やしてください。


【関連記事】



ヘッダー(タイトル部分)の真下に挿入する

ヘッダー(タイトル部分)の真下に文言や画像、タグ等を挿入する方法を紹介します。

HTMLを編集します。

<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">

<table style="margin: 1em" border="0" cellspacing="0">
<tbody>
<tr>


この箇所を次のように編集します。

<!--▼▼▼▼ メインボディ(コンテンツ部分)▼▼▼▼-->
<tr><td id="main_body">

<div class="article" style="margin: 1em 0.5em 0; line-height: 110%;" >
ここに好きな文言や画像、タグ等を挿入してください。
</div>


<table style="margin: 1em" border="0" cellspacing="0">
<tbody>
<tr>


ヘッダーの下は最も目立つところです。有効に活用してくださいね。

サイドメニュー(プラグイン)の折りたたみ

サイドメニュー(プラグインメニュー)を折りたたみ可能にする方法を紹介します。ただしこのカスタマイズは大変な割りに利便性が低いような気がするのであまりお薦めではありません。挑戦されるかたはバックアップをとっておいてくださいね。

まずHTMLの<head>から</head>までの間の好きなところに次の記述を加えます。

<head>


<script type="text/javascript">
<!--
function oritatami(id_name)
{
p_menu = document.getElementById(id_name).style;
if (p_menu.display == 'none') p_menu.display = "block"; else p_menu.display = "none";
}
// -->
</script>



</head>


次に<!--▼▼ プラグイン カテゴリー1 ▼▼-->
から<!--▲▲ プラグイン カテゴリー1 ▲▲-->
で囲まれている部分を次のように書き換えます。

<!--▼▼ プラグイン カテゴリー1 ▼▼-->
<!--plugin-->
<!--plugin_first-->
<%plugin_first_content>
<hr class="left_width" />
<!--/plugin_first-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー1 ▲▲-->


次に<!--▼▼ プラグイン カテゴリー2 ▼▼-->
から<!--▲▲ プラグイン カテゴリー2 ▲▲-->
で囲まれている部分を次のように書き換えます。

<!--▼▼ プラグイン カテゴリー2 ▼▼-->
<!--plugin-->
<!--plugin_second-->
<%plugin_second_content>
<hr class="right_width" />
<!--/plugin_second-->
<!--/plugin-->
<!--▲▲ プラグイン カテゴリー2 ▲▲-->


テンプレートのHTMLの編集はここまでです。
ここからプラグインのHTMLを編集します。

まずプラグインカテゴリー1にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。

<div class="menu_title" style="text-align:<%plugin_first_talign>">
<a href="javascript:oritatami('p1')">
プラグインタイトル</a></div>
<div id="p1" style="DISPLAY: block">
<table width="100%"><tr><td class="menu_cont">
<div style="margin: 10px 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description></div>
<div style="margin: 10px 0; text-align:<%plugin_first_align>">



(既存のプラグインHTML)


</div>
<div style="margin: 10px 0 0 0; text-align:<%plugin_first_ialign>">
<%plugin_first_description2></div>
</td></tr></table>
</div>


プラグインタイトルには「最近の記事」や「カテゴリ」等そのプラグインのタイトルに置き換えてください。

p1というところが2箇所あります。ここには他のプラグインを編集する度にp2,p3…など適当な重ならない名前を入れてください。

blockと記載されているところがあります。初期状態で折りたたまれていてほしいプラグインにはnoneと書き換えてください。

FC2管理画面「プラグインの設定」でタイトルを入力するところがありますが、ここは空白にしてください。

次にプラグインカテゴリー2にある全てのプラグインを編集します。
既存のHTMLの上下に次のような記述を加えます。

<div class="menu_title" style="text-align:<%plugin_second_talign>">
<a href="javascript:oritatami('p10')">
プラグインタイトル</a></div>
<div id="p10" style="DISPLAY: block">
<table width="100%"><tr><td class="menu_cont">
<div style="margin: 10px 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description></div>
<div style="margin: 10px 0; text-align:<%plugin_second_align>">



(既存のプラグインHTML)


</div>
<div style="margin: 10px 0 0 0; text-align:<%plugin_second_ialign>">
<%plugin_second_description2></div>
</td></tr></table>
</div>


プラグインカテゴリー1のときと同じようにタイトルや変数名を適当なものに変えてください。

プラグインのHTMLを既にカスタマイズしている方は、そのバックアップもとっておきましょう。

かなり大変なカスタマイズです。挑戦されるかたは頑張ってくださいね。

バックアップをとりましょう

カスタマイズに挑戦する前にはバックアップをとっておくことをお薦めします。間違った編集をして元に戻らなくなってしまっては大変です。

1. HTML上に適当にマウスカーソルを置く
2. [Ctrl]を押しながらAを押す。(選択)
3. [Ctrl]を押しながらCを押す。(コピー)
4. メモ帳を開く
5. メモ帳上にマウスカーソルを置く
6. [Ctrl]を押しながらVを押す。(貼り付け)
7. 適当な名前をつけて保存する。

スタイルシートも同じようにメモ帳に貼り付けて保存してください。
これでHTMLとスタイルシートのバックアップがとれました。

カスタマイズに失敗して元に戻したいときは

1. HTMLのバックアップをとっておいたメモ帳を開く
2. メモ帳上にマウスカーソルを置く。
3. [Ctrl]を押しながらAを押す。(選択)
4. [Ctrl]を押しながらCを押す。(コピー)
5. HTML編集画面のソースコード上にマウスカーソルを置く
6. [Ctrl]を押しながらAを押す。(選択)
7. [Ctrl]を押しながらVを押す。(貼り付け)

スタイルシートも同じようにバックアップをとっておいたメモ帳からコピーして貼り付けてください。これで元に戻ります。

ほとんどカスタマイズしていない状態ならばもう一度テンプレートをダウンロードしてまたカスタマイズに挑戦すれば済むことですが、既にかなり手を加えた方にとってはこれは大変な作業だと思います。

万が一に備えてバックアップをとっておけば安心してカスタマイズに挑戦できますね。
[ 2006/06/12 00:34 ] 雑記 | TB(1) | CM(1)

お待たせして大変申し訳ありません

今ちょっと忙しいのですが時間が出来次第対応させていただきますのでもう少々お待ちください。誠に申し訳ありません。
[ 2006/06/01 00:15 ] 雑記 | TB(0) | CM(4)
ブログ内検索1
プロフィール

いたお

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

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

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

05 | 2006/06 | 07
- - - - 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 -
ユーザータグ


△ ページトップへ戻る