このカテゴリは 横ならび目次サンプル(2) で表示させ、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
このカテゴリの記事ページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
 

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←特定のカテゴリの目次ページのカスタマイズ (1)特定のカテゴリの目次に説明などを追加する →特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit
   
 

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

特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する

 画像のないテンプレートで記事をご覧になる場合は
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←特定のカテゴリの目次ページのカスタマイズ (1)特定のカテゴリの目次に説明などを追加する →特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする
 
カスタマイズの難易度4 カスタマイズの難易度4

osirase-ani02.gif2010.7.1.追記改訂版のテンプレートのHTMLには、予め特定カテゴリの目次を横並びで表示する場合のソースが埋め込まれていますので、以下で説明している方法に比べてカスタマイズが容易になりました。
詳しくは 【改定版 簡単カスタマイズ】特定のカテゴリの目次ページを横並びにする


以下は改訂前の記事ですので折りたたんであります。
一応読んでみる方はここをクリックしてください▼

特定のカテゴリの目次ページのカスタマイズ

1)特定のカテゴリの目次に説明などを追加
2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
3)アルバムのように画像を一覧表示する
4)カタログのように飾り枠付きの画像と説明文を添えて表示する
5)【novel-PF タイプ】特定のカテゴリの目次の背景画像を変更する
6)【novel-R タイプ】特定のカテゴリの目次の背景画像を変更する
7)【novel-PF・novel-R タイプ以外のテンプレート】特定のカテゴリの目次の背景画像を変更する




以下は特定のカテゴリの目次ページだけを、横並び目次に変える場合のカスタマイズです。 記事タイトルが番号のカテゴリの目次を横並びにした場合サンプル

特定のカテゴリではなく、全ての目次ページを横並び目次に変える場合のカスタマイズは「目次ページ 横並び目次に変える」をご参照ください。

記事タイトルが通し番号のもくじだけを横並びで表示するカスタマイズ



Novelテンプレートにはあらかじめ、横並びに変更する場合のソースが埋め込まれていますので、初期設定では非表示になっているそれらを、カテゴリ番号をいれたクラス名のブロックで囲んで、その番号のカテゴリの時だけ表示させます。

テンプレートをカスタマイズする前に表示を変更させるカテゴリのカテゴリ番号を確認します。

 カテゴリの番号の確認



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

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

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



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


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

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

 <head>部分



HTMLの冒頭、二三行目あたりに<head>というタグがあると思います。そこから</head>までの間のどこでもよいので以下の内容を追加します。
.hidden_catの後の数字は、最初に確認した、このカスタマイズをして表示を変更させるカテゴリの番号をいれます。
以下はカテゴリ番号4 の「坊ちゃん」の例です。

<style type="text/css"><!--
.c { display: none; }
.suji<%cno> { display: block ; }
.hidden_cat4 { display: none; }

--></style>


前ページの「カテゴリ別に目次をカスタマイズ ①特定のカテゴリの目次に説明などを追加する」カスタマイズを行い、<head>部分に追加した記述がある場合には、同じ箇所に、.suji<%cno> { display: block ; } と.hidden_cat4 { display: none; }だけを併記します。

前ページのカスタマイズで表示する説明などの位置が一箇所だった場合↓

<style type="text/css"><!--
.c { display: none; }
.cn<%cno> { display: block ; text-align : right ; font-size : 90% ; margin : 1em ; }
.suji<%cno> { display: block ; }
.hidden_cat4 { display: none; }

--></style>



前ページのカスタマイズで画面の上下二箇所に説明などを表示させた場合↓

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

.c { display: none; }
.cn_a<%cno> { display: block ; text-align : left ; font-size : 90% ; margin-left : 1em 1em 1em 5em ; }
.cn_g<%cno> { display: block ; text-align : right; font-size : 90% ; margin : 1em ; }
.suji<%cno> { display: block ; }
.hidden_cat4 { display: none; }

--></style>


どこに追加してよいか迷う方は</head>の真上あたりにでも。

<head>

~ 中 略 ~

//このあたりに追加//
</head>
<body id="<!--index_area-->index<!--/index_area--> ~省 略~">
<!-- アクセス解析タグはここから -->





 カテゴリエリアのカスタマイズ



次にHTMLをスクロールしていき、<!--category_area-->~<!--/category_area-->の箇所探します。
テンプレートによってクラス名が違っていたりと微妙に違う場合がありますが、大体以下のような内容になっていると思います。

<!--▽作品目次(カテゴリ)ページ▽-->
<!--category_area-->
<h2><font style="font-weight : bold;">Index ~作品もくじ~</font></h2>

<div class="entry">

<div class="entry4">

<br />

<div class="hidden_cat<%cno>">

<!--▼タイプ① 縦ならび目次(一話ごとにサブタイトルをつける場合)▼-->

~ 中 略 ~

<!--▲タイプ① 縦ならび目次(一話ごとにサブタイトルをつける場合)▲-->
</div>

<!--DL時は上タイプ①縦並び目次仕様ですが、下のタイプに変更することもできます。詳しくは解説記事をごらんください http://noveltemplate.blog26.fc2.com/blog-entry-48.html -->

<!--▼タイプ② 横ならび目次(サブタイトルではなく数字で表示する場合)▼

~ 中 略 ~

▲タイプ② 横ならび目次(サブタイトルではなく数字で表示する場合)▲-->
 

<div class="c suji4">
<!--▼タイプ③ 一列目次(サブタイトルではなく数字で表示する場合12話以内推奨)▼
半角数字番号タイトルが12話以内であればこちらもおススメ。それ以上になるとレイアウトが乱れます(^^ゞ
-->
<table border="0" cellpadding="5" cellspacing="5"class="hako"><tr align="center">
<!--topentry-->
<td><a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>">
 <%topentry_title> </a> <script type="text/javascript">
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
</td><!--/topentry-->
</tr>
</table>
<!--▲③ 一列目次 (サブタイトルではなく数字で表示する場合20話以内推奨)▲-->
</div>

</div>

</div>

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

<!--/category_area-->
<!--△作品目次(カテゴリ)ページ△-->


横ならび目次のソースはタイプ②とタイプ③の二種類埋め込まれています。
今回はタイプ③で表示させるため、タイプ③のソースを、カテゴリ番号をクラス名に入れたブロックで囲みます。(青色の部分)<div class="c suji4">~</div>
初期設定ではコメントタグの中にあるため非表示なので、コメントタグを閉じる青の部分も忘れずに追加します。
--><!--
また、このままでは普通の縦並びのタイプ①に目次も表示されてしまうので、このカテゴリ番号の時だけ、タイプ① 縦ならび目次が非表示になるように赤字のタグ<div class="hidden_cat<%cno>">~</div>でタイプ①のもくじのソースを囲みます。


更新 】 をクリックする。


2009.1014.追記
目次ページ 横並び目次に変える」のカスタマイズを既に施してあり、特定のカテゴリだけを横並びではなく縦並びの目次にする場合はこのカスタマイズの反対を行えばよいわけです。仮にそれがカテゴリ番号4であれば、<div class="c suji4"></div><div class="hidden_cat<%cno>"></div>で囲む部分を以下のように、上の例とは反対にすれば、カテゴリ番号4の目次ページだけが縦並びで表示され、それ以外のカテゴリ番号の目次は横並びで表示されます。

<div class="c suji4">

<!--▼タイプ① 縦ならび目次(一話ごとにサブタイトルをつける場合)▼-->

~ 中 略 ~

<!--▲タイプ① 縦ならび目次(一話ごとにサブタイトルをつける場合)▲-->

</div>




<div class="hidden_cat<%cno>">
<!--▼タイプ③ 一列目次(サブタイトルではなく数字で表示する場合12話以内推奨)▼
半角数字番号タイトルが12話以内であればこちらもおススメ。それ以上になるとレイアウトが乱れます(^^ゞ
-->
<table border="0" cellpadding="5" cellspacing="5"class="hako"><tr align="center">
<!--topentry-->
<td><a id="<%topentry_no>" name="<%topentry_no>" href="<%topentry_link>">
 <%topentry_title> </a> <script type="text/javascript">
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
</td><!--/topentry-->
</tr>
</table>
<!--▲③ 一列目次 (サブタイトルではなく数字で表示する場合20話以内推奨)▲-->

</div>



関連記事
スポンサーサイト
Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
携帯用Novelテンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
表紙ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
Novel List 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
目次ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
小説本文(個別記事)ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
イラストリスト 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
その他・共通ページ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
携帯用テンプレートのカスタマイズ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
テンプレート別のカスタマイズ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
サイト内配布テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
テンプレートの衣替え 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
裏技カスタマイズ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-tempタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-Sタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-Rタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-Gタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-Jタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-Cタイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
素材屋風テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
疑似フレームテンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
novel-PF2タイプ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
夢小説用テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
イラストリスト付きテンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
携帯用テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
一般ブログ用テンプレート 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
不具合の修正 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
その他お知らせなど 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
管理人のおススメ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
雪の女王 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
銀河鉄道の夜 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
坊っちゃん 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
幸福の王子(夢小説サンプル)  3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png 特定のカテゴリの目次ページのカスタマイズ (2)記事タイトルが通し番号のカテゴリの目次を横並びで表示する
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
   

~ Comment ~

カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←特定のカテゴリの目次ページのカスタマイズ (1)特定のカテゴリの目次に説明などを追加する    →特定のカテゴリの目次ページのカスタマイズ (3)アルバムのように画像が一覧できるスタイルにする

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。