彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




*    *    *

Information

□ 雑記 □

「for_novel_sky」の表紙カスタマイズについてのお返事

「for_novel_sky」のインデックスを「for_novel_bamboo」のようなレイアウトに改造する方法について、先週コメントをいただきました。

 現在「for_novel_bamboo」を共有に申請しているので、承認後にダウンロードののち、「for_novel_sky」を改造するのではなく「for_novel_bamboo」の画像を変更していただいた方が、説明するのも、カスタマイズ作業も簡単だと思います。
 が、所用で一週間お返事をお待たせした上に、更に申請が通るのに日数がかかるとなれば、ちょっと申し訳ないような気がしますので、以下にざっくりと「for_novel_bamboo」のインデックス画面のHTMLと、関係するCSSを掲載しておきます。

 まずは、「for_novel_bamboo」のHTML。

<!-- ▽ インデックス画面 -->
<!--index_area-->
<div class="index">
<div class="space_i">+</div>

<h1><%blog_name></h1>
<div class="intro"><span class="black"><%introduction></span></div>

<!--
 この下、「▼ フリースペース」から「▲ フリースペース」で囲まれた範囲は、自由にお使いいただけます。
 あらかじめ用意してある汎用文は、改造を苦手とする方のために用意したものですので、ご自分に適合した文章に差し替えて下さい。
-->
<div class="preface rev"><span class="black">
<!-- ▼ フリースペース1 -->
「<%blog_name>」では、<%author_name>が綴った小説を掲載しています。<br />
どうぞごゆっくりご覧下さい。
<!-- ▲ フリースペース1 -->
</span></div>

<div class="info rev">
<!-- ▼ フリースペース2 -->
ここに掲載されている物語は完全なるフィクションであり、実在するいかなる個人、団体とも関係ありません。
<!-- ▲ フリースペース2 -->
</div>

<!-- ▼ メニュー -->
<div class="menu">
<h2 class="menuhead">Contents</h2>
<div class="item all"><a href="<%url>?tag=*" title="小説一覧">Novel List</a></div>
<!--category-->
<!--category_nosub-->
<div class="item cat"><a href="<%category_link>" title="<%category_name>"><%category_name></a></div>
<!--/category_nosub-->
<!--category_parent-->
<div class="item cat"><%category_name></div>
<!-- 子カテゴリ折りたたみカスタマイズ箇所【1】 -->
<!--/category_parent-->
<!--category_sub_hasnext-->
<div class="item sub"><a href="<%category_link>" title="<%category_name>"><%category_name></a></div>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
<div class="item sub"><a href="<%category_link>" title="<%category_name>"><%category_name></a></div>
<!-- 子カテゴリ折りたたみカスタマイズ箇所【2】 -->
<!--/category_sub_end-->
<!--/category-->
<div>&nbsp;</div>
<div class="item add"><a href="<%url>archives.html" title="書庫検索もこちら">更新履歴</a></div>
<div class="item add"><a href="<%url>?page=0">通常ブログ画面</a></div>
<!--
 掲示板や別ブログ、別サイトなどへのリンクをメニューに加えたい場合は、以下の「▼ 追加メニュー」と「▲ 追加メニュー」で囲まれた1行を、追加したいメニューの数だけコピーしてお使いください。
-->
<!-- ↓ 追加メニュー(← 使用時はこの行を丸々削除してください →)
<div class="item add"><a href="リンク先のアドレス">リンク先の名称</a></div>
↑ 追加メニュー(← 使用時はこの行を丸々削除してください →) -->
</div>
<!-- ▲ メニュー -->

<div class="new">
<h3 class="rev">What's New</h3>
<div class="memo rev">
<!--recent-->
<%recent_month>/<%recent_day>&nbsp;&nbsp;<a href="<%recent_link>" title="<%recent_body>" class="black"><%recent_title></a><br />
<!--/recent-->
</div>
<h3 class="rev">Recently Comment</h3>
<div class="memo rev">
<!--rcomment-->
<%rcomment_month>/<%rcomment_day>&nbsp;&nbsp;<a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>" class="black"><%rcomment_name> @ <%rcomment_etitle></a><br />
<!--/rcomment-->
</div>
<h3 class="rev">Recently Trackback</h3>
<div class="memo rev">
<!--rtrackback-->
<%rtrackback_month>/<%rtrackback_day>&nbsp;&nbsp;<a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_title>" class="black"><%rtrackback_blog_name> @ <%rtrackback_etitle></a><br />
<!--/rtrackback-->
</div>
</div>

</div>

<div class="free rev">
<!-- ▼ フリースペース3 -->
<!-- ▲ フリースペース3 -->
</div>

<div class="pagetop rev"><a href="<%url>?admin" title="管理画面へ">Admin</a>&nbsp;&nbsp;<a href="#pagetop" title="ページトップへ">▲</a></div>

<!--/index_area-->
<!-- △ インデックス画面 -->



「for_novel_sky」とは、微妙な部分がちょっとだけ変わっているんです。

 それで、CSSですが、「for_novel_sky」の「/* 表紙外枠 */」から「/* 表紙 新着案内枠 */」の部分を削除して、その代わりに以下を付け加えてください。

/* 反転文字用背景 */
.black { background-color:#000000; padding:0px 5px; }

/* ページ全体枠の上下paddingの代わり(FireFoxで背景画像がズレるのを防ぐため) */
.space { color:#000000; font-size:1%; text-align:center; height:10px; }

/* 表紙外枠 */
.index { width:100%; min-height:768px; background-image:url(http://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/bls_1.jpg); background-repeat:no-repeat; background-position:right top; padding0px; margin:0px; }

/* 表紙外枠の上下paddingの代わり(FireFoxで背景画像がズレるのを防ぐため) */
.space_i { color:#000000; font-size:1%; text-align:center; height:30px; }

/* 表紙 ブログタイトル */
.index h1 { color:#ffffff; font-size:30px; font-weight:bold; text-align:left; background-image:none; border:none; padding:20px 25px 0px 25px; margin:0px; }

/* 表紙 ブログ説明文 */
.intro { color:#ffffff; font-size:84%; border-bottom:solid 1px #ffffff; margin:20px 40px 0px 0px; }

/* 表紙 フリースペース1枠 */
.preface { font-size:84%; margin:15px 40px 0px 20px; }

/* 表紙 フリースペース2枠 */
.info { font-size:84%; width:250px; margin:15px 0px 0px 20px; }

/* 表紙 フリースペース3枠 */
.free { line-height:150%; background-color:#536646; padding:10px 20px; margin:40px 0px 0px 0px; }

/* 表紙 メニュー枠 */
.menu { font-size:90%; width:16em; padding:0px; margin:15px 0px 0px 40px; }

/* 表紙 メニュー見出し */
h2.menuhead { font-size:110%; color:#203744; font-weight:bold; background-color:#869975; padding:6px 1em 4px 1em; margin:0px; }

/* 表紙 メニューリスト */
.item { color:#274c41; font-weight:bold; line-height:100%; padding:4px 1em 2px 1em; margin:5px 0px 0px 0px; }
.item a:link { color:#1a332b; }
.item a:visited { color:#1a332b; }
.item a:hover { color:#2f5d50; }
.item a:active { color:#1a332b; }

/* 表紙 メニュー項目(カテゴリ) */
.cat { background-color:#c1d8ac; }

/* 表紙 メニュー項目(子カテゴリ) */
.sub { background-color:#a8bf93; margin-left:1em; }

/* 表紙 メニュー項目(小説一覧) */
.all { background-color:#a6c8b2; }

/* 表紙 メニュー追加項目 */
.add { background-color:#869975; }

/* 表紙 新着案内枠 */
.new { margin:40px 20% 0px 20px; clear:both; }



 color(文字色)とか、background-color(背景色)とか、このままですと「for_novel_bamboo」の緑系になってしまいます。元の青系がいい場合は、「for_novel_sky」の分を削除する前に、色指定(#から始まる半角英数六文字)の部分だけ控えをとっておいてください。

 なんだか、説明になっていない単なる情報の羅列のような気もしますが、「for_novel_bamboo」の承認が待ちきれない場合にどうぞご利用ください。



*    *    *

Information

Date:2009/07/28
Trackback:0
Comment:1

Comment

[102] 参考にさせていただきます!

こんにちは!
早速のテンプレート申請ありがとうございます。

そして…上記の書き換えを参考にさせていただきます!
ご丁寧に教えていただき、本当にありがとうございました!!
サポートをしっかりしていただける管理人様のテンプレートですので、
これからも安心してダウンロード及び使用させていただきたいと思います。
2009/07/30 【*koyuking*】 URL [編集] 

コメントの投稿

コメント書き込みの前に、是非一度「コメントについて」に目をお通しください。







 ブログ管理者以外には秘密にする

Trackback

TrackbackUrl:http://greenbeetle2.blog117.fc2.com/tb.php/55-1d5d7a37
この記事にトラックバックする(FC2ブログユーザー)

 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。