FC2ブログ

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

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

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

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

カスタマイズの難易度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>に変更して
更新 】 をクリック
関連記事
スポンサーサイト



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

~ Comment ~

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














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

~ Trackback ~


Back      Next