カテゴリー名の表示の仕方

いつもお世話になります。
前も同じ質問をした、又はどたなかがしていたような気がするのですが、見つけられないので、再度ご教授下さい。

http://cmonos.jp/samples/sample1/guides/

上記サンプルでいうところの、「ルートガイド」の下のカテゴリー名（「京都八幡木津自転車道」や「山背古道～京都～北白川」等）が、表示されません。

現在は、書籍というフォルダを作って、カテゴリー編集からカテゴリーも４つ作成し終わっていて、それぞれに記事も載せている状態です。
記事（画像も含め）は正しく表示されるのですが、カテゴリー名を表示させるにはどうしたらいいでしょうか。

toto
Windows 7/InternetExplorer11.0
2014年11月6日(木) 12時35分49秒

Re:カテゴリー名の表示の仕方

ご質問ありがとうございます。

インデックスにカテゴリー名が表示されない、ということでしょうか？

ルートガイドのテンプレートは次のようになっています。

<!--index-->
<!--subindex-->
<!--head--><div class="section liquid grid">
<!--title--><!--head--><h2><!--/head-->
<!--foot--></h2><!--/foot--><!--/title-->
<div class="body"><ul class="index"><!--/head-->
<!--article-->
<!--head--><li><!--/head-->
<!--icon--><!--head--><div class="icon"><!--/head-->
<!--foot--></div><!--/foot--><!--/icon-->
<!--title--><!--head--><div class="title"><!--/head-->
<!--foot--></div><!--/foot--><!--/title-->
<!--description--><!--head--><div class="description">
<!--/head--><!--foot--></div><!--/foot--><!--/description-->
<!--subtitlelist--><!--head--><ul><!--/head-->
<!--subtitle--><!--head--><li><!--/head--><!--foot--></li>
<!--/foot--><!--/subtitle-->
<!--foot--></ul><!--/foot--><!--/subtitlelist-->
<!--foot--></li><!--/foot-->
<!--/article-->
<!--foot--></ul>
</div>
</div><!--/foot-->
<!--/subindex-->
<!--/index-->

の中にある  タグがカテゴリータイトルに変換されます。ページテンプレートの適切な位置に  タグを追加すると、カテゴリー名が表示されるようになるのではないかと思います。

以上参考になりましたら幸いです。

CMONOS スタッフ
MacOS X/Safari7.1
2014年11月6日(木) 12時48分41秒

Re:カテゴリー名の表示の仕方

追伸です。

　作成したページをみてみたら、そもそも別のカテゴリーに作成したページが、同じ列に並んでしまっていました。記事自体もカテゴリー別に表示できていないようです。

　書籍
　〈初心者向け〉
　Ａ本・Ｂ本・Ｃ本

　〈中級車向け〉
　Ｄ本

　のようにしたいのですが、現状は

　書籍
　Ａ本・Ｄ本・Ｂ本・Ｃ本

　のようになってしまっています。

　日付管理の「画像ブログ用設定」を使っています。

toto
Windows 7/InternetExplorer11.0
2014年11月6日(木) 12時50分51秒

Re[2]:カテゴリー名の表示の仕方

「画像ブログ用設定」では、カテゴリー別に表示するのではなく、新着順に表示するテンプレートになっているようです。

下記がルートガイドの「総合インデックス」で使用しているページテンプレートです。こちらをコピーしてお使いのホームページメーカーの「総合インデックス／ページレイアウト」にペーストすると、ルートガイドと同様の表示になると思います。

<!--topicpath type="list" id="topicpath"--><!--/topicpath-->
<!--gmap--><!--head--><div id="gallery"><!--/head--><!--foot--></div><!--/foot--><!--/gmap-->
<div id="content" class="single">
<div id="main">
<ul id="top-nav" class="nav">
<li><!--link image="topButton" location="../" title="ホーム"--><!--/link--></li>
</ul>
<!--title--><!--head--><h1><!--/head--><!--foot--></h1><!--/foot--><!--/title-->
<!--index-->
<!--subindex-->
<!--head--><div class="section liquid grid">
<!--title--><!--head--><h2><!--/head--><!--foot--></h2><!--/foot--><!--/title-->
<div class="body"><ul class="index"><!--/head-->
<!--article-->
<!--head--><li><!--/head-->
<!--icon--><!--head--><div class="icon"><!--/head--><!--foot--></div><!--/foot--><!--/icon-->
<!--title--><!--head--><div class="title"><!--/head--><!--foot--></div><!--/foot--><!--/title-->
<!--description--><!--head--><div class="description"><!--/head--><!--foot--></div><!--/foot--><!--/description-->
<!--subtitlelist--><!--head--><ul><!--/head-->
<!--subtitle--><!--head--><li><!--/head--><!--foot--></li>
<!--/foot--><!--/subtitle-->
<!--foot--></ul><!--/foot--><!--/subtitlelist-->
<!--foot--></li><!--/foot-->
<!--/article-->
<!--foot--></ul>
</div>
</div><!--/foot-->
<!--/subindex-->
<!--/index-->
<ul id="bottom-nav" class="nav">
<li><!--link image="topButton" location="../" title="ホーム"--><!--/link--></li>
</ul>
</div>
<div id="aside">
<h1>関連情報</h1>
<div class="section" id="about">
<h2>About.</h2>
<!--rss title="RSS"--><!--head--><p class="rss" title="新着情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/rss-->
<div class="body">
<!--icon--><!--head--><p class="icon"><!--/head--><!--foot--></p><!--/foot--><!--/icon-->
<!--description--><!--head--><p class="description"><!--/head--><!--foot--></p><!--/foot--><!--/description-->
</div>
</div>
<div class="section" id="categories">
<h2>Guides.</h2>
<div class="body">
<ul>
<!--categories-->
<!--category-->
<li><!--title--><!--/title--></li>
<!--/category-->
<!--/categories-->
</ul>
</div>
</div>
<div class="section recent feedback" id="recent-comments">
<h2>Recent Comments.</h2>
<!--commentrss title="RSS"--><!--head--><p class="rss" title="新着コメント情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/commentrss-->
<div class="body">
<!--recentcomments--><!--/recentcomments-->
</div>
</div>
<div class="section recent feedback" id="recent-trackbacks">
<h2>Recent Trackbacks.</h2>
<!--trackbackrss title="RSS"--><!--head--><p class="rss" title="新着トラックバック情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/trackbackrss-->
<div class="body">
<!--recenttrackbacks--><!--/recenttrackbacks-->
</div>
</div>
</div>
<a href="#" class="end">このページのトップへ</a>
</div>

以上参考になりましたら幸いです。

CMONOS スタッフ
MacOS X/Safari7.1
2014年11月6日(木) 13時1分22秒

Re:カテゴリー名の表示の仕方

早速ありがとうございます。
教えて頂いた方法でカテゴリー分けがなされました。

ただ、それに伴い、以下の点を再度変更したいのですが、コピペしたページテンプレートからどこかを削除すればよいでしょうか。

①地図が表示されるようになってしまったため、削除したい。

②画像の下に、「記事タイトル」と「要約」が表示されるようになってしまったため、削除したい。

　再度の質問ですみません。
　よろしくお願い致します。

toto
Windows 7/InternetExplorer11.0
2014年11月6日(木) 13時15分17秒

Re[2]:カテゴリー名の表示の仕方

地図とタイトル・要約を省くと次のようになります。

<!--topicpath type="list" id="topicpath"--><!--/topicpath-->
<div id="content" class="single">
<div id="main">
<ul id="top-nav" class="nav">
<li><!--link image="topButton" location="../" title="ホーム"--><!--/link--></li>
</ul>
<!--title--><!--head--><h1><!--/head--><!--foot--></h1><!--/foot--><!--/title-->
<!--index-->
<!--subindex-->
<!--head--><div class="section liquid grid">
<!--title--><!--head--><h2><!--/head--><!--foot--></h2><!--/foot--><!--/title-->
<div class="body"><ul class="index"><!--/head-->
<!--article-->
<!--head--><li><!--/head-->
<!--icon--><!--head--><div class="icon"><!--/head--><!--foot--></div><!--/foot--><!--/icon-->
<!--subtitlelist--><!--head--><ul><!--/head-->
<!--subtitle--><!--head--><li><!--/head--><!--foot--></li>
<!--/foot--><!--/subtitle-->
<!--foot--></ul><!--/foot--><!--/subtitlelist-->
<!--foot--></li><!--/foot-->
<!--/article-->
<!--foot--></ul>
</div>
</div><!--/foot-->
<!--/subindex-->
<!--/index-->
<ul id="bottom-nav" class="nav">
<li><!--link image="topButton" location="../" title="ホーム"--><!--/link--></li>
</ul>
</div>
<div id="aside">
<h1>関連情報</h1>
<div class="section" id="about">
<h2>About.</h2>
<!--rss title="RSS"--><!--head--><p class="rss" title="新着情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/rss-->
<div class="body">
<!--icon--><!--head--><p class="icon"><!--/head--><!--foot--></p><!--/foot--><!--/icon-->
<!--description--><!--head--><p class="description"><!--/head--><!--foot--></p><!--/foot--><!--/description-->
</div>
</div>
<div class="section" id="categories">
<h2>Guides.</h2>
<div class="body">
<ul>
<!--categories-->
<!--category-->
<li><!--title--><!--/title--></li>
<!--/category-->
<!--/categories-->
</ul>
</div>
</div>
<div class="section recent feedback" id="recent-comments">
<h2>Recent Comments.</h2>
<!--commentrss title="RSS"--><!--head--><p class="rss" title="新着コメント情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/commentrss-->
<div class="body">
<!--recentcomments--><!--/recentcomments-->
</div>
</div>
<div class="section recent feedback" id="recent-trackbacks">
<h2>Recent Trackbacks.</h2>
<!--trackbackrss title="RSS"--><!--head--><p class="rss" title="新着トラックバック情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/trackbackrss-->
<div class="body">
<!--recenttrackbacks--><!--/recenttrackbacks-->
</div>
</div>
</div>
<a href="#" class="end">このページのトップへ</a>
</div>

各独自タグについては下記マニュアルをご覧下さい。

CMONOS.JP マニュアル:ホームページメーカー:総合インデックスページ

不必要なタグを削除すると、該当する項目が表示されなくなります。

以上参考になりましたら幸いです。

CMONOS スタッフ
MacOS X/Safari7.1
2014年11月6日(木) 13時30分57秒

Re:カテゴリー名の表示の仕方

早速ありがとうございます。

もう１点だけ困ったことがありまして、画像それぞれがとても離れた位置に掲載されてしまいます。タイトルと要約を削除すれば、くっつくかと思ったのですが、そうではないようです。

カテゴリー分けしていなかったときは、横に８個画像が並べたのですが、現在は、それぞれ画像と画像の間に空白が空いてしまって、横に４個ずつしか並びません。

頂いたマニュアルも参考にしてみたのですが、どのように変更すればいいのかわからず…。間隔を詰めることは可能でしょうか。

基本的なことで何度もほんと申し訳ないです。
お時間ある際にご教授下さい。

toto
Windows 7/InternetExplorer11.0
2014年11月6日(木) 13時44分44秒

Re[2]:カテゴリー名の表示の仕方

画像ブログのインデックスは少し特殊ですので、ルートガイド同様のテンプレートを適用すると、4列になると思います。

画像ブログでカテゴリー分けしたインデックスは下記のようなものになりそうです（未検証）。

<!--topicpath type="list" id="topicpath"--><!--/topicpath-->
<div id="content" class="single gallery">
<div id="main">
<ul id="top-nav" class="nav">
<li><!--link image="topButton" location="../" title="ホーム"--><!--/link--></li>
</ul>
<!--title--><!--head--><h1><!--/head--><!--foot--></h1><!--/foot--><!--/title-->
<!--index-->
<!--subindex-->
<!--head--><div class="section">
<!--title--><!--head--><h2><!--/head--><!--foot--></h2><!--/foot--><!--/title-->
<div class="body"><ul class="index"><!--/head-->
<!--article-->
<!--head--><li class="omitted"><!--/head-->
<!--icon--><!--head--><div class="icon"><!--/head--><!--foot--></div><!--/foot--><!--/icon-->
<div class="tips">
<div class="content">
<!--title--><!--head--><div class="title"><!--/head--><!--foot--></div><!--/foot--><!--/title-->
<!--description maxlength="64"--><!--head--><div class="description"><!--/head--><!--foot--></div><!--/foot--><!--/description-->
</div>
</div>
<!--foot--></li><!--/foot-->
<!--/article-->
<!--foot--></ul>
</div>
</div><!--/foot-->
<!--/subindex-->
<!--/index-->
<ul id="bottom-nav" class="nav">
<li><!--link image="topButton" location="../" title="ホーム"--><!--/link--></li>
</ul>
</div>
<div id="aside">
<h1>関連情報</h1>
<div class="section" id="about">
<h2>About.</h2>
<!--rss title="RSS"--><!--head--><p class="rss" title="新着情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/rss-->
<div class="body">
<!--icon--><!--head--><p class="icon"><!--/head--><!--foot--></p><!--/foot--><!--/icon-->
<!--description--><!--head--><p class="description"><!--/head--><!--foot--></p><!--/foot--><!--/description-->
</div>
</div>
<div class="section" id="categories">
<h2>Guides.</h2>
<div class="body">
<ul>
<!--categories-->
<!--category-->
<li><!--title--><!--/title--></li>
<!--/category-->
<!--/categories-->
</ul>
</div>
</div>
<div class="section recent feedback" id="recent-comments">
<h2>Recent Comments.</h2>
<!--commentrss title="RSS"--><!--head--><p class="rss" title="新着コメント情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/commentrss-->
<div class="body">
<!--recentcomments--><!--/recentcomments-->
</div>
</div>
<div class="section recent feedback" id="recent-trackbacks">
<h2>Recent Trackbacks.</h2>
<!--trackbackrss title="RSS"--><!--head--><p class="rss" title="新着トラックバック情報(RSS2.0)"><!--/head--><!--foot--></p><!--/foot--><!--/trackbackrss-->
<div class="body">
<!--recenttrackbacks--><!--/recenttrackbacks-->
</div>
</div>
</div>
<a href="#" class="end">このページのトップへ</a>
</div>

CSS による表示のコントロールについては下記をご覧下さい。

CMONOS.JP マニュアル:CMONOS.JP 共通:CMONOS.JP の HTML/CSS カスタマイズ

以上参考になりましたら幸いです。

CMONOS スタッフ
MacOS X/Safari7.1
2014年11月6日(木) 14時0分7秒

Re:カテゴリー名の表示の仕方

何度もありがとうございました。
ｲﾒｰｼﾞしたものができました。
本当にありがとうございます。

toto
Windows 7/InternetExplorer11.0
2014年11月6日(木) 16時35分0秒

Re[2]:カテゴリー名の表示の仕方

ご報告ありがとうございます。
また何かわかりにくい点など出てきましたらお気軽にご相談ください。
お待ちしておりますm(_ _)m。

CMONOS スタッフ
MacOS X/Safari7.1
2014年11月6日(木) 18時57分59秒

タイトル

タイトルは内容を簡潔にまとめたものにしてください。
「質問です」などのタイトルで投稿することはできません。

アイコン

名前

E-Mail

この E-Mail は表示されません。

URL

コメント

添付ファイル

ファイル

(< 1000000 byte)

サイズ

幅 (<800) ×高 (<800) ピクセル

タイトル

ユーザー環境

MacOS X/AppleWebKit537.36

情報を記憶する

戻る