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

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

記事タイトルの色を変える (lightframe) [2009/11/26]
記事とコメント欄の間にフリースペースを設置 (standard) [2009/11/25]
親子カテゴリ対応サイトマップに新着表示Newマークを付ける [2009/11/25]
ページ送りナビゲーションに枠を付ける [2009/11/23]
プラグインフリーエリア等の中身を横に４つ並べて表示する [2009/11/19]
プラグイン３の幅を広げる(standard) [2009/11/10]

≪ 前月 | 2009年11月 | 翌月 ≫

記事タイトルの色を変える (lightframe)

共有テンプレート「lightframeシリーズ」において、記事タイトルの色を変更する方法を紹介します。

スタイルシートに以下のような箇所があります。このカラーコード等をお好きな様に設定してください。

/* ▼ 記事 ▼ */
～

/* ▽文字色とリンクの下線有無▽ */
h2 a:link { color:#555555; text-decoration:none; } /* 通常 */
h2 a:active { color:#555555; text-decoration:none; } /*実行中*/
h2 a:visited { color:#555555; text-decoration:none; } /*訪問済*/
h2 a:hover { color:#0000ff; text-decoration:none; } /*マウス*/
/* △文字色とリンクの下線有無△ */

～
/* ▲ 記事 ▲ */

スポンサーサイト

[ 2009/11/26 23:02 ] カスタマイズ lightframe 専用 | TB(0) | CM(8)

記事とコメント欄の間にフリースペースを設置 (standard)

以前紹介した「記事とコメント欄の間にフリースペースを設置」の方法はlightframeシリーズを対象としたものでした。
standardシリーズの場合は、HTMLの以下の箇所に赤い部分を加えてください。

<div class="menu_outline3">
<div class="menu_title3" style="text-align:center">フリーエリアのタイトル</div>
<div class="menu_cont3" style="text-align:center">
フリーエリアの内容
</div>
</div>

左寄せ表示にしたい場合はcenterをleftとしてください。

[ 2009/11/25 22:37 ] カスタマイズ standard 専用 | TB(0) | CM(1)

親子カテゴリ対応サイトマップに新着表示Newマークを付ける

以前紹介した親子カテゴリ対応サイトマップに、新着表示であるNewマークを表示する方法を紹介します。

【続きを読む】

[ 2009/11/25 22:07 ] カスタマイズ共通カスタマイズ | TB(4) | CM(12)

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

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

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

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;
}

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

[ 2009/11/23 14:46 ] カスタマイズ共通カスタマイズ | TB(0) | CM(2)

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

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

<table style="width:100%;"><tr>
<td style="width:25%; vertical-align:top;">中身１</td>
<td style="width:25%; vertical-align:top;">中身２</td>
<td style="width:25%; vertical-align:top;">中身３</td>
<td style="width:25%; vertical-align:top;">中身４</td>
</tr></table>

【2010/01/18 追記】<td>～</td>の数を変えて幅(width:25%)の数値を調整すれば、いくつでも横に並べることができます。table内にできる僅かな隙間も埋めたいときは、tableタグにcellspacing="0" cellpadding="0"を設定してください。