fc2ブログ
 

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

元のデザインテンプレートで記事をご覧になる場合は

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

 Temlplate Image : カスタマイズの難易度1  
関連カスタマイズ :カスタマイズの難易度1  
この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
 ←ユーザータグ「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>に変更して
更新 】 をクリック
関連記事
スポンサーサイト



総もくじ 3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
総もくじ 3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
総もくじ 3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
総もくじ  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 イラストリスト付きテンプレート 特定のカテゴリの目次で画像を一覧させる
ランキングに参加中
click 素材専門検索サイトsozai-R にほんブログ村 ブログブログ ブログテンプレートへ 0574 Web Site RankingWebサイト作成支援系nnr.gif
   

~ Comment ~

カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
お返事はどう致しますか?投稿なさる前に  コチラ をご確認ください
管理者のみ表示。 | 非公開コメント投稿可能です。

~ Trackback ~

トラックバックURL


この記事にトラックバックする(FC2ブログユーザー)

  ↑記事冒頭へ  
←ユーザータグ「Character」を設定して登場人物紹介ページにする    →イラストリスト付きテンプレート 複数のカテゴリの目次で画像を一覧させる

名前変換フォーム

Script by
ブログで夢小説!ユメミル?