彼此ともつかぬ場所


□ スポンサー広告 □

スポンサーサイト

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




*    *    *

Information

□ PC用 □

for_novel_sky

for_novel_sky  真昼の月の表紙付きテンプレート。小説用ですがそのままで一般の用途にも使用可。表紙にはフリーエリア、カテゴリ別に目次、本文1カラム。全記事一覧や検索結果画面もカスタマイズ済。表紙画像変更方法など作者ブログに解説有。再配布×、改造○。
 創作(二次創作)系以外のアダルトブログは使用をご遠慮ください。

目次

→ 主な特徴
→ 使い方
→ 注意事項
→ 製作環境&動作確認
→ 履歴


主な特徴

  • 幅広い閲覧環境に対応出来るシンプル構造。ブラウザの違いによるデザイン崩れを極力抑えました。
  • 少しでも表示が軽くなるように、テーブルは一切使用しておりません。
  • まるで普通のウェブサイトのようなインデックス画面。親子カテゴリ折りたたみスクリプト(by FC2ブログのテンプレート工房様)は、JSオフ時にも対応。→サンプル
  • フリースペースや追加メニューなど、インデックスのカスタマイズも簡単に。後述の「使い方」を参照してください。
  • 掲載小説を解説とともに一覧出来る、ノベルリスト機能(by Novel テンプレート様)を導入。→サンプル
  • 連載小説を同じカテゴリでまとめれば、自動的に小説目次が生成されます。→サンプル
  • 小説本文に集中出来るよう、個別記事画面にはプラグインは表示されません。→サンプル
  • 校正し易いように、個別記事の下部にその記事の編集画面へのリンクを設置。
  • 全記事一覧表示画面を、更新履歴として同じデザインでカスタマイズ。 →サンプル
  • 検索結果画面もカスタマイズ済。→サンプル
  • 勿論、通常ブログ画面でもご利用いただけます。プラグイン対応、2カラム右サイド。 →サンプル


使い方

 ※ カスタマイズ説明に使用される行番号については、「カスタマイズの際の行番号」を参照してください。


注意事項

  • テンプレートは自由に改造して下さって構いませんが、再配布はご遠慮ください。
  • 画像の権利は、ALL FREE MIDI&PHOTO様にあります。テンプレート改造後も画像をそのまま使用される場合は、コピーライト表示から「Graphics By ALL FREE MIDI&PHOTO」の部分を絶対に削除しないでください。(使用規約に従って掲示板(日本語版がリンク切れだったので、英語版の方)に書き込み済みです)
  • テンプレートについて、何か不具合やリクエストがありましたら、このエントリのコメントをご利用ください。


製作環境&動作確認

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


履歴

2009.05.07
共有申請。
2009.05.13
共有テンプレートとして公開。
2009.05.26
一ヶ月未更新時に挿入される広告のせいで表示が崩れてしまうのを修正。
2009.05.28
フリースペース3のリンクアンカーのフォント色が見辛かったのを修正。
2009.06.25
ヘッダメニューバーを改良。
2009.06.26
カテゴリ別目次レイアウトを改良。
2009.06.28
表紙メニューを、子カテゴリ折りたたみカスタマイズが容易な形式に変更。
2009.07.05
ヘッダメニューバーのすぐ下に記事本文へのジャンプボタンを設置。
2009.07.28
Novel List画面のページ送りアンカーの色を修正。
2009.07.31
インデックス画面を若干改良。
2009.08.01
ブラウザによって個別記事画面の記事見出しの表示が崩れるのを修正。
古いバージョンのIEで画像サイズが変になってしまうCSS記述ミスを修正。
2009.10.01
NovelListを短編対応に修正。
2009.11.26
インデックスに親子カテゴリ折りたたみスクリプトを装備。
カテゴリ目次にフリーエリアを設置。
FC2バトンに対応。
2010.08.27
全記事一覧表示画面にページ移動を追加。
2011.04.13
トラックバック用リンク改良。
2011.06.04
そのままで小説以外の用途にも使えるように。
2011.07.01
表紙メニューの見た目改良。
2012.03.07
カテゴリ画面に記事日付を表示。

 ※ 下のコメントについて、テンプレートのバージョンアップに際して、管理人の回答内容が現在のテンプレートの事情にそぐわなくなってしまっている可能性があります。上記履歴の日付を閲覧時の参考にしてください。



→ 共有テンプレート一覧に戻る
*    *    *

Information

Comment

[54] ブログ画面の上部の背景画像の変更について

別の記事にて質問を受けましたので、該当するテンプレートであるこちらの記事でお返事いたします。

ブログ画面のタイトル部分は、スタイルシートの106、107行目にあります。

106行目>/* ヘッダ */
107行目>.header { height:180px; background-color:#eaf4fc; background-image:url(http://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/a_free_2.jpg); background-repeat:no-repeat; background-position:center top; padding:0px; margin:0px; }

この斜体の部分を、差し替えたい画像のURLに変更してくださればOKです。
ただし、このテンプレートの場合、[INDEX]や[Blog]などのメニューバーが、ヘッダの中に配置されています。ブラウザの文字サイズによっては、ヘッダの高さが拡大される可能性がありますので、背景画像は、通常表示されるサイズよりも若干縦方向に余裕をもたせております。
デフォルトは700px*180pxにしていますが、その辺りご自由に調整してみてください。
2009/05/19 【GreenBeetle】 URL [編集] 

[55] 

重ね重ね申し訳ないです。
DLファイル毎に区分けしていたのですね。

上記URL貼り場所なのですが
それでも駄目なのです><

プレビューでしか見ていませんが画像が変わらないです;;

環境はIE8、XPHome
全ての、URLが記載されている場所を張り替えても何処も変わりませんでした・・・これって私だけなのでしょうか?;;
2009/05/20 【はちべぇ】 URL 

[56] プレビューは……

編集画面からのプレビューは、ブログのトップしか表示出来ません。一度テンプレートを「更新」して変更を保存して、

http://[ユーザID].blog[サーバNO].fc2.com/?style2=[プレビューしたいテンプレートの名前]&p=0

例)http://greenbeetle2.blog117.fc2.com/?style2=for_novel_sky&p=0

と、ブラウザの入力欄に入れていただくか、いっそ一時的にでもテンプレートの適用を変えてみて、確認していただけますか?

当方の別ブログにて画像差し替えを試してみたところ上手くいきましたので、CSSの書き換えに間違いがないならば、多分上手くいくんじゃないかな、と思います……。
2009/05/20 【GreenBeetle】 URL [編集] 

[59] 

出来ました>ω<ご教授ありがとうございました

プレビューはTOP画像でしか確認が出来なかったのですね
知らなかったとはいえご迷惑をおかけしました

大切に使わせていただきます^^
2009/05/22 【はちべぇ】 URL 

[60] 

背景全体が黒色になってるのを変えたいのですが、どこに色設定があるのか分かりません。普通のテンプレートと違って分かりづらくて困ってます。
2009/05/23 【かほ】 URL 

[61] 背景色の変更方法

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

背景色については、CSSの3~5行目を見てください。

3行目>/* 全体設定 */
4行目>html { height:100%; }
5行目>body { color:#000000; font-size:100%; background-color:#000000; margin:0px; }

この部分を、普通のテンプレートと同様にカスタマイズすれば、ご希望の効果が得られると思います。

もしも、背景色を淡色系に変更なさる場合は、20~25行目、

/* 反転文字 */
.rev { color:#ffffff; }
.rev a:link { color:#b2cbe4; }
.rev a:visited { color:#d1bada; }
.rev a:hover { color:#00a1e9; }
.rev a:active { color:#00a1e9; }

を、まるまる削除してください。黒と同等の濃い色に変更なさる場合は、このままか、文字とのコントラストを適当に調整してくだされば良いかと思います。
2009/05/23 【GreenBeetle】 URL [編集] 

[69] 

ダウンロドさせていただきました。

小説用ではなく、子どもの野球の試合の記録に使います。

Novel List も活用したく
でも、表示される文字数を減らしたいと考えています。
タイトルだけでもいいんですが。
可能でしょうか?

あともうひとつ、
Contentsに、1つプラグインを入れたいんです。
可能でしょうか?
2009/06/04 【野球大好き】 URL [編集] 

[70] ダウンロードありがとうございます

小説以外へのご利用も大歓迎です。目に留めてもらえた事、大変光栄に思います。

Novel Listで減らしたい文字数とは、当サンプル
http://greenbeetle2.blog117.fc2.com/?tag=*
における「近世欧州風ファンタジー……云々」の部分という認識でよろしいでしょうか。
それならば、HTMLの332行目
      <div class="text"><%topentry_discription></div>
を削除していただければ、その要約文は消す事が出来ます。

ところで、この「Novel List」ですが、このエントリ上部にリンクしてある「小説ブログ以外で使う方法」の最後の部分でご紹介しているタグ検索画面のカスタマイズ方法を実行なさった場合、「Novel List」を月別アーカイブページ
http://greenbeetle2.blog117.fc2.com/blog-date-200905.html
と同じタイプの表示に変更する事が出来ます。
もしもこちらの表示方法が、野球大好きさんのご希望に近いものでしたらば、このカスタマイズ方法を試してみてはいかがでしょうか。


Contentsにプラグインを表示するのは、プラグインによる、としかお答え出来ません。表示したいプラグインが具体的にどのようなものか判れば、お答えする事が出来ると思います。
2009/06/04 【GreenBeetle】 URL [編集] 

[71] 

ありがとうございます。
感動しちゃいました。
自分の想像ピッタリにできました。

「小説ブログ以外で使う方法」タグ検索画面のカスタマイズ方法を使い
そして、<divclass="text"><topentry_discription></div>
部分を消す事をヒントに
<h3> 概要:~
を消してみました。
大丈夫ですよね?
コレが、私のやりたかった形、ずばりです。

本当にありがとうございます。

もう一つの質問のContentsにプラグインは、カウントパーツのものだったのですが、
これは、通常使わないのでプログ画面にして見る事にし、Contentsには入れない事にします。


あと、もう一つ質問したいのですが。(申し訳ないです。)
Contentsのカテゴリー部分、親子でツリー化していますが、通常 子は隠れているようにしたいのです。
自分なりに、HTMLとにらめっこして、調べたりしましたが
難しいです。。。
よろしくお願いします。
2009/06/05 【野球大好き】 URL [編集] 

[72] Contentsの子カテゴリを隠す

タグ検索画面のカスタマイズが上手くいったみたいで、よかったです。
テンプレートは、改造前にバックアップをとっておけば、いくらでもやり直しがききますので、色々試してみてください。タグ検索画面は使われている変数も少ないので、改造後に画面表示が崩れていなければ問題は無いと思います。

Contentsにカウントパーツ、という事ですが、もしも、INDEX画面にカウンターを表示する、という事ならば、フリースペース3の部分にカウンタータグを入れてくだされば、OKですよ。
以前に、同じシリーズのテンプレで、カウンターの設置について質問を受けたので、そちらのコメントも参考になるかもしれません。
http://greenbeetle2.blog117.fc2.com/blog-entry-9.html
の、最後のほうの5/14のコメントです。

Contentsの子カテゴリを隠す件ですが、単純に、子カテゴリをINDEX画面に表示させないようにするならば、HTMLの52~60行目、

<!--category_parent-->
          <li><%category_name></li>
<!--/category_parent-->
<!--category_sub_hasnext-->
          <li class="sub"><a href="<%category_link>" title="<%category_name>"><%category_name></a></li>
<!--/category_sub_hasnext-->
<!--category_sub_end-->
          <li class="sub"><a href="<%category_link>" title="<%category_name>"><%category_name></a></li>
<!--/category_sub_end-->

の部分を、

<!--category_parent-->
          <li><a href="<%category_link>" title="<%category_name>"><%category_name></a></li>
<!--/category_parent-->
<!--category_sub_hasnext--><!--/category_sub_hasnext-->
<!--category_sub_end--><!--/category_sub_end-->

と変えていただくと、親カテゴリのリンクが復活して子カテゴリが表示されなくなります。

JavaScriptでツリーを開閉、となると……私の知識が足りないため……ちょっと解りません。
「FC2ブログのテンプレート工房」http://10plate.blog44.fc2.com/というブログに、ずばり「親子カテゴリの折りたたみ」という記事がありますので、もし良かったらそちらを見てみてください。
http://10plate.blog44.fc2.com/blog-entry-217.html


右も左も解らないところから始めて、漸くHTMLとCSSが解ってきたところだったりします。そのうちJavaScriptも勉強しなければなあ、と思いつつ……なかなか果たせずにいます。
2009/06/05 【GreenBeetle】 URL [編集] 

[73] 折り畳み成功!

あれから、色々自分でも試してみたところ、子カテゴリのJavaScriptでの折り畳みに成功いたしました。
やり方を新しく記事にしたいと思いますので、もう少しお待ちください。
2009/06/06 【GreenBeetle】 URL [編集] 

[74] 

いつまでも、待ってます。(笑)
折りたたみがしたかったのです。

お手間を取らせてすみません。

Contentsにカウントパーツ、このやり方は読ませていただきました。
言葉下手ですみません。
カウントダウンのパーツなんです。
http://coel.blog58.fc2.com/
こちらのを、野球を初めて〇日になりました。
と使わせてもらってます。
でも、お手間かけてしまうので、こちらはいいです。
ありがとうございます。
2009/06/06 【野球大好き】 URL [編集] 

[76] 

折りたたみ出来ました。
ばっちりとスッキリたためました。

いろいろとありがとうございました。
私もHTMLとCSSを、少しずつ勉強したいと思います。
2009/06/07 【野球大好き】 URL [編集] 

[77] こちらこそ

ご希望のカスタマイズが出来てよかったです。
JavaScript、解らないなりになんとかなって、ほっとしてます。

折り畳み、カッコイイですよね。テンプレートに実装する方向で、もう少し考えてみようかなあ。
挑戦する機会を与えてくださって、こちらこそありがとうございました。
2009/06/08 【GreenBeetle】 URL [編集] 

[92] 目次

各カテゴリ内での、目次に並ぶ作品の数を増やしたいのです。
何度もNEXTやBACKで飛ばなくても良いように
目次スペースを縦に大きくするにはどうすれば良いのでしょうか?
2009/07/21 【千巻】 URL 

[93] カテゴリ画面(目次)の記事数

> 各カテゴリ内での、目次に並ぶ作品の数を増やしたいのです。

これについては、テンプレートではどうしようも出来ません。ブログの設定を変更してみてください。
ブログの管理画面から、「環境設定の変更」の「ブログの設定」「記事の設定」で、「記事(カテゴリ別)」の1ページあたりの記事の表示数が1~30件の間で自由に設定出来るようになっています。どうぞお試しください。
2009/07/21 【GreenBeetle】 URL [編集] 

[94] 

あぁ、そうでしたか。すみません、お手数お掛けしました。ありがとうございます。
2009/07/22 【千巻】 URL 

[95] トップ背景画像サイズ変更・レイアウト変更方法

素晴らしいテンプレートの作成、ありがとうございます。

さっそくですが…。
こちらのトップのように画像を右・メニューを左…と、
いうふうにレイアウトしたいのですが、
なかなか上手くいきません。

スタイルシートの「表紙外枠」の部分をいじってみたのですが、
画像の表示サイズだけではなく、フリースペースの部分も、
横幅が狭くなってしまいます…。

どのようにしたら、
こちらのトップのようなレイアウトに変更できるのか、
教えて下さい。
(今現在表示中のトップ画像は、元サイズです)
2009/07/22 【*koyuking*】 URL [編集] 

[96] Re: トップ背景画像サイズ変更・レイアウト変更方法

こちらこそ、ダウンロードをありがとうございます。

さて、インデックス画面のレイアウト変更についてですが、現在の当ブログのテンプレートと「for_novel_sky」とは、CSSは勿論の事HTMLの構造も少々違うものとなっておりますので、改造するとなるとちょっと説明が長くなってしまいます。
このところ色々と立て込んでいまして、今週中はちょっと身動きが取れないような気がしますが、お待ちいただけるでしょうか。

もしくは、今当ブログで使用しているテンプレートを、来週中には共有向けにブラッシュアップする予定でいましたので、それを待っていただくという手もあります。
二つのテンプレートを比較して、改造方法を説明するよりも、その方が手間がかからないような気がします。

改造説明にせよ、新しい共有テンプレートにせよ、申し訳ありませんが、どうか今しばらくお待ちください。
2009/07/22 【GreenBeetle】 URL [編集] 

[97] ノベルリスト機能

ノベルリスト機能って使うんですか・・・・?
2009/07/22 【LARI】 URL [編集] 

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

迅速な回答、ありがとうございます。
こちらのテンプレとskyは構造が違うのですか…。
了解いたしました。

私の方はそんなに急ぐほどではありませんので、
GreenBeatle様のお手間を取らせない形で結構です。
お忙しいとのことですので、
お体を壊すことのない様、ご自愛下さいませ。
2009/07/23 【*koyuking*】 URL [編集] 

[99] まとめて失礼します

>LARIさん

ノベルリスト機能ですが、小説のタイトルの羅列よりも使いでが良いかな、と思っての設定ですので、必要でなかったり、代替案があったりされるなら、自由にしてくださって構いませんよ。
もしもお使いにならないのでしたら、「小説ブログ以外で使う方法」を参考に、インデックス画面やタグ検索画面をカスタマイズしていただければよいかと思います。


>*koyuking*さん

それでは、お言葉に甘えさせていただいて、やりかけている仕事が片付いているであろう来週中に、何らかの形でお知らせしようと思います。
しばしお待ちくださいね。
2009/07/23 【GreenBeetle】 URL [編集] 

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

このコメントは管理人のみ閲覧できます
2009/07/23 【】  

[101] ノベルリストについて

>非表示さま
お返事が遅くなってしまってすみません。

ノベルリストの使い方ですが、これについてはこのコメントがついているエントリの中ほど、「必須設定!」の三番目「連載の一回目の記事にタグを設定する!」に説明があります。

これは、ユーザータグに「*」(半角アスタリスク)が入力されたエントリのみをピックアップしてノベルリストとして表示する機能です。
連載小説の冒頭か前書きなどのエントリのユーザータグに「*」を入力するだけで、自動的にそのエントリの要約文がノベルリストに加えられますので、どうぞ有効にご活用くださいね。
2009/07/27 【GreenBeetle】 URL [編集] 

[103] 

回答ありがとうございました。
また質問なんですが
カテゴリ画面(目次)に日付を表示するで
"CSSファイルの2行目以降のどこかに"が良く解りません
CSSって何ですか?どこら辺にあるモノなんですか?
2009/08/01 【LARI】 URL [編集] 

[104] CSSの編集について

> CSSって何ですか?どこら辺にあるモノなんですか?

ブログ管理画面の「テンプレートの設定」で、ダウンロードしたテンプレートの一覧が見られると思います。
「テンプレート名/プレビュー」「プラグイン対応」「HTML CSS」……と項目が並んでいる表で、カスタマイズしたいテンプレート(この場合for_novel_skyでしょうか)の「HTML CSS」の欄の「編集」をクリックすると、

[ for_novel_sky ] のテンプレート名変更
for_novel_sky のHTML編集

……の下に、

for_novel_sky のスタイルシート編集

というエリアがあります。

/* 全体設定 */
html { height:100%; }


とか色々書かれているテキスト入力欄の中身が、CSSファイルの中身となります
その二行目以降のどこかに、指定の記述を付け加えていただければOKです。
2009/08/02 【GreenBeetle.】 URL [編集] 

[143] 

質問です。
クッションページなどを作成することは出来ないのでしょうか・・・?
2010/01/06 【秋田】 URL 

[144] 独立したページは難しいかと

クッションページと言っても、トップページに設置するものや、カテゴリ画面や個別記事を表示する際のものなど色々ありますが、どこに設置するにせよ、当テンプレートで更なる独立したページを捻出するのは、現在のFC2ブログの仕様上難しいと言えます。

ページ内アンカーでスクロールさせる方法でクッションを入れる事は可能ですが、「どこに設置するどのようなクッションなのか」が解らない事には説明出来ませんので、よろしくお願いします。
2010/01/06 【GreenBeetle】 URL [編集] 

[146] 

回答ありがとうございました。
もうひとつ質問なのですが、目次をクリックしたら別窓として表示させる事は出来ませんか?
2010/01/07 【秋田】 URL 

[147] 背景透過について

始めまして、ダウンロード及びカスタマイズして使用させて頂いてます。
そこで質問なのですが、トップにある「Waht's New」などのある白背景部分の背景を半透明にするにはどこにタグを挿入すればいいのでしょうか?
探してみたのですがどこだが分からなかったため、質問させて頂きました。
場所がわかりにくかったら申し訳ございません。
2010/01/07 【】 URL 

[149] クリックしたら別窓にするには

>目次をクリックしたら別窓として表示させる事は出来ませんか?

この目次とは、カテゴリ画面(URLの末尾が「blog-category-*.html」となっている画面)で、クリックして個別記事画面を別窓で表示するという事でよろしいでしょうか。
でしたら、テンプレートのHTMLの377行目 <!-- ▽ カテゴリ表示画面 --> の少し下に

        □&nbsp;<a href="<%topentry_link>"><%topentry_title></a><br />

という行がありますので、この <a href="<%topentry_link>"> の部分を

<a href="<%topentry_link>" target="_blank">

のように変えれば、漏れなく全てのカテゴリの記事が別窓で開く事になります。
2010/01/07 【GreenBeetle】 URL [編集] 

[150] Re: 背景透過について

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

早速本題と参ります。

>トップにある「Waht's New」などのある白背景部分の背景を半透明にする

との事ですが、これはもしかして、当ブログが現在使用しているテンプレートのインデックスで、「Waht's New」が背景画像に被っている部分の事でしょうか?
「for_novel_sky」の場合は、「Waht's New」の部分は画像に重ならないようにHTMLを組んでいますので、「白背景部分の背景を半透明」という意味がちょっと解りかねるのです……。

当ブログの現行テンプレートの場合は、背景画像に白色文字が重なるのが前提ですので、スタイルシートで文字の背景を黒く指定しています。例えば、
<h3 class="rev"><span class="black">What's New</span></h3>
とか
<span class="black"><%recent_month>/<%recent_day>  <a href="<%recent_link>#jump<%recent_no>" title="<%recent_body>"><%recent_title></a></span><br />
で、それでCSSで、
.black { background-color:#000000; padding:0px 5px; }
それから、
.new { background-image:url(http://blog-imgs-41.fc2.com/g/r/e/greenbeetle2/black.gif); background-repeat:repeat; padding:10px 20px; margin:30px 20% 0px 10px; clear:both; }
のように、新着案内枠にまるっと透過用の背景画像を指定しています。

……と、これがお望みのものなのか解らないので、ざっと大雑把に記してみました……不要なものだったらすみません。
カスタマイズの目指すところがもう少し具体的にわかれば、お力になれるかもしれませんが。
2010/01/07 【GreenBeetle】 URL [編集] 

[151] 回答ありがとうございます

やはり説明がわかりにくかったようで、お手間を取らせてしまって申し訳ございません。

ええと、リンクを張りましたので一度そちらを見て頂きたいのですが、現在INDEX部分の背景画像を固定しており、そのせいかスクロールするとWhat's New部分に画像が映らないようになっているのです。
完全に重なってしまうと見にくいので、半透明で見える感じにはできないものかと思ったのですが…
やはり、背景画像で指定するしかないのでしょうか?
2010/01/07 【】 URL 

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

ありがとうございました!
すぐお返事がいただけるのでとても助かります。

重ね重ね申し訳ないのですが、記事の題名が 「topentry_title>」
となっていて何のものか分かり辛いのですが、これは一般的な事なのでしょうか?
2010/01/08 【秋田】 URL 

[154] Re: 鎖さん 背景画像の位置について

 ブログを拝見して、状況が良く解りました。インデックスの背景画像に background-attachment:fixed; を使っておられるのですね。

 実は、「for_novel_sky」は、新着案内の What's New 以下の部分が背景画像に重ならないように、背景画像の部分を別ブロックの入れ子にしているのです。
 一見、他の二つよりも自由に画像をレイアウト出来そうに見えますが、こちらも画像の表示位置は変更出来ないとお考えください。
#この辺り、説明が不十分でしたので、カスタマイズ記事にその旨注記しておきます。すみませんでした。

 詳しく申しますと、インデックスページの中に画像サイズのエリア(divブロック)を指定し、その範囲だけに背景画像が表示される事になっているのです。新着案内以下は画像を隠さないようにその外側に配置してあります。
 メニューやフリースペースの記述が増えれば、そのエリアもそれに合わせて縦方向に伸びます。画像エリアの背景色を外側と同じ黒色に揃えているため、その境目は解りにくいかと思います。

 鎖さんのブログでは、画面に対して中央に背景画像が固定されているため、スクロールに合わせて画像エリアが上に移動してしまうと背景画像が見えなくなってしまうのです。広い机の上に置いた写真に穴の開いた紙を乗せて、その紙を動かしている状況だと言ったらお解りになるでしょうか。
 ですから、広い画面で鎖さんのブログを見た場合、はじめから画像がエリア外に隠れてしまう可能性もあります。というか、当方の 1920*1080 の画面では背景が真っ白だったので、最初は何が起こっているのか解らずにとても焦りました。不具合じゃなくてヨカッター。
 鎖さんには、カスタマイズ記事の説明不足で、ご迷惑をおかけしました。お許しください。


 さて、前置きが長くなりましたが、新着案内を半透明に、というのは、各エリアの重なり方の関係からこのままでは不可能です。背景レイアウトが自由なタイプのテンプレートを待っていただければ、話は簡単なのですが、色々忙しくて当分出来上がりそうにありません。なので、この場をお借りして簡単な改造方法を記します。

 ページの中央に背景画像を固定、という前提で話を進めます。

 HTML の <!-- ▼ 新着案内 --> のすぐ上にある </div> を削除して、 <!-- ↑ フリースペース3 --> の下の </div> の更にその下に </div> を追加してください。これで、画像エリアが、新着案内の下のフリースペース3部分まで広がります。

 それから、重なった文字を見易くするために、文字の背景に白色を入れます。
 CSS の「全体的な設定」のどこかに、
.white { background-color:#ffffff; padding:0px 5px; }
と追加してください。行頭のピリオドをお忘れなく。padding (余白)の値は好みに合わせて変えてください。
それから、再び HTML の <!-- ▼ 新着案内 --> 以下を見てください。
「What's New」
「<%recent_month>/<%recent_day>  <a href="<%recent_link>" title="<%recent_body>"><%recent_title></a>」(行の最後の </ br> は含めません)
「Recently Comment」
「<%rcomment_month>/<%rcomment_day>  <a href="<%rcomment_link>#comment<%rcomment_no>" title="<%rcomment_title>"><%rcomment_name> @ <%rcomment_etitle></a>」(同じく最後の </ br> は含めません)
の四箇所、トラックバックも使うならば
「Recently Trackback」
「<%rtrackback_month>/<%rtrackback_day>  <a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_title>"><%rtrackback_blog_name> @ <%rtrackback_etitle></a>」(やはり最後の </ br> は含めません)
の二箇所を足した、合計六箇所を
<span class="white">

</span>
でそれぞれ囲ってください。
<span class="white">What's New</span>

<span class="white"><%recent_month>/<%recent_day>  <a href="<%recent_link>" title="<%recent_body>"><%recent_title></a></span>
のようになればOKです。


あ、それと、ついでに CSS の「インデックス画面の設定」の「外枠」の、
* html .index { height:525px; width:700px; width:expression( document.body.clientWidth > 700? “700px” : “auto”); }
の一行を削除しておいてください。万が一 height が悪影響を及ぼさないように、念のためです。


半透明のタグ、というと、filter:alpha(属性) というプロパティがスタイルシートにあります。
http://www.tagindex.com/stylesheet/filter/alpha.html
これを使う場合は、新着情報エリアの背景色を半透明にしてから、別途文字色の設定を追加するか(文字の色も薄くなってしまっては意味がありませんから)、もしくは文字の上に画像を半透明にして乗せる、という事になると思います。
どちらにしても、カスタマイズ方法を探るのに少々手間がかかるのと、あと、filter が基本IE専用のプロパティなので、これについてのサポートはご勘弁願います。
(filter も使い方によっては他のブラウザにも適用出来るみたいですが、詳しくは調べてみないと解りません。不勉強ですみません)
2010/01/08 【GreenBeetle】 URL [編集] 

[155] Re: 秋田さん

お役に立てて何よりです。
たまたまこの一週間、風邪のせいで仕事を早く切り上げていたので時間がありましたが、これからもこのペースを維持できるかどうかは、ちょっと自信がありません……。

>「topentry_title>」
とは、コメント[149]でご紹介した、「target="_blank"」を付け足すカスタマイズの結果、という事でよろしいでしょうか。出来ればもう少し具体的に解りやすくコメントいただけたら助かるのですが。
で、そうだと仮定して、ブログ変数がそのまま表示されてしまっているという事は、おそらくその手前かどこかのタグの「<」か何かの一部分が、欠落してしまっているのだと思います。
コメント[149]の内容をメモ帳などのテキストエディタにコピー&ペーストするかして、テンプレートの HTML と一文字一文字照らし合わせてみてください。
2010/01/08 【GreenBeetle】 URL [編集] 

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

このコメントは管理人のみ閲覧できます
2010/01/08 【】  

[157] 直りました!

ありがとうございました!
回答を参考にしてみると元に戻りました!
どうやら前回いじった時の消し残しがあったようです。
あまり詳しく説明することが出来なくてすみません(汗)
またお世話になる時はお手間を取らせないよう詳しく頑張ります(/_\;)
またよろしくお願いします!
2010/01/09 【秋田】 URL 

[158] またも質問です

前回はありがとうございました。
度々で申し訳ないのですが、どうにも理由が分からないためまた質問させて頂きます。

ノベルリスト機能を使用し、目次での上部フリースペースを使用するため編集したのですが、何故かその編集したもの(タイトルの下に説明文)ではなく、初期の状態(タイトルの下に一話のあらすじ)になってしまいます。
上下にあった消すよう指示のあった場所は消したので、理由が分かりません。

説明等でわかりにくい所があったら申し訳ございません。
よろしくお願い致します。
2010/01/22 【】 URL 

[159] Re: またも質問です

こちらこそ、お役に立ててよかったです。素敵なカスタマイズですよね。テンプレートを公開した甲斐がありました。

さて、ノベルリストのカスタマイズとの事ですが、この「目次でのフリースペース」というのは、実はカテゴリ画面(ブログURLの末尾が blog-category-*.html となっている画面)での話なのです。

「for_novel シリーズ 特定のカテゴリ画面(目次)に説明やバナーを表示する」
http://greenbeetle2.blog117.fc2.com/blog-entry-84.html
の記事どおりにカスタマイズなさった場合、
http://greenbeetle2.blog117.fc2.com/blog-category-6.html
のように、カテゴリ画面(目次)に説明文が表示されるようになります。

ノベルリストに小説の説明を入れたい場合は、小説の説明を書いた記事を一つ用意して、連載第一回目ではなく、そちらの説明記事の方に「*(半角アスタリスク)」をユーザータグ指定してください。
ウチのブログでは、連載の前に「前書き」の記事を作って、そちらを「*」タグでノベルリスト画面に表示させるようにしています。テンプレートで設定しているカテゴリ画面の目次とは少し文面を違えているので、良かったら一度見てみてください。参考になればいいのですが。
2010/01/22 【GreenBeetle】 URL [編集] 

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

このコメントは管理人のみ閲覧できます
2010/01/23 【】  

[220] 質問です。

こちらの素晴らしいテンプレートを使わせてもらっております。
質問なのですが、INDEXの表紙画像をランダムで変えることはできないのでしょうか?
当サイトは小説の絵師さんや閲覧者様からTOP絵として貰う事が多く、その絵の数が多いのでランダムで切り替えができるとなお嬉しいのですが……
なので方法を教えていただけないでしょうか?

できないようでしたら構いません。
お忙しい中、ご無理言ってすみません。

それと当サイトで使っているテンプレは、配布されていたものを改造しちゃっているので、その点で何か問題がございましたらお教えください。

長くなりましたが、素敵なテンプレありがとうございます。大切に使わせてもらっています。
2011/07/26 【るい粉】 URL [編集] 

[221] 表紙画像のランダム表示

テンプレートのご使用ありがとうございます。お褒めにあずかり、光栄です。

さて、本題の表紙画像のランダム表示についてですが、以下の三つの点をお含みおきください。
1)javascriptを使用するため、全ての閲覧環境で実現するわけではない。
2)XHTMLの仕様に背く部分があるため、閲覧環境によっては実現しない可能性がある。
3)テンプレート作者がjavascriptに疎いため、サポートが不完全である。

という事で、All About「ランダムに画像を表示したい」
http://allabout.co.jp/gm/gc/23805/
を参考に、カスタマイズ方法を考えてみました。

テンプレートのHTMLの最初のほうを見てください。

14行目 <title>【<%blog_name>】 <%sub_title></title>
15行目
16行目<!--index_area-->
17行目 <script type="text/javascript">
18行目function showCategory(idno){

この、16行目の
<!--index_area-->

の直後に、以下の記述を挿入してください。


<script language="JavaScript">
var imglist = new Array(
"一つ目の画像ファイルのURL",
"二つ目の画像ファイルのURL",
"三つ目の画像ファイルのURL" );
var selectnum = Math.floor((Math.random() * 100)) % imglist.length;
var output = "<style type=text/css>.index{background-image:url(" + imglist[selectnum] + ")}</style>";
document.write(output);
</script>


使用する画像の数を増やす場合は、

"二つ目の画像ファイルのURL",

の行を欲しい数だけコピーすればOKです。

……私の環境では、この方法で上手くいったのですが、いかんせんjavascriptの知識が少ない人間の行った、見よう見まねのカスタマイズなので、とても100%の動作保障は出来ませぬ。
頼りない回答で申し訳ありませんが、どうかご了承ください。


テンプレートの改造については、素材サイト様からお借りしている画像そのものを加工するのでなければ、どのようにしてくださっても構いません。ただ、使用画像を変更なさった場合、フッタにある素材サイト様へのリンクを適切なものに変更する事だけは忘れずにお願いいたします。
2011/07/26 【GB】 URL [編集] 

[222] 表紙画像のランダム表示

できました!
ありがとうございました。
2011/07/26 【るい粉】 URL [編集] 

[269] Contentsのカテゴリ一覧について

とても素敵なテンプレートで、是非使わせて頂きたいのですが、カテゴリの編集をしたところ、Contentsの下に表示されていたカテゴリ一覧が表示されなくなってしまいました。
カテゴリ編集をするまでは表示されていたのに…。

ダウンロードし直しても同様ですし、GreenBeetleさんが作成された他のテンプレートを試しても駄目でした。
現在は全く別の小説用テンプレートを適用していて、そちらにはNovelListとしてカテゴリ一覧が表示されています。

カテゴリ編集の仕方がマズかったのかもしれませんが、何か解決策はないでしょうか?
せっかく見つけたお気に入りのテンプレートなのに…ちょっと今凹んでいます。

ブログ初心者なものですから、説明不足等ありましたら申し訳ありませんが、何卒よろしくお願いします。
2012/11/01 【ルイ】 URL 

[270] Re:Contentsのカテゴリ一覧について

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

カテゴリ編集、とは、どのような作業内容だったのでしょうか。
以前は表示されていたとのことですが、作業前の状態に戻しても、カテゴリ一覧の表示は戻りませんか?
非公開コメントでも構いませんので、どのような作業を行われたのか教えていただけたら幸いです。

あと、FC2ブログの新サーバ移行に伴って文字コードが変更になったようです。
このところ、テンプレート制作から少し遠ざかって降りましたので、そのあたりの対応が不十分になってしまっておりました。すみません。
遅まきながら、全テンプレートを、新サーバ対応に修正いたしましたので、カスタマイズをまだなさっておられないのでしたら、新しくテンプレートをダウンロードし直していただけますか?
もしかしたら、文字コードがらみでContents折りたたみスクリプトに不具合が生じていたのかもしれません。

お手数をおかけしますが、どうぞよろしくお願いいたします。
2012/11/02 【GB】 URL [編集] 

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

このコメントは管理人のみ閲覧できます
2012/11/02 【】  

[272] Re: Re:Contentsのカテゴリ一覧について

ご説明、ありがとうございます。

Contentsのカテゴリ一覧には、JavaScriptを使用しているのですが、もしかしたら、カテゴリ名に含まれている「'(半角アポストロフィー)」がスクリプトに影響を与えているのかもしれません。

一度、カテゴリ名の「'(半角アポストロフィー)」を「’(全角アポストロフィー)」に変えてみてくださいませんか?
入力の際に全角半角の区別がつきにくい場合は、「’」←これをコピペしてお使いください。

これで直ればいいのですが……。
2012/11/02 【GB】 URL [編集] 

[273] Re: Re:Contentsのカテゴリ一覧について

やってみましたが、上手くいきませんでした。
きっと、カテゴリ編集の仕方がマズかったのでしょう。

懲りずに弄ってみたいと思います。
色々と対応頂き感謝です。
ありがとうございました。
2012/11/03 【ルイ】 URL 

[274] Re: Re: Re:Contentsのカテゴリ一覧について

もう一点だけ、さっきのアポストロフィーに加えて、「&(半角のアンド)」を「&(全角のアンド)」に変えてみていただけますか?

カテゴリの編集の仕方には特に問題があるように思えませんので、変更なさった名前が引っかかっているような気がしてならないのです。

是非もう一度試してみてください。
2012/11/03 【GB】 URL [編集] 

[275] Re: Re: Re:Contentsのカテゴリ一覧について

で…でました!!!

すごく嬉しいです!
ありがとうございました!

使わないほうがいい記号を使ってしまったのですね。
以後、気を付けたいと思います。
2012/11/03 【ルイ】 URL 

コメントの投稿

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







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

Trackback

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

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