坊譚

妖怪イラスト&漫画ブログ

妖怪図鑑:目次

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

押してもらえると励みになります→ 拍手する



( --/--/-- --:-- ) Category スポンサー広告 | TB(-) | コメント(-)| top↑

ブログで漫画用目次を作る

たまにブログをカスタマイズしたくなるのですが最近4コマ漫画目次を少々改造しました。
いたおさんの運営するFC2ブログのテンプレート工房の記事を参考にしています。感謝!


この記事のおかげで自分好みの漫画用目次を自動で作れるようになりました。

私は漫画用にスクリプトの中の<ul>を<ol>に変えて番号が出るようにしたり 『target="_blank"』を足して別ウィンドが開くようにしています。

FC2ブログでしか使えませんが私と同じようなものでよろしければどうぞ参考にしてください。

でも上記の記事を一通り読んでから使ったほうがいいです。私自身はHTMLしか分からないので勘で変更しています。あくまでバックアップを取ってから自己責任で。

【やり方を見る】

アーカイブページを目次に変更します。

テンプレのHTMLの中にある<!--▼サイトマップ▼-->で囲っている部分を差し替え。

赤字のカテゴリーは自分で設定してください。

 

<!--▼サイトマップ▼-->
<!--titlelist_area-->
<div class="menu_outline3">
<div class="menu_title3"><a name="mapnavi_title">■投稿順目次■</a></div>
<div class="menu_cont3">
<div id="maplist">

<!--titlelist-->
<ol type="1">
<li>
<span><%titlelist_category></span>
<a href="<%titlelist_url>"  _fcksavedurl=""<%titlelist_url>" " target="_blank"><%titlelist_title></a>
</li></ol>
<!--/titlelist-->

</div><!--/maplist-->
</div><!--/menu_cont3-->
</div><!--/menu_outline3-->
<script type="text/javascript"><!--
var A=document.getElementById('maplist').getElementsByTagName('A');
var S=document.getElementById('maplist').getElementsByTagName('span');
var C=new Array(); var I=""; var Flg=false;

/*--- カテゴリ名を記述 ---*/
C[0]="カテゴリー1";
C[1]="カテゴリー2";
C[2]="カテゴリー3";
/*------------------------*/

I+='<p><b>■ カテゴリ一覧 ■</b></p>'
I+='<ul class="navi">'
for (i=0;i<C.length;i++) { I+='<li><a href="#'+i+'">'+C[i]+'</a></li>' }
I+='</ul>'

for (i=0;i<C.length;i++) {
Flg=false;
I=I+'<a name="'+i+'" id="'+i+'"></a><br />';
I=I+'<p><b>【 '+C[i]+' 】</b>';
if (i!=C.length-1) {I=I+' <a href ="#'+(i+1)+'" title="次のカテゴリへ進む">▽</a>';}
if (i!=0) {I=I+' <a href ="#'+(i-1)+'" title="前のカテゴリへ戻る">△</a>';}
I=I+' <a href ="#mapnavi_title" title="カテゴリ一覧へ戻る">▲</a>';
I=I+'</p><ol>';

for (j=S.length-1;j>=0;j--) {
if (C[i]==S[j].innerHTML) {
if (Flg==true) {
I+='<li><a href="'+A[k].href+'" target="_blank">'+A[k].innerHTML+'</a></li>';}
k=j;Flg=true;}}
I+='<li class="end"><a href="'+A[k].href+'" target="_blank">'+A[k].innerHTML+'</a></li>';
I+='</ol>';}
document.getElementById('maplist').innerHTML=I;
--></script>
<!--/titlelist_area-->
<!--▲サイトマップ▲-->

CSSはこんな感じで設定しています

でもこの辺は好みの問題なので自分のブログに合わせてかえて下さい。

/************* ▲ サイトマップ調整 ▲ *************/
/* サイトマップ調整 */
div.menu_outline3 {
text-align:left;                     /* 左寄せ */
margin-bottom:5px;             /* 次のコメントまでの間隔 */
margin-left:10%;
}
div.menu_title3{
font-weight:bold;                    /* 太字 (タイトル) */
}
div.menu_outline3 span{
font-weight:bold;                    /* 太字 (タイトル) */
}

 

押してもらえると励みになります→ 拍手する



( 2009/03/25 21:51 ) Category カスタマイズ | TB(0) | CM(0) | top↑
ご意見・ご感想などご自由にどうぞ
  • URL
  • コメント
  • パスワード
  • 秘密
  • 管理者にだけ表示を許可する

この記事のトラックバックURL
http://youkaiblog.blog75.fc2.com/tb.php/112-15f6f68f


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。