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

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←ユーザータグ「Character」を設定して登場人物紹介ページにする →イラストリスト付きテンプレート 複数のカテゴリの目次で画像を一覧させる
 
上記の広告は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
   
 

「テンプレートマニュアル」
イラストリスト

イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる

 画像のないテンプレートで記事をご覧になる場合は
 Temlplate Image : カスタマイズの難易度1  
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←ユーザータグ「Character」を設定して登場人物紹介ページにする →イラストリスト付きテンプレート 複数のカテゴリの目次で画像を一覧させる
 
カスタマイズの難易度1 カスタマイズの難易度1

以下はイラストリスト付きテンプレートをご利用の場合のカスタマイズのご紹介です。
イラストリスト(Illust List)・イラストリスト付きテンプレートについての説明は コチラ コチラ

特定のカテゴリの目次で画像を一覧させる


以前、特定のカテゴリの目次で画像を一覧表示させるカスタマイズをご紹介致しましたが、これも初心者の方にとっては実行するのは中々ハードルが高かったようです。イラストリスト付きのテンプレートのHTMLには、この特定カテゴリの目次に画像を一覧させるためのソースが二種類埋め込まれていますので、このカスタマイズが非常に簡単になりました。

画像用目次(1)画像が横に並んで一覧表示されるスタイル コチラサンプル
画像用目次(2)画像(イラスト)の横に記事冒頭文が表示されるスタイル コチラサンプル

カテゴリの番号の確認


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



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

カスタマイズの方法




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


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

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

HTMLのカスタマイズ


最初に、HTMLの<head>内の、以下の赤字のXXを画像を一覧表示させたいカテゴリの番号(半角数字)に変更します。

<head>


 ~ 中 略 ~


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

.c { display: none; }
.tag<%sub_title> { display: block;margin:20px auto; }
.hidden_tagIllust { display: none; }
.gazou<%cno> { display: block ; }

/* (AA-1)特定のカテゴリの目次で画像を一覧表示させる場合XXをカテゴリ番号に変更*/

.hidden_catXX { display: none; }

--></style>


 ~ 中 略 ~


</head>
<body <!--index_area-->onload="hidethem()"<!--/index_area--> id="~ 中 略 ~ ">


次に、<body>部分を変更します。HTMLをスクロールして以下の部分を探します。

<!--▽作品目次(カテゴリ)ページ▽-->
<!--category_area-->
<h2>Index ~作品もくじ~</h2>

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



 ~ 中 略 ~



<!--特定のカテゴリの目次で画像を一覧表示させる場合head内(AA-1)と
以下の画像用目次(1)の(2)いずれかのスタイルを選んでgazouXXのXXをカテゴリ番号に変更-->

<!--画像用目次(1)画像が横に並んで一覧表示されるスタイル-->
<div class="c gazouXX">
<!--topentry--><div id="gazou_box">
<div class="entry_gazou">
<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_body></a>
</div></entry_gazou>
<div class="entry_gazou_title"><a href="<%topentry_link>" title="<%topentry_discription>"><%topentry_title></a></div>
<div class="entry_gazou_date">
<a href="<%topentry_link>" title="続きをよむ">»»</a>  <%topentry_year>.<%topentry_month>.<%topentry_day>.<script type="text/javascript">
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script></div>
</div></gazou_box>
<!--/topentry--><br clear="both">
</div>

<!--画像用目次(1)画像が横に並んで一覧表示されるスタイル-->


<!--画像用目次(2)画像(イラスト)の横に記事冒頭文が表示されるスタイル-->
<div class="c gazouXX" align="center">
<!--topentry-->
<table border="0" align="center"><tr><td align="center"class="gazou_bg">
<p><img src="http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/karal5.gif" border="0" /></p>
<div id="gazou_box2"><div class="entry_gazou2">
<a href="<%topentry_link>" title="<%topentry_title>"><%topentry_body></a>
</div></entry_gazou>
</div></entry_gazou></a>
</div></entry_gazou2>
</div></gazou_box2>
<p><img src="http://blog-imgs-18.fc2.com/n/o/v/noveltemplate/karal5-.gif" border="0" /></p>
</td><td >
<div class="gazou_list2">
<h2><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></h2>
<div align="right">

<script type="text/javascript">
nw('<%topentry_year>','<%topentry_month>','<%topentry_day>','<%topentry_hour>')
</script>
<span class="font1" style="font-size: 90%; font-weight : normal;"><%topentry_year>.<%topentry_month>.<%topentry_day>.<a href="<%server_url>control.php?mode=editor&process=load&eno=<%topentry_no>" title="『<%topentry_title>』を編集">[Edit]</a></span></div>
<div class="gazou_text2">
<%topentry_discription>
</div>
<p style="text-align : right ; font-size: 90% ; "><a href="<%topentry_link>" title="">»» 続きを読む<a>
<br /> <span class="font1"><a href="#pagetop" title="↑ページトップへ">▲<i>page top</i></a></span></p></div>
</td></tr></table><br />
<!--/topentry-->
<p style="text-align :left ; margin-left: 50px ; "> Material 「<a href="http://www.ream.ais.ne.jp/~meme/index.htm" target="_blank">素材の小路</a> 」</p>
</div>

<!--画像用目次(2)画像(イラスト)の横に記事冒頭文が表示されるスタイル -->


<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-->
<!--△作品目次(カテゴリ)ページ△-->


画像用目次(1)のスタイルに表示させる場合は青い部分のXXを、
画像用目次(2)のスタイルで表示させる場合はピンク色のXXを、カテゴリ番号に変更します。

更新 】 をクリックする。


これだけでOKです。そのカテゴリ番号の目次では画像が一覧表示されます。

尚、記事本文ではなく、追記部分の冒頭にアップさせた画像を画像目次に表示させる場合は、

<%topentry_body><%topentry_more>に変更して
更新 】 をクリック
関連記事
スポンサーサイト
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 イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit ▽TB[0]▽CO[0]
関連カスタマイズ記事一覧 カスタマイズの難易度1  
   

~ Comment ~

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

名前変換フォーム

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