解決済
トップページのカテゴリ欄内の各カテゴリに、それに属する記事の一覧を表示させたい
つい先日、ライブドアにブログを開設した者です。こちらの過去の質問を参考にさせていただきながら、なんとかカスタマイズしてきました。
が、ひとつだけ、どうしても解決できなかったことがあります。
PC初心者のため、専門用語が分からず、いまいち分かりにくい質問内容になることをお許し下さい。
各カテゴリに属する記事は、いずれどんどん増えていき、あとで見返すときに記事を探しにくくなると思います。
そこで、ひと目で分かる目次のようなものを作りたいと思っています。
希望としては、トップページにあるカテゴリ欄内に表示されている各カテゴリをクリックしたら、そのカテゴリ内の記事の一覧が表示され、そこから各ページに飛べたら…と思っています。
過去の質問で探してみましたが、同じような質問はたくさんあったのですが、CSSの仕様が違うからでしょうか、いまいちよく理解できませんでした。
ちなみに、私は【ブログテンプレート.net】の【057 GREEN】を使用しております。
どうか、お力をお貸し下さい。よろしくお願いいたします。
回答(4)
4.
コメントで書かれた内容で、
<div class="entry_body">から
<ul class="entry_info">の前の
</div>までを削除すれば、記事の内容部分が削除できると思います。
コメント数とかカテゴリとかの表示も要らなければ、
<ul class="entry_info">～</ul>
の部分も削除（あるいは、その中身を一部削除）
すればいいと思います。
できました！
私ひとりの力では、ここまでたどり着くことはできませんでした。
感謝しております、本当にありがとうございました。
1.
2.
あと更に細かく分けたいのなら、タグを使うことです。プラグインでタグクラウドを入れておきます。(この質問のサイドにある注目のタグのようなものです)
それから各記事に共通の話題のタグを付け加えます。
例えばこの質問だとトップ > ライブドア > livedoorブログ のカテゴリーですが「カテゴリー」というタグを作って入れるようなことを習慣にしておけば、あとで質問でカテゴリーに関する記事を見つけやすくなるわけです。ブログ記事でも同じようにタグを使ってカテゴリーわけをしておいてタグクラウドからタグを探しそのタグキーワードが付けられてる記事の一覧を見ることができるようになればかなり厳密なカテゴライズができると思います。
まあ、自分がどういうタグを付けているのか記事を書く時に確認しないといけなくし、ちょっとでも違う名前にすると意味ない(「カテゴリ」タグは「カテゴリー」タグの記事を拾わない)ので使いづらいかもしれませんが。
お世話になりました。本当にありがとうございました。
3.
ライブドアの新しいデザインだと個別記事の下に同じカテゴリの記事を好みの数だけ並べられ、そのソースをみて各記事のアドレスを拾ってくれば楽なのですが。
そちらのデザインだとどうなっているのかわからないので一つずつ記事のアドレスを拾う方法です。
まず新しく「音楽カテゴリの目次」とかタイトルの記事を作ります。
日付はずっと先の未来にするといつも記事のトップに来ます。
カテゴリは「音楽」
ここに各個別記事にリンクするよう今までの記事を並べます。
<a href=" 記事のアドレス”> モーツァルト</a>
<a href=" 記事のアドレス”>バッハ</a>など
これでカテゴリをクリックするとトップに目次が来ます。
素人の考えなのでもっといい方法があると思います。
プラグインのカテゴリをツリー化して折り畳むとか。私はできませんが。w
お世話になりました。本当にありがとうございました。
コメント(19)
BLUEPIXY 様
早々の御回答、どうもありがとうございます。
私の質問の仕方が少し足りなかったようです…
すでに、カテゴリのプラグインは設定しております。
現在、このプラグインをクリックすると、そのカテゴリに属する記事が全て表示されますが、そうではなく、そのカテゴリに属する記事全てのタイトルのみをずらっと目次のようにならべたものを表示させ、なおかつその各タイトルをクリックすることによって、はじめてその記事が読めるようにしたいのです。
よろしくお願いいたします。
プーニンがちょとっこ戻ってきましたが何か 様
御回答、どうもありがとうございます。
丁寧に説明していただき感激しているのですが、少し私の意図していたものとは違っておりました。申し訳ございません。
現在、既に設定しているカテゴリプラグインをクリックすると、そのカテゴリに属する記事が全て表示されますが、そうではなく、そのカテゴリに属する記事全てのタイトルのみをずらっと目次のようにならべたものを表示させ、なおかつその各タイトルをクリックすることによって、はじめてその記事が読めるようにしたいのです。
よろしくお願いいたします。
＞＃１
ああなるほど、トンチンカンな回答で申し訳無いです。
記事の表示をタイトルだけにするのは今までの質問にもありました。
ＣＳＳで要らない部分を非表示にすることもできると思いますが、デザインのカスタマイズからカテゴリーアーカイブのテンプレートを修正してタイトルにリンクを付けて他の部分を削ればいいです。
いんこ 様
分かりやすく丁寧な御回答、どうもありがとうございます。
なるほど、そのような方法もあるのですね。
しかしながら、そうしますと、常にトップページに目次が表示されている状態になるのでしょうか。
欲を言えば、トップページには、今までどおりカテゴリに関わらず最新記事を表示させていたいと思っております。
PC初心者のため、ほとんど無知な状態なので、表現方法がよく分からず、このような形の質問になってしまったのですが、恐らく、いんこ様のおっしゃるとおり、【プラグインのカテゴリをツリー化して折り畳む】ことを私はしたいのだと思います。
もし、他に方法が無ければ、手間は惜しまない性格なので、いんこ様の方法で挑戦してみたいと思います。
大変参考になりました。どうもありがとうございました。
BLUEPIXY 様
コメントありがとうございます。
こちらこそ、申し訳ございませんでした。
その修正は、具体的にどのようにすればよいのでしょうか？
もしよろしければ、カテゴリーアーカイブのテンプレートを添付しますので、お時間のあるときにでもアドバイスいただけないでしょうか。
大変お手間をおかけいたしますが、どうぞよろしくお願いいたします。
BLUEPIXY 様 【1】
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona...;
<html xmlns="http://www.w3.org/1999/xhtml"; id="ldblog-standard">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<link rel="stylesheet" href="<$CSSUrl$>" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$RSSUrl$>" />
<link rel="alternate" type="application/atom+xml" title="Atom" href="<$AtomUrl$>" />
<link rel="alternate" media="handheld" type="application/xhtml+xml" href="<$BlogMobileUrl$>" />
<IfFoafUrl><link rel="meta" type="application/rdf+xml" title="FOAF" href="<$FoafUrl$>" /></IfFoafUrl>
<title><$BlogTitle ESCAPE$>
BLUEPIXY様 【2】
- livedoor Blog（ブログ）</title>
</head>
<body class="three_column_default">
<div id="container" >
<!--▼ヘッダー▼-->
<div id="header">
<h1><a href="<$BlogUrl$>"><$BlogTitle ESCAPE$></a></h1>
<p><$BlogDescription$></p>
</div>
<!--▲ヘッダー▲-->
<div id="main">
<!--▼サイドナビ▼-->
<div id="side_navi-A">
<div class="sidebox">
<$PluginList_A$>
BLUEPIXY 様 【3】
<ul style="margin-top: 20px; font-size: 11px;">
<li style="margin: 0 10px 5px 10px; padding: 0; line-height: 1.3; background: none;"><a href="http://www.blog-text.jp/"; target="_blank"><img src="http://www.blog-text.jp/img/template/banner01.gif&...; alt="ブログテンプレート.net" style="margin: 0; display: inline; border: none;" /></a><br />Template by <a href="http://www.blog-text.jp"/; target="_blank">ブログテンプレート無料配布！</a></li>
<li style="margin: 0 10px 5px; padding: 0; line-height: 1.3; background: none;"><a href="http://ten-navi.com/"; target="_blank">転職は人材紹介のクイック</a></li>
BLUEPIXY 様 【4】
<li style="margin: 0 10px 5px; padding: 0; line-height: 1.3; background: none;"><a href="http://html-coding.co.jp/"; target="_blank">HTMLコーディング</a></li>
<li style="margin: 0 10px 5px; padding: 0; line-height: 1.3; background: none;"><a href="http://www.platinum-placenta.com/"; target="_blank">美容と美肌のプラセンタ</a></li>
<li style="margin: 0 10px 5px; padding: 0; line-height: 1.3; background: none;"><a href="http://www.apple-net.jp/"; target="_blank">仙台、宮城の家庭教師</a></li>
<li style="margin: 0 10px 5px; padding: 0; line-height: 1.3; background: none;"><a href="http://kango.919.co.jp/"; target="_blank">看護師の求人（看護roo!）</a></li>
</ul>
BLUEPIXY 様 【5】
</div>
</div>
<!--▲サイドナビ▲-->
<!--▼コンテンツ▼-->
<div id="liquid">
<div id="conts">
<CategorizedArticlesLoop>
<div class="entry_box">
<$TrackBackAutoDiscovery$>
<h2 class="entry_title"><a href="<$ArticlePermalink$>"><$ArticleTitle ESCAPE$></a><IfArticleRating><$ArticleRatingIcon$></IfArticleRating></h2>
<ul class="entry_data">
<li><span></span> </li>
<li> <$ArticleDate$></li>
</ul>
BLUEPIXY 様 【6】
<div class="entry_body">
<p><$ArticleBody$></p>
<IfArticleBodyMore>
<p class="more"><a href="<$ArticlePermalink$>">続きを読む</a></p>
</IfArticleBodyMore>
<IfHasArticleTags>
<ul class="tags_info">
<li><h3>タグ:</h3></li>
<ArticleTagsLoop><li><a href="<$ArticleTagAggregateUrl$>" rel="tag"><$ArticleTag ESCAPE$></a></li></ArticleTagsLoop>
</ul>
</IfHasArticleTags>
</div>
<ul class="entry_info">
<li></li>
<li><IfArticleCategory1>│ <a href="<$ArticleCategory1Url$>"><$ArticleCategory1$></a> </IfArticleCategory1><IfArticleCategory2>| <a href="<$ArticleCategory2Url$>"><$ArticleCategory2$></a></IfArticleCategory2></li>
BLUEPIXY 様 【7】
<li><IfArticleAllowComment>│ <a href="<$ArticlePermalink$>#comments">Comments(<$ArticleCommentCount$>)</a></li></IfArticleAllowComment>
<li><IfArticleAllowPing>│ <a href="<$ArticlePermalink$>#trackback">TrackBack(<$ArticlePingCount$>)</a></li></IfArticleAllowPing>
<li> |<a href="http://clip.livedoor.com/redirect?link=<$Articl... URIESCAPE$>%20-%20<$ArticleTitle URIESCAPE$>&ie=euc" class="ldclip-redirect" title="この記事をクリップ！"> clip!</a></li>
</ul>
</div>
</CategorizedArticlesLoop>
<ul class="entry_navi">
<li><IfPrevPage><a href="<$CurrentUrl$>?p=<$PrevPage$>"><font color="#00ff00"> <<前のページへ</font></a>│</IfPrevPage></li>
BLUEPIXY 様 【8】
<li><a href="#container">ページトップに戻る▲</a>│</li>
<li><IfNextPage><a href="<$CurrentUrl$>?p=<$NextPage$>"><font color="#00ff00">次のページへ>></font> </a></IfNextPage></li>
</ul>
</div>
</div>
<!--▲コンテンツ▲-->
<!--▼サイドナビ▼-->
<div id="side_navi-B">
<div class="sidebox">
<$PluginList_B$>
<div id="elsebody">
<ul>
<li><a href="<$AddCheckers$>"><img src="http://parts.blog.livedoor.jp/img/cmn/icon_cks.gif...; border="0" alt="チェッカーズに登録" title="チェッカーズに登録" /></a></li>
<li><a href="http://reader.livedoor.com/subscribe/<$BlogUrl$...; target="_blank" title="livedoor Readerに登録"><img src="http://parts.blog.livedoor.jp/img/cmn/icon_lr.gif&...; border="0" width="117" height="20"
BLUEPIXY 様 【9】
alt="livedoor Readerに登録" title="livedoor Readerに登録" /></a></li>
<li><a href="<$LDBlogUrl$>"><img src="<$LDBlogLogo$>" width="117" height="28" border="0" alt="livedoor Blog（ブログ）" title="livedoor Blog（ブログ）" /></a></li>
<li><a href="http://www.livedoor.com/"><img src="http://parts.blog.livedoor.jp/img/cmn/icon_ld.gif&...; border="0" alt="livedoor （ライブドア）" title="livedoor （ライブドア）" /></a></li>
<li><a href="<$RSSUrl$>"><img src="http://parts.blog.livedoor.jp/img/cmn/icon_xml.gif...; border="0" alt="Syndicate this site" title="Syndicate this site" /></a>
</li>
</ul>
</div>
</div>
</div>
<br clear="all" />
<!--▲サイドナビ▲-->
</div>
<div id="footer">
<ul>
BLUEPIXY 様 【10】 ※これで終わりです。
<li>Copyright © <$BlogTitle ESCAPE$>. All rights reserved.</li>
</ul>
</div>
</div>
</body>
</html>
>>#7 pukumamaさん
私の回答はお忘れください。なんしろ朝おもいついてちょこっと作ってみただけなので、トップ記事の最初に目次がでてしまうのはいけませんね。新しく記事を書くたびにかきこまなければいけないし。
http://blog.livedoor.jp/ininko/（←こうなってしまいます）
>>#5 のBLUEPIXYさんのいわれるようにタイトルにリンクをつけたものを残せばいいのですね。
そのカテゴリをクリックするとリンク付き各記事タイトルと文頭の文章が少し見られるブログも見たことがあります。
>>＃19 いんこ様
コメントありがとうございます。
もしかして、今朝わざわざ方法を考えてくださったのですか…？
だとしたら、何とお礼を申し上げたらよいか…
本当に、本当にありがとうございます。
私も、過去の質問から解決策を探しているうちに、そのようなブログを見たことがあります。
実際にできているので、何としても私のブログでも実現させたいです。
頑張りたいと思います。ありがとうございました。
>>#4
なるほど。前に誰かの質問でwiki風に記事のないTOPや月間カテゴリーアーカイブにしたいっていうことで、作ったブログテンプレですが、こういうことですか？
TOPや月間アーカイブはともかくこういうことですか？
http://blog.livedoor.com/shared_design/detail/756
