FC2ブログ

ブログ小説専用 Novel テンプレート

「テンプレートマニュアル」テンプレートマニュアル
目次ページ

Temlplate Image : カスタマイズの難易度2 
適用中のデザインテンプレートでご覧になる場合は  

【改定版・簡単カスタマイズ】特定のカテゴリの目次にあらすじや説明・バナーなどを追加する

カスタマイズの難易度2(変更箇所は一箇所だけ) カスタマイズの難易度2

以前、特定のカテゴリの目次ページだけに、その作品のあらすじや固有のバナーを表示させるカスタマイズをご紹介しましたが、改定版のテンプレートには予め、カスタマイズに必要なソースが埋め込まれています。前後の不要なコメントタグを削除して、XXをカテゴリ番号に変更するだけでOKですから、カスタマイズがとても簡単になりました。
(2010.5.3.現在 novel-templateタイプ・novel-tempタイプ・novel-Sタイプは改訂済みですので、以下の簡単カスタマイズが適用できます)公開テンプレートは全て実装済み

1.表示させる内容の準備


テンプレートをカスタマイズする前に、どのカテゴリの目次ページに表示させるか、そのカテゴリの番号を確認しておき、表示させるコンテンツなども用意しておきます。

1-(1) カテゴリの番号の確認


カテゴリ番号は[カテゴリの編集]画面のカテゴリ一覧リストの一番左、# をクリックすると表示される番号がそれですが、目次ページのアドレスからも確認できます。
http://noveltemplate.blog26.fc2.com/blog-category-〇〇.html
〇〇がそのカテゴリのカテゴリ番号です。


1-(2) カテゴリ別に表示させるコンテンツの準備




表示させる文面やバナー画像等は、別窓で、[新しく記事を書く]画面を開いて記事と同じ様にツールをつかって作成しておくとよいでしょう。文字の装飾や文字色の変更・リンクや画像を使う場合も簡単です。あとはそれをコピペして該当する箇所に貼るだけです。<br />は改行の意味ですので適当なところに入れます



☆ カスタマイズの前にはコピーをとりましょう!コピーのとり方は こちら  

2. テンプレートのカスタマイズ


[菅理画面]⇒[環境設定]⇒【テンプレートの設定】をクリックして
テンプレートの管理]ページを開く


PCテンプレート [ テンプレート名 ] 適用中
[ テンプレート名 ] のテンプレート名変更
テンプレート名 のHTML編集
テンプレート名 のスタイルシート編集         こんなふうに上から順番に並んでいます。

HTML編集]部分をカスタマイズします。

ヘッダー内もしくは目次の上部に表示させる場合


HTMLをスクロールして以下の箇所を探します。

<!-- (a) XXをカテゴリ番号に変更しこの行と(b)の行を削除
<div class="c cnXX">
                    ////// カテゴリの説明文の表示(1) /////////
    XXをカテゴリ番号に変更し(a)と(b)の行を削除すると
    ここに記入した内容はそのカテゴリにだけ表示されます
                //////////////////////////////////
</div>
(b)この行と(a)の行を削除-->



指示に従って青色の部分を削除し、XXをカテゴリ番号に変えて、斜線の部分に内容を追加すると、その番号のカテゴリ(目次)にだけ表示されます。

目次の下部に表示させる場合


以下のカテゴリの説明文の表示(2)を同じようにカスタマイズします。

<!-- (c) XXをカテゴリ番号に変更しこの行と(d)の行を削除
<div class="c cnXX">
                    ////// カテゴリの説明文の表示(2) /////////
    XXをカテゴリ番号に変更し(c)と(d)の行を削除すると
    ここに記入した内容はそのカテゴリにだけ表示されます
                //////////////////////////////////
</div>
(d)この行と(c)の行を削除-->



例1 カテゴリ番号が1 の「雪の女王」の場合↓

<div class="c cn1">
雪の女王<br />
SNEDRONNINGEN<br />
七つのお話でできているおとぎ物語<br />
ハンス・クリスティアン・アンデルセン Hans Christian Andersen<br />
楠山正雄訳<br />
出典: 青空文庫<br />
底本:「新訳アンデルセン童話集 第二巻」同和春秋社 </div>



例2 カテゴリ番号が2 の「銀河鉄道の夜」の場合↓

<div class="c cn2"><br />
作品名: 銀河鉄道の夜<br />
作品名読み: ぎんがてつどうのよる<br />
著者名: 宮沢 賢治<br /> 
出典: 青空文庫<br />
底本: 新編 銀河鉄道の夜<br />
出版社: 新潮文庫、新潮社
</div>


同じ内容を複数のカテゴリで表示させる場合


カテゴリ番号XX と カテゴリ番号YY に同じ説明文を追加する場合


<div class="c cnXX cnYY">
                    ////// カテゴリの説明文の表示(1) /////////
    XXをカテゴリ番号に変更し(a)と(b)の行を削除すると
    ここに記入した内容はそのカテゴリにだけ表示されます
                //////////////////////////////////
</div>


cnXX と cnYY の間に半角スペースを入れます。
例 カテゴリ番号1の雪の女王とカテゴリ番号2の銀河鉄道の夜に同じ内容を表示させた場合

<div class="c cn1 cn2">
このカテゴリは、カテゴリ固有の説明(作者・出典などの記述)を表示させています。
</div>



更新 】 をクリックする。


関連記事
スポンサーサイト



小説本文ページで、その小説の前話・次話へ移動できる、新しい変数をFC2にリクエストしました。管理人の要望内容に、ご賛同いただけるかたはFC2リクエストで賛成の投票をお願い申し上げます。詳しくは  コチラ   88_31_004.gif にほんブログ村 ブログブログ ブログテンプレートへ
*Edit TB(0) | CO(16)
関連カスタマイズ記事一覧 カスタマイズの難易度2 

~ Comment ~


お問い合わせ

はじめまして。こちらを一生懸命参照しながら、少し前からサイトを公開している者です。
どうしてもうまくいかず教えていただければと思い書き込みさせていただきました。

目次ごとにそれぞれの作品バナーと、コンテスト参加用のバナーを下部に入れたいのですが、1作品目はうまくいったのですが、2作品目がうまくいきません。

1作品目の <div class="c cn1"> 部分のテンプレを作ってあった続きに、それをコピーして、 <div class="c cn2">と変え、中身もかえて2作品目の内容を作りました。

が、2作品目にはカテゴリ1と2、両方の内容が表示されてしまいます。
これはどこが間違っているのでしょうか?

なれていないのでわかりづらかったらすいません。ご助力いただければと思います。 
#928[2011/02/04 09:46]  七瀬 みお  URL 

To:七瀬様

DLとコメントありがとうございます。
そして、本当に申しわけありません。これは私メのミスです。
カンマを一つ余分に記述しておりました。

HTMLの<head>~</head>内から以下の部分を探していただき、
{ display: none; } の前のカンマ ,(赤字の部分)を削除していただければ、
カテゴリ別に表示されるはずです。

<head>

   ~中略~

<style type="text/css"><!--

.c ,.ad ,ul.entry_list .ad ,{ display: none; }
.top_navi{display: inline ;}

   ~中略~ 

--></style>

</head>
#929[2011/02/04 12:36]  Novelテンプレート管理人  URL 

ご返答ありがとうございます!

おいそがしいなかお返事ありがとうございました。

まずは取り急ぎご挨拶まで。
さっそく本日、明日にでも行ってみて、またご報告させていただきます!
#930[2011/02/07 08:53]  七瀬 みお  URL 

お問い合わせ

すいません。。。さっそくご指示いただいた部分を修正しカテゴリ2の記事を再挿入したんですが、やはりうまくいかないようです。

あと、
.c ,.ad ,ul.entry_list .ad ,{ display: none; }  のご指摘のカンマの後に1文字分?スペースもあったのでためしにそれも削除してみましたが変わらずでした。
スペースは関係なかったでしょうか。
今、サイトそのままで置いてまして、もし何か他にもお心当たりあれば教えていただければと思います。
何度もお手を煩わせては申し訳ないので不明でしたら仕様変更します。
たびたびすいません。
#931[2011/02/07 15:06]  七瀬 みお  URL 

Re: お問い合わせ

ブログを確認させていただきました。
スペースは関係ありません。
追加なさったバナーやコメント、特にカテゴリ番号2で、閉めタグが抜けている個所がありました。
ブロックタグが正しく入れ子になっていないため、表示、非表示の設定がめちゃくちゃになっています。
目次ページのレイアウトがくずれてしまっているのもそのせいです。

<div>~</div> <span>~</span>

入れ子とは上のような状態のことです。
<div>ではじまったブロックは</div>で閉じ、
<span>ではじまったコンテンツは</span>で閉じていなければなりません。

入れ子なっていないタグが一つでもあれば、このカスタマイズはうまくいきません。
以下を参考に、今度はタグの閉め忘れに気をつけて、もう一度最初からカスタマイズし直してください。


<!--category_area-->

~ 中略 ~

この行を削除-->

<!--▲横ならび目次-サンプル(2)(サブタイトルではなく数字で表示する場合20話以内推奨)▲-->

</div>

<div class="c cn1">
/////////////////
カテゴリ番号1「極上~~」の目次に表示する内容
////////////////
</div>


<div class="c cn2">
/////////////////
カテゴリ番号2「オフィスに~~」の目次に表示する内容
////////////////
</div>


<div>
/////////////////
全てのカテゴリの目次に表示する内容があればココ
////////////////
</div>




</div>
<ul class="entry_navi">
<li> <!--prevpage--><a href="<%prevpage_url>">Back</a><!--/prevpage--></li><li><!--nextpage--><a href="<%nextpage_url>">Next</a><!--/nextpage--></li>

</ul>
<!--/category_area-->
<!--△作品目次(カテゴリ)ページ△-->
#932[2011/02/07 15:50]  Novelテンプレート管理人  URL  [Edit]

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

ご指示通り再度見直しましたところ、なんだかおかしなところに</div>が混じってたのが原因だったみたいです。
問題の症状は解決いたしました!

本当にありがとうございます。
ステキなテンプレを提供していただくだけでなくご親切にご指導いただき、感謝いたします。

今後もこちらのサイトで色々勉強させていただきます。
#933[2011/02/07 16:50]  七瀬 みお  URL 

Re: ありがとうございました!

お疲れさまでした!
再度確認に伺ったところ、追加したコンテンツのタグは入れ子になりましたが、
元々あったページ末尾の大事な、</div>が一つ抜け落ちていました!
サイトナビがの長さがおかしいのはそのせいですし、
ほっておくと、他にも、不具合が出てきかねません。
以下の青字の部分ですから、追加しておいてくださいませ。



<!--category_area-->

~ 中略 ~


<div class="c cn1">

~ 中略 ~

</div>


<div class="c cn2">

~ 中略 ~

</div>


</div>


<ul class="entry_navi">
<li> <!--prevpage--><a href="<%prevpage_url>">Back</a><!--/prevpage--></li><li><!--nextpage--><a href="<%nextpage_url>">Next</a><!--/nextpage--></li>

</ul>
<!--/category_area-->
<!--△作品目次(カテゴリ)ページ△-->
#934[2011/02/07 18:02]  Novelテンプレート管理人  URL 

ありがとうございます。

ご丁寧にありがとうございます。

確かに該当の箇所に</div>なかったです;;

ので修正してみましたが、自分で「サイトナビの長さがおかしい」のがどこかわかってないんですが、これで大丈夫でしょうか?
#935[2011/02/08 08:24]  七瀬 みお  URL 

Re: ありがとうございます。

OKです (*^^)v
#936[2011/02/08 08:29]  Novelテンプレート管理人  URL 

はい!

よかったです!
このたびは本当にどうもありがとうございました^^
#937[2011/02/08 08:49]  七瀬 みお  URL 

NoTitle

お世話になっている者です。 novel-PFを借りさせていただいています。
このページのおかげで助かりました。ランキングバナーを目次に貼りたかったのです。

ただ、現在、また手詰まりの状況になってしまいました。

うちでは2つ以上の小説をカテゴリとして置いているのですが、この記事で紹介されている

【<!-- (c) XXをカテゴリ番号に変更しこの行と(d)の行を削除
<div class="c cnXX">
////// カテゴリの説明文の表示(2) /////////
XXをカテゴリ番号に変更し(c)と(d)の行を削除すると
ここに記入した内容はそのカテゴリにだけ表示されます
//////////////////////////////////
</div>
(d)この行と(c)の行を削除-->】

の挿入タグが、2つまでしかなかったため、3つ以降にバナーを入れることができません。初歩的な質問でもうしわけありません。こうしたときはどのようなタグをどこに入れればいいのでしょう?
検索しながら自分でHTMLをいじってみましたがうまくいきません。よければ教えてほしいです。
#939[2011/02/12 20:54]  名無しさん  URL 

Re: NoTitle

DLとコメントありがとうございます。

>挿入タグが、2つまでしかなかったため、3つ以降にバナーを入れることができません。

カテゴリ別に違うバナーを貼りたいのか、同じバナーを小説カテゴリだけに貼りたいのか、
ご要望の詳細と、カスタマイズなさったブログの現状を確認してからご返答させていただきたいので、、
シークレットで結構ですので、ブログアドレスをお知らせください。
#940[2011/02/12 21:44]  Novelテンプレート管理人  URL  [Edit]

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
#941[2011/02/12 23:36]     

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
#942[2011/02/12 23:41]     

Re: タイトルなし

<div class="c cnXX">
////// カテゴリの説明文の表示(2) /////////
XXをカテゴリ番号に変更し(c)と(d)の行を削除すると
ここに記入した内容はそのカテゴリにだけ表示されます
//////////////////////////////////
</div



別々のカテゴリに別々の内容を表示させたい場合は、
上の挿入用のタグを、表示させたいカテゴリの数だけコピーして
XXの部分だけをカテゴリ番号に変更し追加していきます。

現状↓
<div class="c cn2"style="margin:10ox;">
カテゴリ番号2の目次に表示されている内容
</div>


↓カテゴリ番号3「ジ○○○○ン」に表示させる内容を追加する場合は上に並べて赤字の部分を追加

<div class="c cn3">
カテゴリ番号3の目次に表示する内容
</div>


<div class="c cn2"style="margin:10ox;">
カテゴリ番号2の目次に表示されている内容
</div>
#943[2011/02/13 02:53]  Novelテンプレート管理人  URL  [Edit]

できました!!


助かりました、本当にありがとうございます!拝みます!

私の素人丸出しの助けてコールに、迅速かつ親切な対応で感激しました。
#944[2011/02/13 08:30]  名無しさん  URL 
カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
お返事はどう致しますか?投稿なさる前に  コチラ をご確認ください














管理者にだけ表示を許可する

~ Trackback ~


Back      Next