Novel テンプレート

novel-Jf-Adventure

表紙は、海賊旗と古地図と海戦の３枚の画像をjQueryでクロスフェードさせています。JavaScript無効時は地図の固定画像。
地図に海賊旗に洞窟と、アドベンチャーゲームみたいなこのテンプレートをつくってしまった、そもそもの発端はネットで見つけたこの古地図です。

どうやらアイスランドの地図のようですが、管理人は、海の怪物が色鮮やかに描かれた、このすてきな地図に完全にKOされました。


実は、海と帆船のテンプレートVoyageも、これを使いたいがために作ったのですが、作りこんでいくうちに、他のページとイメージが合わず、その時はやむを得ず、他のもっと普通の古地図を使いました。しかし、どうしても諦めきれず、今度こそと、この古地図をメインにしてテンプレートをデザインしていったら、こうなっちゃったわけです…(^^ゞ

だって、この地図、宝島の地図にぴったりじゃぁないですか！
怪物達の守る島に隠されているものときたら、財宝にきまってます。
周りは海なんですから、隠したのは当然海賊でしょう。
島の中で財宝を隠すとしたら、これまた当然洞窟の中、そして、その洞窟には財宝を守るドラゴンがいたりする…

どうみても、小説向きとは言えない、主張の激しすぎるテンプレ（自覚してます＜m(__)m＞）ですので、一般用で申請したほうがまだ利用者も見込めるでしょうが、そうすると、NovelListの背景にしたこの古地図が目にとまり難くなる…それはちょっと、別の意味で本末転倒になってしまうので、あえて、小説用で公開しました。




古地図の次にお気に入りは全記事一覧ページに鎮座ましますアーサー・ラッカムが描いたドラゴンです。かっこよくて素敵なドラゴン様でしょう？




洞窟内の財宝やら骸骨は、16世紀から17世紀ヨーロッパ北部で盛んだったヴァニタス（ラテン語: vanitas）というジャンルの静物画からそれっぽいのを拝借して貼りつけました。


というわけで、管理人の趣味(妄想？)丸出しで作成したテンプレートですが、全てのページの背景画像にものすごく思い入れと手間暇かけているので、衣替え以外の画像変更は一切禁止です。

　画像検索からお見えになる方もいるかと思いますが、拙宅が配布しているのはあくまでテンプレートです。このテンプレートの画像は管理人が自力加工したものですが、配布はしておりません。テンプレートに用いている画像の流用・転用はご遠慮ください。

表紙メニューをクリックするとJava Scriptが有効な場合は、右側にポップアップでその内容説明が表示されます。
Java Scriptがオフの場合は、ﾒﾆｭｰの内容が最初から全て画像の下に表示されます。
ポップアップ表示のカスタマイズについてはコチラ
冒頭の画像をクリックするとテンプレートがプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。Javacript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

（ver1302）改訂内容

• PC用にも漸く投稿画像のサムネイル画像を表示できる変数が追加されましたので、ver1302より導入。
• 記事にそのブログでアップロードした投稿画像がある場合、タグ・検索・月別ページでは、サムネイルが表示されます。但し、別ブログでアップした画像や他から引っ張ってきた画像(直リンクバナー等)はサムネイル表示されません。
• 個別記事ページと目次ページの左側に表示される目次、関連もくじに折りたたみ機能導入。
• JavaScript有効時は、折りたたまれ、クリックすると開示されます。
• 2013.5月以降に公開されたテンプレートについては全てver1302で申請、もしくは改訂済みですが、それ以前に公開されたテンプレートも順次改訂していきます。

関連記事

• novel-Jf-Minne中世騎士物語風テンプレート
• novel-Jf-Adventure アドベンチャーゲーム風テンプレート
• novel-Jf-Minnesang 中世彩飾写本風テンプレート

表紙は、中世のマッセラ写本から、恋人達の挿絵をjQueryでクロスフェードさせています。
壁紙は海外の素材サイトThe Inspiration Gallery様からお借りしましたが、それ以外の画像は全てネットの歴史ライブラリーやら中世関連のサイトを探し回って管理人が自力加工しました。
横道にそれまくったあげく、試行錯誤を繰り返し、とんでもなく手がかかった労作なのです、これでも。


彩飾（装飾）写本の英名は「illuminated manuscript」。その名の通り、金箔や細密画で絢爛豪華に彩飾され光り輝いています。
こんな感じ↓


その雰囲気を少しでもテンプレート上に再現させたくて、苦心しました。
記事を囲む葉っぱが不自然にキンキラしているのは、金箔っぽく見せかけるためだったりします。
少しは、「illuminated manuscript＝輝く写本」風に見えていればよいのですが…(^^ゞ

ポップアップ表示だけでなく、クロスフェードのために、jQueryを用いているせいか、時々スタイルシートの読み込みが遅れるようです。カスタマイズした後など、スタイルシートが反映されない状態になった場合は更新ボタンか、CtrlプラスF5で正常表示にもどると思います。

こういう状態ですと、共有申請してもまたはじかれそうなので、とりあえずサイト内配布します。
ご利用くださる場合はコチラ修正中につき公開中止

2013.5.17.追記
紆余曲折を経て、共有テンプレートとして申請、承認されましたので、投稿日を変更して更新！

表紙メニューをクリックするとJava Scriptが有効な場合は、右側にポップアップでその内容説明が表示されます。
Java Scriptがオフの場合は、ﾒﾆｭｰの内容が最初から全て画像の下に表示されます。
ポップアップ表示のカスタマイズについてはコチラ

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

　羊皮紙や装飾写本・古紙の画像検索からお見えになる方もいるかと思いますが、拙宅が配布しているのはあくまでテンプレートです。羊皮紙や装飾写本・古紙画像は管理人が自力加工したものですが、配布はしておりません。テンプレートに用いている画像の流用・転用はご遠慮ください。

（ver1302）改訂内容

• PC用にも漸く投稿画像のサムネイル画像を表示できる変数が追加されましたので、ver1302より導入。
• 記事にそのブログでアップロードした投稿画像がある場合、タグ・検索・月別ページでは、サムネイルが表示されます。但し、別ブログでアップした画像や他から引っ張ってきた画像(直リンクバナー等)はサムネイル表示されません。
• 個別記事ページと目次ページの左側に表示される目次、関連もくじに折りたたみ機能導入。
• JavaScript有効時は、折りたたまれ、クリックすると開示されます。
• 2013.5月以降に公開されたテンプレートについては全てver1302で申請、もしくは改訂済みですが、それ以前に公開されたテンプレートも順次改訂していきます。

関連記事

• novel-Jf-Adventure アドベンチャーゲーム風テンプレート
• novel-Jf-Minnesang 中世彩飾写本風テンプレート
• novel-Jf-Heart3 赤いハートのバレンタインテンプレ

一般ブログスタイルで共有申請したので小説用はサイト内配布します
フルスクリーンやクロスフェードのためのソースも追加済みですので、
normal-Sf-Unicorn　もしくは、normal-Jf-UnicornをDL後、
HTMLを差し換えて、ご利用くださいませ～
(スタイルシートは共通です)

但し、サイト内配布であっても
利用規約に則ってのご利用をお願いいたします。

利用規約抜粋

Novelテンプレートの再配布（共有テンプレート登録含む）、営利目的のご利用はお断りします。
商用サイト・素材配布サイトでご利用の際は、ご連絡をお願いいたします。

（テンプレートやブログによっては、ご利用できない場合があります。ブログを確認させていただき、作品をお借りしている素材サイト様の利用規約に照らし合わせた上で、ご返答させていただきます。）

衣替え以外の画像の変更は原則不可とさせていただきます。

アダルト、法律違反サイトは使用不可です。
一般ブログとして登録していても、営利系アダルトコンテンツ(出会い系含む)への宣伝リンクがある場合もご利用はお断り致します。

但し、年齢制限のある小説を公開していても、サイト内に営利系アダルトコンテンツへの宣伝リンク（出会い系含む）が一つもない場合には使用可です。

以下の　コチラ　をクリックして表示された内容をコピペしてHTMLの編集部分に貼りつけます。
詳しくは　サイト内配布テンプレートのご利用方法

Sfタイプ小説用HTMLは　コチラ　をクリック



Jfタイプ小説用HTMLは　コチラ　をクリック

画像検索からお見えになる方もいるかと思いますが、拙宅が配布しているのはあくまでテンプレート本体のみです。このテンプレートに用いている画像は全て管理人が自力加工したものですが、配布はしておりません。テンプレートに用いている画像の流用・転用はご遠慮ください。

関連記事

• 貴婦人と一角獣のテンプレート小説用HTMLサイト内配布
• 外部スタイルシート非対応端末向けHTMLをサイト内配布
• novel-Sf-voyage小説用HTMLのサイト内配布

▼ Comment List(0)

表紙メニューがポップアップで表示されるJfタイプの貴婦人と一角獣のテンプレート一般用。
表紙デザインが違うだけで、他ページは全てnormal-Sf-Unicornと同じです。

普段なら、サイト内配布なり、衣替えで済ますところですが、
せっかく「貴婦人と一角獣展」が開催されていることですし、
一般用テンプレでJタイプをまだ共有申請も公開もしていなかったので、こちらも共有申請しちゃいます！


上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。Javacript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

　画像検索からお見えになる方もいるかと思いますが、拙宅が配布しているのはあくまでテンプレートです。このテンプレートの画像は管理人が自力加工したものですが、配布はしておりません。テンプレートに用いている画像の流用・転用はご遠慮ください。

一般用にアレンジして申請しましたので、小説用として御利用の場合は小説用HTMLに差し替えてご利用ください。
詳しくはコチラ

関連記事

• normal-Jf-Unicorn 貴婦人と一角獣のテンプレート②
• normal-Sf-Unicorn 貴婦人と一角獣のテンプレート①
• normal-PF-Planet2（一般ブログスタイル表紙無し）

お気づきの方もおられるかと思いますが、実はこのテンプレート、完成したのはおととしの秋です。
15世紀フランスの美しい6枚の連作タペストリー『貴婦人と一角獣 : La Dame à la licorne』から画像を起した労作ですが、完成した時点で燃え尽きてしまった管理人、その後はなんとなく億劫で、共有申請もせずに細々とサイト内配布なんぞしておりました。


ところが、昨日(2013.4.23.)のニュースで「貴婦人と一角獣展」の事を知り、急遽、蔵出し(共有申請)を決めました。

一般用にアレンジして申請しましたので、小説用として御利用の場合は小説用HTMLに差し替えてご利用ください。
詳しくはコチラ

表紙は二枚のタペストリーの画像、「我が唯一つの望みに」（À mon seul désir）と「味覚」（Le goût）をjQueryでフラッシュ風に表示させています。JavaScript無効時には固定画像になります。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。Javacript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

2013.4.24.追記
Jfタイプの一般用テンプレを公開していなかったので、
同デザインのJfタイプ一般用テンプレnormal-Jf-Unicornも共有申請しました。

　画像検索からお見えになる方もいるかと思いますが、拙宅が配布しているのはあくまでテンプレートです。このテンプレートの画像は管理人が自力加工したものですが、配布はしておりません。テンプレートに用いている画像の流用・転用はご遠慮ください。

関連記事

• normal-Jf-Unicorn 貴婦人と一角獣のテンプレート②
• normal-Sf-Unicorn 貴婦人と一角獣のテンプレート①
• normal-PF-Planet2（一般ブログスタイル表紙無し）

スマホ用テンプレに続いて、PC用テンプレでも、とんでもない仕様変更が勃発！
といっても、これは一ヵ月以上更新がない場合だけのようですが…(-_-;)
一ヵ月以上更新がない場合、御存知のように、広告記事が表示されるのは皆さま御存知の通りですが、
この4月より、それに加えて、かなり目立つオーバーレイ広告が全ページに表示されるようになったようです。

従来の一ヵ月広告はテンプレート内の<!--topentry-->～<!--/topentry-->がある場所のみでしたが、これは、エリアや<!--topentry-->の有る無しおかまいなく全ページに表示されるようです。



✕closeをクリックすれば消えますが、ページ移動するとまた現れます。
しかもfix表示のくせして、スクロールさせると画面の上下をうろうろするし、鬱陶しいことこの上ない。
また、3月までは使えた、記事の更新日を未来日付にすれば、一ヵ広告が消えるという小技も効かなくなってしまいました。
勘違いしていました。
未来日付ではなく、投稿日を現在より遡って一ヵ月以内の日付に変更して更新すれば、以前と同じく、一ヵ月広告を消すことが出来るようです。

例によって、例のごとく、FC2からの公式なアナウンスもなし…。

うーん、昨年4月のサーバー移設による仕様変更にも振り回されたけど、
FC2ブロガーにとって、4月ってほっんと鬼門かも…(>_<)

このオーバーレイ広告の詳細と、御自分のパソコン限定で非表示にする方法については、
Paroday様が詳しく記事で説明してくださっています。
1ヶ月以上更新のないFC2ブログにオーバーレイ広告追加　Adblockで非表示

関連記事

• 明けましておめでとうございます
• 今度はPC用テンプレがとんでもないことになっている!?
• スマホのテンプレがとんでもないことになってる！

▼ Comment List(0)

何なんですかあの「注目記事」と「ブログランキング」！　びっくりした……！！
うちなんてトップページに載せてる記事少ないからこのざまですわ
基本的に私はFC2ブログが好きだし楽しませてもらってるし勉強もさせてもらってるし、前触れの一切ない色んな変更もまあまあしょうがないよね無料だしねいつもありがとうございますと思ってるけど、けっどっ、ないわーこれはないわー

とはいえ私たちユーザーにできることといえばリクエストぐらいかなーとも思うので、できそうな方はよかったら「賛成」入れてきてください……
理論武装できるクレバーな方はインフォブログにコメントとかもぜひ！

もーイヤン　がっかり

ＵＮＤＯ様「スマホのあれ」より

　何がどうとんでもないかと申しますと
　ＵＮＤＯ様が記事で述べられている通り、
　先日より、スマホのテンプレの下部になぜか、
　ブログランキングと注目記事が
　強制的に表示されるようになってしまいました。

　これですこれ！

　はっきりいって、ここにブログランキングと注目記事が表示される意味がわからない。

１００歩譲って、広告ならわかる。
fc2に限らず、WEB上の無料サービスは、広告収入で運営を賄っているんだから、無料ブログに広告が表示されるのは当たり前、それに文句いっても仕方ない。

でも、なぜに、ブログランキング？なぜに、注目記事？　


　

高速配信のアカマイ広告さえ、ユーザーに表示させるか否かの判断を委ねているFC2が、なぜ、一銭にもならないであろう？ブログランキングと注目記事を強制表示しちゃうその真意は一体どこにあるわけ？

しかも総合インフォメーションに寄せられた抗議のコメントでも述べられているように、注目記事の多くは、怪しかったりイカガワシかったりするので、どんな形であれリンクなんか繋げたくない。

おそらくこれは、まだ、試験的な導入に違いない！

多分に希望的観測がはいっていますが…(^^ゞ

『FC2(fc2.com)では今後もユーザーサイドの視点で、
利用者の皆様が快適に利用できるよう努めてまいります。』

このFC2の企業理念？を信じて、
総合インフォメーションに導入撤去のコメントと、
UNDO様のリクエストに賛成票を投じてきました。

　ご賛同いただける方はご協力お願い申し上げます。

　FC2リクエスト
『ブログをスマホで見た場合、下に強制的に出てくるランキングと注目記事を消せるようにして欲しい』

FC2総合インフォメーション関連記事


2013.5.3.追記　リクエストの甲斐あってか、有料プランに変更すれば、このスマホの広告は非表示にできるようになりました。しかし、たかだか月300円ではあっても、スマホの広告を非表示にするためだけに有料プランに移行するのは躊躇われる…うーん、どうしましょ。

関連記事

• 今度はPC用テンプレがとんでもないことになっている!?
• スマホのテンプレがとんでもないことになってる！
• 2013年おせちレシピリンク備忘録

▼ Comment List(0)

月別アーカイブページパン屑リスト

月別アーカイブページにおいて、変数<%subtitle>の表示内容の改訂によりパン屑リスト及びStileKeeperのスクリプトが無効になってしまった。(以前は記事の更新年月日の数字のみに変換されたが、現在は、年月日の漢字も表示)

例2014.1.1.に更新された記事
改訂以前　20140101　 現在 2014年01月01日
色々試してみたが、難航中。自力では歯が立たない場合は作者様に相談。
　

一ヵ月更新がない場合の指定追加

HTML

<!--▽月別アーカイブページ・検索ページ下部-->
<!--not_index_area--><!--not_permanent_area--><!--not_category_area--><!--not_page_area--><!--not_tag_area--><!--not_edit_area-->
<!--not_titlelist_area-->
<!--topentry-->
<div class="entry-body kakusi<%topentry_category_no> ad<%topentry_no>">

ヘッド内CSS

li.ad,tr.ad,ul.nl li.ad,ul.entry_list li.ad{ display: none; }

Monthly_Rf_Jyugoya

外部ファイルCSS

<!--以下は月替わりスタイルシート設定-->
<!--permanent_area--><!--topentry-->
<link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%topentry_month>.css" type="text/css" rel="stylesheet" />
<!--/topentry--><!--/permanent_area-->
<!--not_permanent_area--><link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%now_month>.css" type="text/css" rel="stylesheet" /><!--/not_permanent_area-->
<!--月替わりスタイルシート設定ここまで-->

以前？の改訂の取りこぼし
コメントリストの見出し、HTML　は　h4 で、スタイルシートは h3　で指定している。
.comment-list h4

PFタイプ　fieldsetフォントが変

#permanent .index-navi fieldset

PFタイプ2013.5.26.修正

アンカーの調節のためにネガティブマージン指定
全記事一覧ページの見出しミス修正と<h2>→<h3><h3>→<h4>


<!--category_nosub--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_nosub-->
<!--category_parent--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_parent-->
<!--category_sub_hasnext--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_hasnext-->
<!--category_sub_end--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_end-->


.entry_all ul {
margin : 0px 10px 20px 20px;
padding : 0px 0px 0px 20px;
list-style-type : square;;
}

ver1303

コメント・トラックバック共に受け付けない場合layout_side2ブロックとnavi_4を非表示
head内スタイルシートに以下を追加

#permanent .cm-tb-{display:none;}

layout_side2 と　navi_4のクラス名を追加して以下に変更

<div class="layout_side2 cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry-->">

<div class="navi navi_4<!--permanent_area--> cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry--><!--/permanent_area-->">

通常ブログ画面のIE６バグ対処法

entry背景が領域を超えて表示される場合は、高さとアンカーのための下パディングを指定する。
この時、下パディング分の１pxがメインカラム背景色と相反して目立つ場合は、ul.entry_stateにネガティブマージンを指定して隠す。

#page .entry{margin : 0px;
_height:1px;_padding-bottom:1px;/*IE6バグ対策*/}

#page ul.entry_state{_margin-bottom:-1px;/*IE6バグ対策*/}

ver1302

サムネイル表示変数を追加
HTML
タグエリア

<div class="entry_text4">
<!--body_img--><%topentry_image><!--/body_img--><%topentry_discription>
<p align="right">

月別・検索ページ

<div class="entry_text">
<p align="right"><%topentry_year>.<%topentry_month>.<%topentry_day> （<%topentry_youbi>）</p>
<div class="entry"><!--body_img--><%topentry_image_72><!--/body_img--><%topentry_discription></div>

CSS
追加

.entry_text4{min-height:1px;}
.entry_text4 img {height: 150px;width:auto;float:left; overflow: hidden;margin:0;padding:0;border-right:5px solid #f0f8ff;}
#date .entry img,#search .entry img
{float:left;height: 90px;width:auto;margin:0;padding:0; border-right:5px solid #fff4dc;}

変更

#tag p.back-top ⇒.tag-frm1 p.back-top
#tag h2 ⇒.tag-frm1 h2

タグエリアが羊皮紙の場合

div.tag-frm2 { margin : 0 auto;text-align:left;max-width:580px;_width:580px; }

.entry_text4 {
max-width : 470px;_width : 470px;max-height : 150px;_height : 150px;
margin : 20px auto 10px auto ;
padding : 20px 4% 10px 4% ; line-height : 170%;
background-color : #f0f8ff;
font-size : 90%;
border : 1px dotted #C2A858 ;overflow:auto;
}


/*＜＜もくじ*/
.mokuji a{ color : #900000; font-weight : bold;}
.mokuji a:hover{ color : #ffffff; font-weight : bold; background-color:#006400;}

p.tag_btm{margin : 0 auto; max-width:580px;_width:580px;line-height:100%;}
.tag-frm1 a{background-color:#f3e5c0}

月別・検索が羊皮紙カードの場合

#date .entry,#search .entry {margin : 0px auto;padding:0;max-width:430px;_width:430px;
height:130px;overflow:auto;}

#search p.back-top,#date p.back-top{
font-size:1%!important;margin:20px 0 0px auto;width:70px; background-image : url("http://blog-imgs-62.fc2.com/n/o/v/noveltemplate/seal_dokuro75.gif"); background-position:right center;background-repeat:no-repeat;overflow : hidden; }

#date .entry-body h4,#search .entry-body h4{max-width:480px;margin:0 auto;text-align:right;}

ver1301

.sub_block関連エントリー と関連目次一覧　を折りたたみ

.sub_block {height:100%;overflow:auto;} 追加
#category div.sub_block {text-align : center;position: absolute;} 削除
#category .sub_block_in {padding-top:0em;} 削除

ボックス表示風にする場合は、関連目次一覧のための追加設定 を以下に差し替え

#category div.sub_block .side_menu{margin:0;}
#category div.sub_block .movecat {background-color : #fff;}
#category div.sub_block .movecat fieldset {margin:0;padding:0 0 0 1em;border:none;}
#category div.sub_block .movecat a{display:block;}
#category div.sub_block fieldset a:hover{color : #fff;background-color : #900;}
#category div.sub_block legend {width:170px;background-color : #fff;font-size:16px;}
span.ichiran-p {font-weight:bold;border-bottom:2px dotted #C2A858;font-size:110%;}
span.ichiran-p a:link,span.ichiran-p a:visited { color : #800080; text-decoration : none;}
span.ichiran-p a:active, span.ichiran-p a:hover{ color : #000000; text-decoration : none; background-color:#fff;}



横スクロールバーが出ている場合は以下を削除

#category div.sub_block {width:180px;}

全記事一覧ページ.sub_block top リンクのアンカー変更

Jタイプクロスフェード追加ソース２　挿入位置

novel-S,novel-Rタイプ以外に、navi_2,navi_4 改行追加

コメント編集時のテキストエリア　高さ指定(height:300px;)追加

#edit dl.co_form dd textarea#comment{
width:95%;max-width : 600px;_width : 600px;height:300px;}

ver1212

改訂テンプレート：novel-Iタイプ
改訂内容：表紙ページ　noscript部分を分離し、#index .layout_mainで背景を指定する。
#wrapperの上に#index .layout_mainの画像・背景色を表示させることで、JS無効時にカード上の文字列を消す。

<div id="wrapper">
<!--index_area-->
<!-- ▼▼▼ 表紙メニューポップアップ表示コンテンツここから ▼▼▼ -->
<div id="top_pop" style="display:none;">
～　中略　～
</div><script> document.getElementById("top_pop").style.display = "block";</script>
<!--▲▲▲ 表紙メニューポップアップ表示コンテンツここまで ▲▲▲-->

<noscript>
<div class="layout_main">
～　中略　～
</div>
</noscript>
<!--/index_area-->

<!--not_index_area-->
<div class="layout_main">
～　中略　～
</div>
<!--/not_index_area-->

#index .layout_main{ width:100%;max-width : 800px;_width : 800px; float:left;
height:440px;overflow:hidden;margin:0px -250px 0 auto;/padding-top:70px;
background-image : url("http://blog-imgs-43.fc2.com/n/o/v/noveltemplate/f00240_800X500x.gif");
background-repeat : no-repeat ;
background-position :right top ;}

ver1211

2013.3.19.改訂
改訂テンプレート：全記事一覧ページが右寄せレイアウトのnovel-R/Rfタイプ
novel-Rf-Jugoyaシリーズ以外(Jugoyaシリーズは既に改訂済み)
改訂内容：全記事一覧ページを1400px以上は右寄せさせない。

#titlelist { max-width:1400px;}
#titlelist { overflow : hidden ;}
#titlelist> .all { height:100%;}
#titlelist .main { height:100%; overflow:auto;}

#titlelist .sub_block { position:absolute;right : 640px ;}
#titlelist .sub_block_in { padding-top:0em;}

おまけ：HTMLからentry_all　内の以下を削除
「カテゴリ別表示は、JavaScript を オン にしてください。」

#index ,#titlelistなどID指定したbodyにpadding:0;margin:0;指定をすると
IEでは、検索バー領域を無視してレイアウトされてしまう。
Firefoxでは指定しても検索バー領域は確保される。

結果、body以下のブロックにheight:100%;を指定した場合などブラウザによって表示が違ってきてしまう。
これを避けるために、ID指定したbodyにはpadding,margin指定はしない。

ver1301mp

2013.3.19.改訂
改訂テンプレート：全携帯テンプレ
改訂内容：コメント編集エリア追加・コメトラ一覧ページナビにテキスト(先頭・最後)追加

関連記事

• IE8以下もレスポンシブWebデザインを適用させる方法　FC2ブログテンプレートの場合
• バージョンアップ改訂内容覚書
• スマートフォンテンプレート難航中

なんちゃって素材屋風小説テンプレート第七弾。申請中。
novel-S-Whiteを素材屋風にアレンジしてみました。
白い小花の作品は「White Board 」様からお借りしました。

トップページのみアイフレ・アメブロあたりでは素材屋風と呼ばれるスタイルで表示させています。ほぼJfタイプと同じHTMLで組んでありますので、表紙メニューをクリックするとJava Scriptが有効な場合は、右側にポップアップでその内容説明が表示されます。Java Scriptがオフの場合は、ﾒﾆｭｰの内容は最初からスクロールするボックス内に表示されます。
ポップアップ表示のカスタマイズについてはコチラ

HTMLをnovel-I-Jewel-Tに変更すると、同デザインのまま、トップページはポップアップではなく、JavaScript無効時と同じようにスクロールするボックス内に表示されるようになります。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

関連記事

• novel-I-White-Jf 白い小花の素材屋風テンプレート
• novel-I-Jewel-T 青紫のジュエルフラワーのテンプレート
• novel-I2-Sweet-Jf　甘いケーキの素材屋風テンプレート

なんちゃって素材屋風小説テンプレート第六弾、ジュエルフラワーのテンプレート。申請中。

宝石のような青や紫の小花の作品は、「White Board 」様からお借りしました。

トップページのみアイフレ・アメブロあたりでは素材屋風と呼ばれるスタイルで表示させていますが、他の素材屋風テンプレと違い、このテンプレートではポップアップは使っていません。HTMlはスタンダードタイプ・tempタイプとほぼ同じ。スタイルシートで、メインカラムとサイドカラムの高さを固定し、それを超えた部分はスクロールするように指定してあります。

HTMLをnovel-I-White-Jfに変更すると、同デザインのまま、トップページはポップアップで表示されるようになります。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

関連記事

• novel-I-White-Jf 白い小花の素材屋風テンプレート
• novel-I-Jewel-T 青紫のジュエルフラワーのテンプレート
• novel-I2-Sweet-Jf　甘いケーキの素材屋風テンプレート