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

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

リリーステンプレート一覧

standard_monotone
standard_sepia
standard_wide_white
fullmoon_howling
white_eagle

standard_blue
standard_skyblue
standard_green
standard_orange
standard_pink

lightframe_monotone
lightframe_white
lightframe_pink

他にも様々な人が作成した4800を超える共用テンプレートがある
FC2ブログをあなたもはじめてみませんか？

意見・要望・感想・アドバイス・バグ報告などあればお聞かせください。

FC2 Blog Ranking 人気ブログランキング

記事掲載予定

記事掲載までもう少しお待ちくださいm(__)m

メニューバーのドロップダウン
 メニューバーの画像（ロールオーバー）

メニューバーのドロップダウン

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューをドロップダウンさせるカスタマイズを紹介します。

ドロップダウンは２段階（第３階層の表示）まで対応しました。

IE6以下を無視すればCSSのみでドロップダウンが可能なのですが、まだまだ無視できる数ではないため一部JavaScriptを用いています。

【続きを読む】

【続きを閉じる】

HTMLを編集します。
赤とオレンジの部分が新たに追加した箇所です。
第３階層まで必要ない場合はオレンジ部分を削除してください。

<ul id="menu_bar">
<li><a href="<%url>">トップページ</a></li>
<li><a href="<%url>archives.html">サイトマップ</a></li>
<li><a href="<%url>blog-entry-1.html">記事１</a></li>
<li><a href="<%url>blog-entry-2.html">記事２</a></li>
<li><a href="<%url>blog-category-1.html">カテゴリ１</a></li>
<li><a href="<%url>blog-category-2.html">カテゴリ２</a></li>
<li><a href="<%url>blog-category-3.html">カテゴリ３</a></li>

<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第１階層</a>
<ul>
<li><a href="#">第２階層</a></li>
<li><a href="#">第２階層</a></li>
<li><a href="#">第２階層</a></li>
<li class="menu" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'"><a href="#">第２階層</a>
<ul>
<li><a href="#">第３階層</a></li>
<li><a href="#">第３階層</a></li>
<li><a href="#">第３階層</a></li>
</ul>
</li>
</ul>
</li>

</ul>

次にスタイルシートの末尾に以下を加えてください。
既にメニューバーを実装済みの方は赤い部分のみ追加してください。

/* ▼メニューバー▼ */
ul#menu_bar {
font-size: 80%; /* 文字サイズ */
height:25px; /* 高さ */
background-color:#000000; /* 背景色 */
padding-left:0px;
margin-left:0px;
margin-top:0px; /* 上の間隔 */
margin-bottom:5px; /* 下の間隔 */
}

#menu_bar li {
list-style-type:none;
float:left;
line-height:25px; /* 高さ */
margin:0px;
padding:0px;
}

#menu_bar li a {
display:block;
text-align:center;
width:100px; /* １つのメニューボタンの幅 */
border-right:1px solid #333333; /* 区切り線 */
color:#ffffff; /* リンク文字の色 */
background-color:#000000; /* メニューボタンの背景 */
text-decoration:none;
}

#menu_bar li a:hover{
color:#ffffff; /* マウスが乗ったときのリンク文字の色 */
background-color:#222222; /* マウスが乗ったときの背景色 */
text-decoration:none;
}
/* ▲メニューバー▲ */

/* ▼メニューバー（ドロップダウン）▼ */

#menu_bar ul {
position:absolute;
margin:0;
padding:0;
}

#menu_bar li {
position:relative;
margin:0;
padding:0;
}

#menu_bar li ul li {
float:none;
}

#menu_bar li.menu ul,
#menu_bar li.menu ul li.menu ul,
#menu_bar li.menu_on ul li.menu ul {
display:none;
}

#menu_bar li.menu_on ul {
position:absolute;
display:block;
top:100%;
left:0;
}

#menu_bar li.menu_on ul li.menu_on ul {
position:absolute;
display:block;
top:0;
left:100%;
}

/* ▽IE6バグ対応▽ */
* html #menu_bar li li,
* html #menu_bar li li li {
font-size:1px;
line-height:0;
}
* html #menu_bar li li a,
* html #menu_bar li li li a {
display:block;
font-size:10pt;
line-height:25px;
}
/* △IE6バグ対応△ */

#menu_bar li li a,
#menu_bar li li li a {
border-top:1px solid #111111; /* 区切り線 */
}

/* ドロップダウンリストの透過（IE6以下未対応） */
#menu_bar > li > ul {
filter:alpha(opacity=90);
-moz-opacity: 0.9;
opacity: 0.9;
}

/* ▲メニューバー（ドロップダウン）▲ */

これでドロップダウンメニューが出来ます。
区切り線やドロップダウンリストの透過はお好きな様に設定してください。

ドロップダウンは２段階（第３階層の表示）まで対応しているので、親子カテゴリの表示に利用しても良さそうですね。

記事編集 [ 2009/07/03 17:55 ] カスタマイズ　共通 | TB(0) | CM(4)

はてなブックマークの表示

はてなブックマークされたFC2ブログの記事に、「○○users」を表示する方法を紹介します。

【参考記事】
自分のブログに「○○users」を表示する
はてなブックマークアイコン15色キイタ？オクサンアラヤダワァ

【続きを読む】

記事編集 [ 2009/06/24 01:08 ] カスタマイズ　共通 | TB(1) | CM(12)

記事末尾の間隔調整（lightframe）

当サイトのテンプレート「lightframe」において

記事末尾（続きを読む）から

記事ナビゲーション
[ 0000/00/00 00:00 ] カテゴリ | TB(0) | CM(0)

までの間の間隔を調整するには、スタイルシートの末尾に以下を加えてください。

.ently_navi {
margin-top:20px;
}

数値はお好みにあわせて調節してください。

記事編集 [ 2009/06/22 21:34 ] カスタマイズ　lightframe | TB(0) | CM(1)

ファビコンの作り方

ファビコンとは、お気に入りに入れたとき等に表示されるアイコン画像です。

FC2ブログの場合は、初期状態で

が表示されます。

このファビコンを作成、設定する方法を紹介します。

【参考記事】
ファビコン・faviconの表示ネテモサメテモ -B'zなブログ-
ファビコンメーカー - favicon.ico作成
初心者でもできる簡単FC2ブログの作り方ファビコンをつけよう！
Favicon Japan!! -16×16の小宇宙ファビコン-

【続きを読む】

記事編集 [ 2009/06/22 21:08 ] カスタマイズ　共通 | TB(1) | CM(2)

記事文末に広告等を表示（続きを読む＆個別記事）

以前に紹介した記事文末にランキング投票や広告等を入れる方法は、追記展開前にも「続きを読む」の下に表示されるものでした。

今回紹介するカスタマイズは追記展開前には表示せず、「続きを読む」の展開後、及び個別記事ページにも表示させるものです。

【続きを読む】

記事編集 [ 2009/06/15 21:51 ] カスタマイズ　共通 | TB(0) | CM(6)

便利ナビに枠をつける (lightframe)

当サイトのテンプレートには、全てmyhurtさんの便利ナビ機能を搭載しています。

便利ナビとは、カテゴリ、検索、月別アーカイブのページで、ページ上部に表示されるナビゲーションです。

当サイトのテンプレート、lightframeシリーズの便利ナビに枠を表示するカスタマイズを紹介します。

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