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

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

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --/--/-- --:-- ] スポンサー広告 | TB(-) | CM(-)

便利ナビの背景を画像にする

私のテンプレートはmyhurtさんの便利ナビ機能を標準装備しています。
カテゴリ、カレンダー、検索結果を表示するときに該当記事一覧を上部に表示してナビゲーションしてくれるとても便利な機能です。
このナビゲーションが表示される部分の背景画像を設定するカスタマイズを紹介します。
このカスタマイズはテンプレートstandardが対象です。

プラグインカテゴリ3のデザインを変える

私のテンプレートは全てプラグインカテゴリ3の位置を中央カラムの上(タイトルの真下)に配置しています。ここは最も目立つ所ですので上手にカスタマイズして有効活用してください。

追記【続きを読む】を同一ページに表示させる

追記表示(続きを読む)をページ遷移させることなくシームレスに同一ページに表示させる方法を紹介します。
この機能は現在(2006/09/01以後 Ver.7)には標準装備されています。それ以前のバージョンをお使いの方は下記を参考にカスタマイズしてください。

サイト名でコメントリンクを貼る

私のテンプレートにはコメント投稿時にメール記入欄がありません。代わりにサイト名記入欄があります。サイト名でリンクされることは検索エンジンで上位表示されるために有利と言われています。アクセスアップに興味がある方は私のテンプレートを使用している方と交流を持つと良いかも知れません。

記事で大文字を使っても文字が重ならないようにする

IE系ブラウザで表示すると、記事に大文字を使い複数行になると文字が重なってしまう問題がありました。これを解決する方法を紹介します。

【2006/09/07追記】
この機能は現在(2006/09/01以後 Ver.7)標準装備されています。
それ以前の旧バージョンの方は下記を参考にカスタマイズしてください。


スタイルシートを編集します。


/****************** ▼▼ メインボディ(コンテンツ部) ▼▼ */


/****************** ▼ エントリーブロック(中央カラム) ▼ */


/* エントリー(記事)スタイル */
.article {
/* ---------------------------------------------------- */
color: #666666; /* エントリー(記事)の文字の色 */
/* ---------------------------------------------------- */
font-size: 80%; /* エントリー(記事)の文字の大きさ */
/* ---------------------------------------------------- */
padding: 0 1em;
line-height: 1.5;
}


赤い部分を上記数値にしてください。以前より少し普段の文字サイズが大きくなりますが大文字を使用しても文字が重ならなくなります。

コメント(CM)のリンク先設定

私のテンプレートは記事文末のコメント(CM)をクリックしても記事の一番上が画面に表示されていました。
記事が短い場合はこれでも良いかもしれませんが、長い場合はコメントまでスクロールさせるのは面倒です。

そこで(CM)をクリックしたときには、コメントが画面の一番上にくるようにする方法を紹介します。

【2006/09/07追記】
この機能は現在(2006/09/01以後 Ver.7)標準装備されています。
それ以前の旧バージョンの方は下記を参考にカスタマイズしてください。


<!--▼コメント表示▼-->
<a name="comment_list"></a><br />
<!--comment_area-->
<div class="article">


上記HTMLソースに赤い文字で記されている
<a name="comment_list"></a><br />
を追加してください。

長い文章を書く人にはお薦めのカスタマイズです。

「続きを読む」のリンク先設定

下記カスタマイズはVer.6以前のテンプレートを使っている方のみ有効です。追記【続きを読む】を同一ページに表示させるカスタマイズもお薦めです。こちらは現在(2006/09/01以後 Ver.7)には標準装備されています。

個別記事表示時のページナビゲーションについて

個別記事表示時からも次ページ(次の個別記事)前ページ(前の個別記事)へ移動できるページナビゲーションを表示させる方法を紹介します。

【2006/09/07追記】
この機能は現在(2006/09/01以後 Ver.7)標準装備されています。
それ以前の旧バージョンの方は下記を参考にカスタマイズしてください。



現状のHTMLでは次のようなところがあります。

<!--▼ページナビゲーション▼-->
<p class="page_navi">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ戻る">≪前ページ</a> <!--/prevpage-->
| <a href="<%url>">HOME</a> |
<!--nextpage--><a href="<%nextpage_url>" title="次のページへ進む">次ページ≫</a><!--/nextpage-->
</p><!--page_navi-->
<!--▲ページナビゲーション▲-->



これを次のように書き換えます。


<!--permanent_area-->
<!--▼ページナビゲーション▼-->
<p class="page_navi">
<!--preventry--><a href="<%preventry_url>" title="前のページへ戻る">≪前ページ</a> <!--/preventry-->
| <a href="<%url>">HOME</a> |
<!--nextentry--><a href="<%nextentry_url>" title="次のページへ進む">次ページ≫</a><!--/nextentry-->
</p><!--page_navi-->
<!--▲ページナビゲーション▲-->
<!--/permanent_area-->

<!--not_permanent_area-->
<!--▼ページナビゲーション▼-->
<p class="page_navi">
<!--prevpage--><a href="<%prevpage_url>" title="前のページへ戻る">≪前ページ</a> <!--/prevpage-->
| <a href="<%url>">HOME</a> |
<!--nextpage--><a href="<%nextpage_url>" title="次のページへ進む">次ページ≫</a><!--/nextpage-->
</p><!--page_navi-->
<!--▲ページナビゲーション▲-->
<!--/not_permanent_area-->



これで個別記事にもページナビゲーションが表示されます。
≪前ページ | HOME | 次ページ≫
この前ページ、次ページの部分を各記事タイトルにしたい場合は

前ページ
<%preventry_title>
次ページ
<%nextentry_title>
と書き換えてください。

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

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

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" />を削除してください。

多少編集箇所があるので不安な方はバックアップをとって挑戦してくださいね。
ブログ内検索1
プロフィール

いたお

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

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

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

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


△ ページトップへ戻る
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。