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

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

記事タイトルの色を変える (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; } /*マウス*/
/* △文字色とリンクの下線有無△ */


/* ▲ 記事 ▲ */


スポンサーサイト



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

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

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

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


<!--▼コメント表示▼-->
<!--comment_area-->


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

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

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

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

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

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

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>



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

<table style="width:100%;" cellspacing="0" cellpadding="0" ><tr>

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

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

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

いたお

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 - - - - -
ユーザータグ


△ ページトップへ戻る