2006年02月17日
カテゴリページに目次を付ける
ブログを始めてから１年経ちましたが、なかなか快適な感じで日々書いております。
何と言ってもＨＰの日記と違ってカテゴリ別に項目が分類されるのがいいんですよね。
まあ、自分でやればＨＰでもやれない事はないですが面倒ですからねぇ。
そこら辺を自動的にやってくれるのは実に良いです。
で、「どうせなら以前ＨＰで書いていた日記も移そうかな」と思い、ちょこちょこブログに移しつつ、色々とブログの過去記事なども見ていたのですが、そこで少し気になる事が。
カテゴリ別のページって、どういう記事が載っているのかパッと分からないんですよ。
作品ごとのアニメの感想みたいに分かりやすい場合はいいのですが、そうではないとどういった事を書いているのかいちいちスクロールさせないと分からないのですな。
特に私は一括表示のくせに長い文章を書いているので、こういった時はホント不便です。
自分がやってても面倒なんですから、他の人が見る場合はさらに面倒でしょう。
これは改善するべきだろうと、目次みたいなものを作れないかと思いました。
でも調べてみてもなかなか説明してくれてるサイトが見つからないんですよね。
「駄目かなぁ」と思いつつ、ブログ改造では毎度お馴染みブログをとことん調べます。さんのところでチェックすると、「カテゴリページをインデックス化する方法」というのを発見。
これは一見良さそうだったんですが、記事全体が消えてしまうので駄目でした。
でも「ここに書かれてあるＨＴＭＬを貼り付けたらどうなるんだろう？」と試しにやってみたところ、これがビンゴ。
上手くいったのですな。
さらに日付が無いのは物足りないので日付部分を前にくっつけて完成。
そうして出来上がったのが、現在トップや他のページにある「タイトル一覧」です。
これがあればパッと見てどういった内容の記事を書いているのか分かりますからねぇ。
良い感じですわ。
まあ、トップページの場合はサイドバーに「最新記事」ってのがあるからいらない様にも思えますけど、あれって視認性が低いのであまり利用されない感じがするんですよね。
やはり目に付く所にある方が良いと思うのですな。
ま、そんな感じで何とか目次付けをする事ができました。
取り合えず自分が忘れた時用と、同じ様にしたい人のために説明を書いておきますです。
参考にして下さいまし。
やり方は簡単。
以下の部分をコピーして、
＜font size=2>【タイトル一覧】
＜font size=1>
＜ul>
＜CategorizedArticlesLoop>
＜$TrackBackAutoDiscovery$>
＜li>＜$ArticleDate$> ＜a href="＜$ArticlePermalink$>">＜$ArticleTitle ESCAPE$>＜/a>＜/li>
＜/CategorizedArticlesLoop>
＜/ul>
「カスタマイズ」の「カテゴリ」等のＨＴＭＬの、
＜div id="blogcontainer">
＜div id="wrapper">
＜div id="content">
＜div id="blog">
＜h2 id="categorytitle">＜$CategoryName ESCAPE$>
−−−ここの部分に入れましょう−−−
＜CategorizedArticlesLoop>
＜$TrackBackAutoDiscovery$>
＜div class="datetop">＜/div>
（注：「＜」は小文字にして下さい）
月別の場合は「CategorizedArticlesLoop」の代わりに「MonthlyArticlesLoop」を、トップページの場合は「IndexArticlesLoop」をそれぞれ入れます。
そうすると日付とタイトルの一覧表が表示されますです。
これで上手くいったらお慰み。
上手くいかなかったら自分で色々思考錯誤して下さい。
細かい部分の違いとかあるでしょうしね。
うむ、だんだんと理想のブログに近づいておりますな。
あとは過去記事の編集がもっと楽になるといいんですけどねぇ。
カテゴリを変える時とか凄く面倒なんで。
【追記】
「本文を表示させず、インデックスだけにしたい場合はどうすればいいのか？」という質問をいただいたので、その方法についても書いておきます。
やり方は簡単、目次を示す部分と＜!-- plugin A -->の間にあるのを
＜div class="fullbody">
＜/div>
＜/div>
＜/div>
のみにするだけです。
位置を分かりやすく書くと、
＜font size=2>【タイトル一覧】
＜font size=1>
＜ul>
＜CategorizedArticlesLoop>
＜$TrackBackAutoDiscovery$>
＜li>＜$ArticleDate$> ＜a href="＜$ArticlePermalink$>">＜$ArticleTitle ESCAPE$>＜/a>＜/li>
＜/CategorizedArticlesLoop>
＜/ul>
−−−−ここから下−−
＜div class="fullbody">
＜/div>
＜/div>
＜/div>
−−−−ここより上−−−−
＜!-- plugin A -->
＜div id="left">
＜div id="lefttop">＜/div>
といった感じですか。
ここら辺の微調整は、＜div>から＜/div>の様に、始まりと閉じる部分に気をつけるのがポイントですね。
閉じる指示を消してしまうと変な風になる事が多いですので。
何と言ってもＨＰの日記と違ってカテゴリ別に項目が分類されるのがいいんですよね。
まあ、自分でやればＨＰでもやれない事はないですが面倒ですからねぇ。
そこら辺を自動的にやってくれるのは実に良いです。
で、「どうせなら以前ＨＰで書いていた日記も移そうかな」と思い、ちょこちょこブログに移しつつ、色々とブログの過去記事なども見ていたのですが、そこで少し気になる事が。
カテゴリ別のページって、どういう記事が載っているのかパッと分からないんですよ。
作品ごとのアニメの感想みたいに分かりやすい場合はいいのですが、そうではないとどういった事を書いているのかいちいちスクロールさせないと分からないのですな。
特に私は一括表示のくせに長い文章を書いているので、こういった時はホント不便です。
自分がやってても面倒なんですから、他の人が見る場合はさらに面倒でしょう。
これは改善するべきだろうと、目次みたいなものを作れないかと思いました。
でも調べてみてもなかなか説明してくれてるサイトが見つからないんですよね。
「駄目かなぁ」と思いつつ、ブログ改造では毎度お馴染みブログをとことん調べます。さんのところでチェックすると、「カテゴリページをインデックス化する方法」というのを発見。
これは一見良さそうだったんですが、記事全体が消えてしまうので駄目でした。
でも「ここに書かれてあるＨＴＭＬを貼り付けたらどうなるんだろう？」と試しにやってみたところ、これがビンゴ。
上手くいったのですな。
さらに日付が無いのは物足りないので日付部分を前にくっつけて完成。
そうして出来上がったのが、現在トップや他のページにある「タイトル一覧」です。
これがあればパッと見てどういった内容の記事を書いているのか分かりますからねぇ。
良い感じですわ。
まあ、トップページの場合はサイドバーに「最新記事」ってのがあるからいらない様にも思えますけど、あれって視認性が低いのであまり利用されない感じがするんですよね。
やはり目に付く所にある方が良いと思うのですな。
ま、そんな感じで何とか目次付けをする事ができました。
取り合えず自分が忘れた時用と、同じ様にしたい人のために説明を書いておきますです。
参考にして下さいまし。
やり方は簡単。
以下の部分をコピーして、
＜font size=2>【タイトル一覧】
＜font size=1>
＜ul>
＜CategorizedArticlesLoop>
＜$TrackBackAutoDiscovery$>
＜li>＜$ArticleDate$> ＜a href="＜$ArticlePermalink$>">＜$ArticleTitle ESCAPE$>＜/a>＜/li>
＜/CategorizedArticlesLoop>
＜/ul>
「カスタマイズ」の「カテゴリ」等のＨＴＭＬの、
＜div id="blogcontainer">
＜div id="wrapper">
＜div id="content">
＜div id="blog">
＜h2 id="categorytitle">＜$CategoryName ESCAPE$>
−−−ここの部分に入れましょう−−−
＜CategorizedArticlesLoop>
＜$TrackBackAutoDiscovery$>
＜div class="datetop">＜/div>
（注：「＜」は小文字にして下さい）
月別の場合は「CategorizedArticlesLoop」の代わりに「MonthlyArticlesLoop」を、トップページの場合は「IndexArticlesLoop」をそれぞれ入れます。
そうすると日付とタイトルの一覧表が表示されますです。
これで上手くいったらお慰み。
上手くいかなかったら自分で色々思考錯誤して下さい。
細かい部分の違いとかあるでしょうしね。
うむ、だんだんと理想のブログに近づいておりますな。
あとは過去記事の編集がもっと楽になるといいんですけどねぇ。
カテゴリを変える時とか凄く面倒なんで。
【追記】
「本文を表示させず、インデックスだけにしたい場合はどうすればいいのか？」という質問をいただいたので、その方法についても書いておきます。
やり方は簡単、目次を示す部分と＜!-- plugin A -->の間にあるのを
＜div class="fullbody">
＜/div>
＜/div>
＜/div>
のみにするだけです。
位置を分かりやすく書くと、
＜font size=2>【タイトル一覧】
＜font size=1>
＜ul>
＜CategorizedArticlesLoop>
＜$TrackBackAutoDiscovery$>
＜li>＜$ArticleDate$> ＜a href="＜$ArticlePermalink$>">＜$ArticleTitle ESCAPE$>＜/a>＜/li>
＜/CategorizedArticlesLoop>
＜/ul>
−−−−ここから下−−
＜div class="fullbody">
＜/div>
＜/div>
＜/div>
−−−−ここより上−−−−
＜!-- plugin A -->
＜div id="left">
＜div id="lefttop">＜/div>
といった感じですか。
ここら辺の微調整は、＜div>から＜/div>の様に、始まりと閉じる部分に気をつけるのがポイントですね。
閉じる指示を消してしまうと変な風になる事が多いですので。
- ブログネタ：
- オタク･腐女子の一日 に参加中！
トラックバックURL
この記事へのコメント
1. Posted by YUKA 2006年03月14日 06:31
こんにちわ突然すみません。
質問があるのですがいいですか？
その方法とてもいいと思うんですがそれだとそのカテゴリーのページに本文すべて表示されてしまいますよね。
量が多いとそれだけ重くなってしまうのでできたらタイトルだけインデックスページとして表示させるようにしたいときはどうすればいいんでしょうか？
<$ArticleBody$>だけを消してみたんですが、本文だけが消えるだけでデザインもタイトルも日付とかも全部残ってて、つまり言ってみれば本文だけが消えて真ん中がポッカリ空いた状態になりました。
全部すっきりしたいと思い大胆にもそのへんのタグをまとめて消してみたら今度はサイドバーがおかしなことになりました。
サイドバーも動かさず、このページをインデックスだけのページにするにはどうすればよいかわかりますか？？
質問があるのですがいいですか？
その方法とてもいいと思うんですがそれだとそのカテゴリーのページに本文すべて表示されてしまいますよね。
量が多いとそれだけ重くなってしまうのでできたらタイトルだけインデックスページとして表示させるようにしたいときはどうすればいいんでしょうか？
<$ArticleBody$>だけを消してみたんですが、本文だけが消えるだけでデザインもタイトルも日付とかも全部残ってて、つまり言ってみれば本文だけが消えて真ん中がポッカリ空いた状態になりました。
全部すっきりしたいと思い大胆にもそのへんのタグをまとめて消してみたら今度はサイドバーがおかしなことになりました。
サイドバーも動かさず、このページをインデックスだけのページにするにはどうすればよいかわかりますか？？
2. Posted by シバッチ 2006年03月14日 11:53
ＹＵＫＡさん、どうもです〜〜。
「追記」として書いておきましたのでご参考にして下さいまし。
こういうのを探る時は、少しずつ「消す → どうなるのか見る」を繰り返すと分かりやすいですよ。
ちょっと面倒ですけどね（笑）
「追記」として書いておきましたのでご参考にして下さいまし。
こういうのを探る時は、少しずつ「消す → どうなるのか見る」を繰り返すと分かりやすいですよ。
ちょっと面倒ですけどね（笑）
3. Posted by ＹＵＫＡ 2006年03月15日 01:58
できました！！！
ありがとうございます〜〜感謝です。
全然わかりませんでした。
これを参考に、いろいろ自分でもがんばります。
それでは！
ありがとうございます〜〜感謝です。
全然わかりませんでした。
これを参考に、いろいろ自分でもがんばります。
それでは！
4. Posted by シバッチ 2006年03月15日 15:47
良かったですね〜〜。
これからも色々カスタマイズを頑張って下さい。
これからも色々カスタマイズを頑張って下さい。
この記事にコメントする
簡単な事でも嫌なのです。お願いします。
アニメで描かれていないことは知りたくないのです。
