SIRIUS|カテゴリーページの関連記事一覧をエントリーページでも表示させたい!

目安時間:約 11分

 

今回は、カテゴリーページの関連記事一覧をエントリーページでも表示させたい!!と思いサポートを受けながら変更していきました。

 

siriusのテンプレート編集ページです。

 

まず「カテゴリーページ」内の<!-- ★カテゴリーリストここから★ --><!-- ★カテゴリーリストここまで★ -->の間をコピーします。

それを「エントリーページ」にタブをクリックし「<% entryList_n | tag_replace(h3,h4) %>」の所を削除し、カテゴリーページ内でコピーした物を貼り付けます。

エントリーページの記事一覧に更新日付を表示させる方法

日付を表示させたい場合は、<!-- ★ブログモードここから★ -->から「<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>」

をコピーし下の解説している所を参考に貼り付けてください。

 

 

 

テンプレートを分解してみていきましょう

これがテンプレート編集ページのカテゴリーの最後らへんに打ってあるhtmlです。

ちょっと分解してみていきましょう。

<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="catbox">
<div class="top"><span>&nbsp;</span></div>
<div class="body"><% pageThumbnail | tag_insert(div class="thumb") %>

(これは詳細設定のサムネイル画像を設定すると表示されます。大きさは200PX程が丁度だと感じます)

<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>

(これはエントリーページのタイトルになります)

<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>

(これはテンプレート編集のカテゴリーページ編集のブログタイプの記事一覧の所から取ってきました。これをすると更新した日付とその記事へのリンクが貼られます)

<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(100,true) | tag_insert(p) %>

(これはエントリーページの記事の最初から100文字が表示されるということです。(100,true)の100を変更すると表示される文字数が変わってきます。

<div class="more"><a href="<% permaLink %>">続きを読む</a></div>

(これは続きを読むのリンクです)
</div>
<div class="bottom"><span>&nbsp;</span></div>
</div>
<% /AQEntries %>
</div>

 

実際に表示させてみるとこんな感じ。

タイトルと画像が被っていてなんか不細工ですよね(;_;)

 

タイトルの下に画像を表示させる

なので少し変更してみます

スポンサーリンク


<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="catbox">
<div class="top"><span>&nbsp;</span></div>
<div class="body">ここにあったサムネイルの文字列をタイトルのしたに持っていきます
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>

<% pageThumbnail | tag_insert(div class="thumb") %>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(100,true) | tag_insert(p) %>
<div class="more"><a href="<% permaLink %>">続きを読む</a></div>
</div>
<div class="bottom"><span>&nbsp;</span></div>
</div>
<% /AQEntries %>
</div>

じゃあこんな感じに表示されます。

タイトルの下に画像が来て結構スッキリしましたよね(^^)

自分で自分を褒めたいです(笑)

 

でここでもう1つ。

更新日付の下に表示させる

ここは好みですが、私は日付も画像の上に表示させたいと思ったんですね。

なので下のように変更してみました。

 

<% categoryListTitle | tag_insert(h3) %>
<div id="categorylist">
<% AQEntries %>
<div class="catbox">
<div class="top"><span>&nbsp;</span></div>
<div class="body">ここにあったサムネイルの文字列を日付などを表示させる文字列の下に配置。
<div class="title"><a href="<% permaLink %>"><% pageTitle %></a></div>
<div class="info"><% pagePublicDate | parseDatetime(yyyy/MM/dd HH:mm:dd) %> | <% parentPageList_all | tag_insert(span class="plist") %></div>
<% pageThumbnail | tag_insert(div class="thumb") %>
<% pageBody | tag_strip | str_replace(&nbsp;,) | oneline | shorten(100,true) | tag_insert(p) %>
<div class="more"><a href="<% permaLink %>">続きを読む</a></div>
</div>
<div class="bottom"><span>&nbsp;</span></div>
</div>
<% /AQEntries %>
</div>

最終的にこんな感じになりました。

 

どうですか(^^)

結構スッキリして見栄えもいいですよね(^^)

 

まとめ

もうすぐすればこのsiriusは大幅なバージョンアップがあるとの事で、このエントリーページ一覧にもアイキャッチが付けれるらしいのでこのような事はしなくて良いとは思いますが、テンプレートを触れるとちょっとした事でも変更が出来て楽しいですよ(^^)もしよろしければ試してください。

スポンサーリンク


━━━━━━━━━━━━━━━━━━━━━━━━━━
このメルマガは月1000円以上を稼げていないって方や
ポイントサイトで稼いでいて、しんどいと思っている方に
私だけの情報を発信していきますので
ぜひメルマガに登録してください。
もちろん無料です。
メルマガ登録
メールアドレス
名前
powered byメール配信CGI acmailer
━━━━━━━━━━━━━━━━━━━━━━━━━━

スポンサーリンク


この記事に関連する記事一覧

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: 
橋詰ってどんな人?
カテゴリー
最近の投稿