彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




BACK目次|NEXT
*    *    *

Information

□ PC用 □

for_novel_basis

for_novel_basis  シンプルな表紙つきテンプレート。ブログ小説用と銘打ってはいますが、そのままで一般の用途にも使えます。ブログを普通のウェブサイトっぽいデザインで見せたい場合にどうぞ。改造○、再配布○。HTML内に解説有。
 FC2ブログの規約を遵守しているブログなら、どのジャンルでも使用可。
 
 小説用テンプレートを作る方がもっと増えたらいいのになー、と思って、再配布可能なテンプレートを用意いたしました。
 当ブログで公開しているこの他のテンプレートは再配布禁止なので、その点ご注意ください。

目次

→ 主な特徴
→ サンプル画面
→ 使い方
→ 小説連載に使用する場合
→ 製作環境&動作確認
→ 履歴
 
 

主な特徴

  • 幅広い閲覧環境に対応出来るシンプル構造。ブラウザの違いによるデザイン崩れを極力抑えました。
  • 少しでも表示が軽くなるように、テーブルは一切使用しておりません。
  • 表紙には、カテゴリ一覧とフリーエリアがあります。
  • 通常ブログ画面は2カラム左サイド。その他の画面は1カラムとなっており、通常ブログ画面以外にはプラグインが表示されません。
  • カテゴリ画面は、記事タイトル一覧の目次になっています。
  • ユーザータグを利用した特集ページが作れます。
  • 全記事一覧、日付、検索結果画面も同デザインでカスタマイズ済です。
  • HTML内に解説がありますので、それに従ってカスタマイズしてください。より詳しい解説は下の「使い方」にもあります。
 
 

サンプル画面

「改造後」とあるのは、HTMLに記載されているカスタマイズを実行した場合のサンプルです。
 サンプル画面でリンクをクリックすると、サンプルモードから外れてしまいますので、ご注意ください。  
 

使い方

 テンプレートのHTML内の解説を中心に、以下に使い方をまとめています。
 説明に使用される行番号については、「カスタマイズの際の行番号」を参照してください。
 フリースペースのカスタマイズの際、改行したいところで <br /> と入力すると、その場所で改行が行われます。その他、HTMLタグについては、「TAG index」様に詳しい解説がありますので、どうぞ参考になさってください。  
 

49行目:<!-- ↓ アクセス解析貼り付け位置 -->
50行目: 
51行目:<!-- ↑ アクセス解析貼り付け位置 -->

 この50行目の部分に、アクセス解析のタグを挿入してください。
 
 

76行目:<!-- ↓ フリースペース(1/3) -->
77行目:フリースペースです。<br />
78行目:このスペースは、管理画面の「テンプレートの設定」から「HTMLの編集」の77行目にありますので、ブログの説明等に書き直してご自由にお使いください。
79行目:<!-- ↑ フリースペース(1/3) -->

 インデックス画面のカテゴリ名一覧の上に、好きな文章等を表示する事が出来ます。
 77行目と78行目を、お使いのブログにあった文章に書き直してください。使わない場合は忘れずに削除してください。
 
 

95行目:<!-- ↓ 特集ページへのリンク(1/2) (← 使用時はこの行を丸々削除してください →)
96行目:        <div class="list"><a href="<%url>?tag=*">特集ページ名</a></div>
97行目:     ↑ 特集ページへのリンク(1/2) (← 使用時はこの行を丸々削除してください →) -->

 ユーザータグに *(半角アスタリスク)が入力された記事をピックアップして、特集ページとして一覧表示する事が出来ます。
 特集ページをご利用の場合は、96行目にある 特集ページ名 を、設定したい特集ページの名前に書き換えて、95行目と97行目を削除してください。
 小説用としてテンプレートをお使いの方は、この下の「小説連載に使用する場合」も合わせて参照してください。
 
 

124行目:<!-- ↓ 追加メニュー(1/2) (← 使用時はこの行を丸々削除してください →)
125行目:        <div class="add"><a href="リンク先のアドレス">リンク先の名称</a></div>
126行目:     ↑ 追加メニュー(1/2) (← 使用時はこの行を丸々削除してください →) -->

 掲示板や別ブログ、別サイトなどへのリンクを、インデックス画面のメニューに追加する事が出来ます。
 125行目を追加したいメニューの数だけコピーし、それぞれの リンク先のアドレスリンク先の名称 を付け加えたいコンテンツのものに置き換えて、124行目と126行目を削除してください。
 
 

141行目:<!-- ↓ フリースペース(2/3) -->
142行目:
143行目:<!-- ↑ フリースペース(2/3) -->

 インデックス画面のカテゴリ名一覧のすぐ下に、好きな文章等を表示する事が出来ます。
 初期状態では、何も記入されていません。表示したい内容がある場合は、142行目に記入してください。
 
 

180行目:<!-- ↓ フリースペース(3/3) -->
181行目:
182行目:<!-- ↑ フリースペース(3/3) -->

 インデックス画面の新着案内の下に、好きな文章等を表示する事が出来ます。
 初期状態では、何も記入されていません。表示したい内容がある場合は、181行目に記入してください。
 
 

210行目:<!-- ↓ 特集ページへのリンク(2/2) (← 使用時はこの行を丸々削除してください →)
211行目:      <a href="<%url>?tag=*">[特集ページ名]</a> 
212行目:     ↑ 特集ページへのリンク(2/2) (← 使用時はこの行を丸々削除してください →) -->

 ユーザータグ *(半角アスタリスク)を設定した記事の特集ページを使う場合、ヘッダメニューにも特集ページへのリンクを追加する事が出来ます。
 211行目にある 特集ページ名 を、設定したい特集ページの名前に書き換えて、210行目と212行目を削除してください。
 
 

223行目:<!-- ↓ 追加メニュー(2/2) (← 使用時はこの行を丸々削除してください →)
224行目:      <a href="リンク先のアドレス">[リンク先の名称]</a> 
225行目:     ↑ 追加メニュー(2/2) (← 使用時はこの行を丸々削除してください →) -->

 掲示板や別ブログ、別サイトなどへのリンクを、ヘッダメニューにも追加する事が出来ます。
 224行目を追加したいメニューの数だけコピーし、それぞれの リンク先のアドレスリンク先の名称 を付け加えたいコンテンツのものに置き換えて、223行目と225行目を削除してください。
 インデックス画面のメニューと違って、数が多くなり過ぎるとヘッダの見栄えが悪くなりますのでご注意ください。
 
 

294行目:<!-- ↓ FC2拍手貼り付け位置(1/2) (← 使用時はこの行を丸々削除してください →)
295行目:        <div class="hide showinfo<%topentry_no> migi small">FC2拍手のタグ</div>
296行目:     ↑ FC2拍手貼り付け位置(1/2) (← 使用時はこの行を丸々削除してください →) -->

 FC2拍手(FC2ブログ拍手にあらず)や各種ランキングをご利用の場合、295行目の FC2拍手のタグ の部分に、そのタグを貼り付けて、294行目と296行目を削除してください。
 ここは、個別記事画面での設定となっています。通常ブログ画面でも拍手ボタンやランキングバナーを表示させたい場合は、この下にある「FC2拍手貼り付け位置(2/2)」もご覧ください。
 
 

436行目:<!-- ↓ 上部フリースペース(← 使用時はこの行を丸々削除してください →)
437行目:      <div class="hide showカテゴリ番号 cat_header">カテゴリ説明文もしくは小説の粗筋</div>
438行目:     ↑ 上部フリースペース(← 使用時はこの行を丸々削除してください →) -->

 特定のカテゴリ表示画面(目次)の上部に、そのカテゴリの説明等を表示する事が出来ます。
 ブログ管理画面の「カテゴリの編集」から、カテゴリ一覧表の左上にある「#」をクリックすれば、それぞれのカテゴリ番号が表示されますので、カテゴリ表示画面に説明を表示させたいカテゴリの番号をあらかじめ調べておいてください。
 437行目を、説明を表示させたいカテゴリの数だけコピーし、それぞれの カテゴリ番号カテゴリ説明文もしくは小説の粗筋 を置き換えて、436行目と438行目を削除してください。
 この時、カテゴリ番号 は必ず半角の数字で記入してください。すぐ後ろにある「cat_header」というクラス名との隙間も、半角スペースのままでお願いします。
 
 

466行目:<!-- ↓ 下部フリースペース(← 使用時はこの行を丸々削除してください →)
467行目:      <div class="hide showカテゴリ番号 cat_footer">カテゴリ説明文もしくはランキングバナー等</div>
468行目:     ↑ 下部フリースペース(← 使用時はこの行を丸々削除してください →) -->

 特定のカテゴリ表示画面(目次)の下部に、そのカテゴリの補足説明等を表示する事が出来ます。
 前述の「上部フリースペース」と同様に、467行目を説明を表示させたいカテゴリの数だけコピーし、それぞれの カテゴリ番号カテゴリ説明文もしくはランキングバナー等 を置き換えて、466行目と468行目を削除してください。
 
 

493行目:<!-- ↓ 特集ページの見出し (← 使用時はこの行を丸々削除してください →)
494行目:    <h2 class="headline">* 特集ページ名 <%tag_word></h2>
495行目:     ↑ 特集ページの見出し (← 使用時はこの行とこの下↓の行を丸々削除してください →) -->
496行目: <h2 class="headline">ユーザータグ:<%tag_word></h2><!-- 特集ページの見出しを設定した場合、この行も削除してください -->

 特集ページを使用する場合、タグ検索画面の見出しを自由に設定出来ます。
 494行目にある 特集ページ名 を特集ページの名前に置き換え、493行目と495行目、496行目を全て削除してください。
 
 

653行目:<!-- ↓ FC2拍手貼り付け位置(2/2) (← 使用時はこの行を丸々削除してください →)
654行目:        <div class="migi small">FC2拍手のタグ</div>
655行目:     ↑ FC2拍手貼り付け位置(2/2) (← 使用時はこの行を丸々削除してください →) -->

 FC2拍手や各種ランキングをご利用で、通常ブログ画面にもFC2拍手ボタンやランキングバナーを表示させたい場合、654行目の FC2拍手のタグ の部分に、そのタグを貼り付けて、653行目と655行目を削除してください。
 
 

785行目:<!-- ↓ テンプレート作者名 -->
786行目:      Template By <a href="http://greenbeetle2.blog117.fc2.com/" target="_blank">GB</a>
787行目:<!-- ↑ テンプレート作者名 -->

 このテンプレートを改造して共有テンプレートに登録する場合には、786行目の制作者表示をご自分のものに変更してください。
 共有申請の際、「改変・頒布を許可する」というこのテンプレートのライセンスを継承する必要も、原作者名を表示する必要もありませんが、bodyの最後の行の

<!-- The original template is "for_novel_basis". -->

だけは削除しないようお願いします。
 
 

小説連載に使用する場合

一つの小説を一つのカテゴリにまとめてください。
 カテゴリ別記事表示画面がそのまま小説の目次になりますので、必ず小説ごとにそのタイトルでカテゴリを作って、記事を分けてください。
 
カテゴリ別の記事の並び順を「連載順=古い順」にしてください。
 物語を最初から追いやすいように、管理画面の「環境設定」→「環境設定の変更」→「ブログの設定」→「記事の設定」にて、「記事(カテゴリ別)」を「古い順」に設定してください。
 
連載の次のページ、前のページ、へのリンクを記事末尾に追加してください。
 連載を読み進める上で必要不可欠な「NEXT」「BACK」のリンクですが、2015/07/15 にそれを可能とする変数が実装されました! →「【ブログ】同じカテゴリ内に存在する次の記事と前の記事へのリンク変数を追加しました!
 ですが、2015/07/18現在、どうやらこの変数は、スマホとケータイでは使えないようです。
 PCからの閲覧のみを想定する場合は、連載の次のページ、前のページ、へのリンクを記事に入れなくても、問題ありませんが、スマホやケータイを考慮するならば、ご面倒でも、記事(追記欄を使用している場合は追記)の一番最後の部分に、連載の次のページ、前のページ、へのリンクを付け加えてください。(参考「小説用に使うべきか使わざるべきか:関連記事リスト」)
 
連載一回目の記事に「*(半角アスタリスク)」タグを設定してください。
 このテンプレートは、ユーザータグに *(半角アスタリスク)が入力された記事をピックアップして、特集ページとして一覧表示する事が出来ます。小説の連載第一回目の記事に「*」タグを設定して、特集ページの名前を「Novel List」もしくは「小説一覧」としてください。
 その際、余計な記事がリストに紛れ込まないよう、また、必要な記事がリストから漏れる事のないよう、タグは確実に半角の「*」を、連載第一回目(or前書き)の記事一つだけに設定してください。
 ※「Novel テンプレート」様による「Novel List」のアイデアを使わせていただいています。
 


製作環境&動作確認

Windows 7
Firefox 3.6.8、IE 8.0、Opera 10.60、Safari 5.0.1
Windows Mobile 5.0 OS 5.1.195
Opera 8.60 for W-ZERO3 (表示確認のみ)


履歴

2010.08.16
共有申請。
2010.08.16
共有テンプレートとして公開。




BACK目次|NEXT
*    *    *

Information

Comment

[190] 続きについて

はじめまして、エンジです。

現在開発中で公開はしてないのですが、共有テンプレートからfor_novel_basisをお借りして降ります。
とてもシンプルで趣味にあいました。

そこで質問なのですが、通常ブログだと追記の設定で、記事を隠すことができますが、このテンプレートだとそれも表示してしまうようですが、その設定を解除できないものでしょうか?
あとがきにつかいたいものですから。

もともとHPで小説を載せてまして、そのときは別のリンク先を指定していました。
あとがきはあとがきでカテゴリを作ってしまうしかないですかね?
よろしくお願いします。
2010/09/13 【エンジ】 URL 

[191] 追記の使用について

こちらこそはじめまして。ダウンロードありがとうございます!

追記の使用についてですが、FC2ブログにおいて追記の表示、非表示は、表示モードによって切り替えられるため、個別記事画面の中で追記を隠す事は出来ません。当テンプレートで追記へのリンクが作成されるのは、通常ブログ画面においてのみとなります。

テンプレートサイドで本文と追記の間になんらかの区切りを入れる事は出来ますが、追記を別ページを設定するのは不可能です。
エンジさんが仰るとおり、あとがきのカテゴリを作って、その記事へのリンクを本文末に作成する、というのが一番無理なくスマートな方法だと思います。
もしくは、javascriptを使って本文に続く追記を隠すという方法もありますが、javascriptについて私は充分な知識を持っておりません……。

お力になれなくてすみません。
2010/09/14 【GreenBeetle】 URL [編集] 

[192] 

早速のご回答ありがとうございます。

多分そうだろうなとは思ってました。ちょっと残念ですが、他に方法はあるし、なによりこのテンプレートに惚れ込んでしまったので、後戻りできません(笑

自分もjavaは全く解らないので……。
またなにか有りましたらよろしくお願いします。
2010/09/14 【エンジ】 URL 

[208] 通常ブログ画面について

はじめまして、中野2と申します。
このたび、そちらのテンプレートに一目ぼれして早速お借りしようと思ったのですが、通常ブログ画面が正常に表示されません。for_novel_bambooでも同様の現象が起こりました。

2カラムの右側であるブログ本文が1行2文字ぐらいになって縦に流れてしまいます(その更に右側は空白です)。プラグインを[無効]にすると本文は正常に表示されるのですが、それ以外に方法は無いのでしょうか?

何度か諦めようかとも思ったのですが、とても素敵なテンプレートなので思い余ってお尋ねしてみました。
対策方法がありましたらどうかよろしくお願いします。
2011/05/04 【中野2】 URL [編集] 

[209] Re: 通常ブログ画面について

こちらこそ初めまして。ダウンロードありがとうございます。
連休でお返事が遅くなってしまってすみませんでした。

通常ブログ画面での表示崩れとの事ですが、エラーを起こしている状態のブログを拝見しなければ、実際に何が問題になっているのかが良く解らない、というのが正直なところです。

ブログがまだ一般公開されていないなどで、今一度表示崩れを再現しても良いという場合は、プラグインを有効にしてシークレットコメントでURLを教えていただけますか?

少しの間でも表示崩れ状態でブログを公開したくない、という場合は、表示の崩れた通常ブログ画面のソースを、こちらまで送っていただけませんか。
プラグインを有効にして通常ブログ画面を表示、右クリック→ソースを表示→ソースの「編集」から「全て選択」ののち「コピー」→メルフォ(http://form1.fc2.com/form/?id=180753)の本文にソースを「貼り付け」て送信してください。

もしもメールフォームでの送付が上手くいかなかった場合は、上記ソースをテキストファイルにして、ブログ管理画面の「ファイルアップロード」にてアップロードしていただき、そのURLをシークレットコメントで当方に教える、というやり方もあります。


もっとも、そこまでしていただいても、原因不明、という結論に至る可能性もゼロではありませんが、最善を尽くしたいと思いますので、どうかお付き合いくだされば幸いです。
2011/05/06 【GB】 URL [編集] 

[210] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2011/05/06 【】  

[211] Re: これは別のブログですが

早速ありがとうございます。

教えてくださったブログでの現象ですが、空白が生じている記事の、最初の画像のすぐ後に

<br clear="all">

というタグがありますが、これがテンプレートのサイドカラムの設定とバッティングしてしまっているために、表示崩れを引き起こしていると思われます。
このタグは、画像の周囲に文字を回り込ませる(style="float:left" もしくは align="left")のを解除するためのものですが、拝見したところ、当該画像には回り込み設定がなされていないようですので、このタグを

<br />

と変更していただくと、余計な空白は無くなると思います。

※ サイドカラムに style="float:left" を使用しているため、<br> の clear="all" で、サイドカラムの style="float:left" が解除されてしまっているのです。
 それによって、<br clear="all"> より後の記述が、サイドカラムの中身(プラグイン)と重ならない位置まで下げられて表示されているのです。
 ですから、他にも回り込み設定解除をしておられたなら、その場所でも同じような現象が起こると思います。ご注意ください。

 記事入力の機能ボタンに、回り込み解除に関わるものが無いため、安心して段組に float を使っていました。ややこしくてすみませんでした。
 また、折を見てこの「仕様」について注意記事を書きたいと思います。
2011/05/06 【GB】 URL [編集] 

[212] ありがとうございました

アイコン以下の画像が無事に表示されるようになりました。ただ過去記事アイコンに全て同じタグをつけているので、それをはずさないといけないようです。
自宅のサイトも同様のタグを多用しているので、非常に残念ですが今回はこちらのテンプレ使用を少し見送りたいと思います。

お忙しい中、お手数をおかけしました。

もう少しタグの勉強をしてきます。なので次回こそは是非テンプレを利用させて下さい!
2011/05/06 【中野2】 URL [編集] 

[229] 

こちらのテンプレートをお借りして、素人なりに今改造しています。
私は小説サイトとして使おうと思い、フリースペース1の背景画像を小説の表紙絵にしようと思い、背景画像を貼るところまでできました。
ですが、ブラウザのサイズやモニターのサイズによって画像が途切れてしまったり、フリースペース内に画像を丁度良く貼った(px数などは図ってやったつもり)のに1行だったものが2行になったりします。

自動で画像のサイズをブラウザや閲覧モニターのサイズに合わせて拡大縮小などはできないのでしょうか?
2011/09/15 【名無し】 URL [編集] 

[230] フリースペース内に画像を表示するには

ダウンロード&ご使用ありがとうございます。

表紙絵をフリースペース1に、という事でしたら、画像ファイルを背景に設定するのではなく、HTMLに <img> タグを使って表示させる方法をおすすめいたします。

というのも、名無し様が仰るとおり、背景画像は、ブラウザやモニタのサイズによっては上手く表示されなくなる可能性があるからです。
特にこのテンプレートは、閲覧環境に対してフレキシブルに作っておりますので、その傾向が強くなると思います。

 ※ 当方の他の小説用テンプレートでは、表紙画像を背景として設定していますが、その際、表示エリアやページ幅を絶対値で指定した上で、背景に重なる文字列をサイズ指定したブロックで入れ子にして制御しているため、表示が崩れにくくなっています。
 どうしてこんなに面倒な事をしているのかといいますと、表紙画像の上に文字を重ねる必要があるからと、表紙カスタマイズを容易にしたかったからです。
 HTMLに画像を設定してしまうと、画像レイアウトの自由度は上がりますが、逆に、HTMLの知識が無い方には「ちょっとした改造」が難しくなってしまいます。出来るだけ沢山の人にテンプレートを使ってもらえるように、という理由で、表紙画像をHTMLから切り離しました。

そういうわけなので、ご自分でご自分のテンプレートに手を入れるのでしたら、フリースペース内に直接 <img> で画像を貼り付ける方法が、便利だと思います。

<img> の使い方については、「TAG Index」さんの
http://www.tagindex.com/html_tag/img/index.html
に詳しく記載されています。

<img src="画像ファイル" class="hyousi" />
などとして、class="hyousi" についてスタイルシートで
.hyousi { margin:* * * *; }
と、画像の上下左右に余白を設定する事も出来ますし、

<img src="画像ファイル" width="*%" height="*%" />
というように、表示サイズを画面サイズに対して相対的に設定する事も可能です。


折角背景設定までしていただいて、今更ご面倒かもしれませんが、もし良かったら色々試してみてください。

どうしても背景画像として表示したい、という場合は……、実際にブログを拝見しなければ何が問題なのかが解らないため、その際はシークレットコメントででも、名無し様のブログURLを教えていただければ、何かお手伝い出来るかもしれません。
2011/09/17 【GB】 URL [編集] 

[231] 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
2011/09/22 【】  

コメントの投稿

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







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

Trackback

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

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