Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】タグ一覧ページの記事数を初めから最…

【Seesaaブログ新デザインシステム】タグ一覧ページの記事数を初めから最大件数(12件)表示する

Seesaaブログのタグ一覧ページの記事数を初めから最大件数(12件)表示する
■タグ一覧ページに最初から12件表示させる(「もっと見る」を表示するページではなく、その先のページを表示させる)
■「記事ページ」「個別記事ではないページ」「タグ一覧ページ」「コメント記入ページ」「サイドバー(タグクラウド)」のタグURLを編集  

Seesaaブログでは「タグ」を登録することができます。
「タグ」は記事作成画面で「タグの追加」をすることで登録します。記事に登録した「タグ」は、記事ページの記事タイトルの下部分に文字リンクで表示されます。


記事ページに表示されるタグ


この文字リンク「タグ」をクリックして開くと「6件」の記事が表示されます。
7件以上の記事がある場合は、6件の記事の下に「もっと見る」案内リンクが表示され、この「もっと見る」をクリックして開いたページには「12件」の記事が表示されます。


最初に開くページ(記事件数6件)も、「もっと見る」をクリックして開くページ(記事件数12件)も、どちらも「タグ一覧ページ」です。
少しだけ表示されるパーツが違いますが、Seesaaブログのシステム上(コード記述箇所なども含めて)、どちらも「タグ」のページですから、このブログでは「タグ一覧ページ」と呼びます。(本当の名前は知りませんw)



ちなみに、以前の記事で私は、「もっと見る」案内リンクをボタンにしました。そして、ボタンの表記も変更してしまいました。「もっと見る」だと素っ気ない感じだったので、『「○○」の記事をすべて見る』という表記に変えてしまったんですよね。
とはいえ、呼び方が変わると混乱するので、このブログでは『「もっと見る」ボタン』と統一して呼ぶことにします。






さて、今回やりたいことは、タグ一覧ページの「もっと見る」ボタンを非表示にすることです。
「タグ」をクリックした時に最初から12件の記事を表示するページを開きたいのです。



いちいち「もっと見る」ボタンをクリックしてページを表示させるのが面倒くさいんですよね。
私は「カテゴリ」のように記事に対するグループ分けをするために「タグ」を設定しているので、記事リストとして開きたい「タグ一覧ページ」が、最初に6件しか表示されないのは困るわけです。最初から12件分が表示されていても、少ないと思ってしまうのにw


あと、自分で作った「もっと見る」ボタンのスタイルがあまり好きじゃないんですw
なんだか邪魔になってきたので閲覧者に見せたくないんですが、だからと言って削除してしまうのはイヤなんですよ。
なので、このブログに設定されているどの「タグ」をクリックしたとしても、「もっと見る」ボタンを表示させずに最初から記事件数12件の「タグ一覧ページ」を開くように設定したいと思います。



とりあえず、現時点のタグ一覧ページはこんな感じです。


現時点の「タグ一覧ページ」
現時点の「タグ一覧ページ」


私はタグ一覧ページの上部に記事リストを表示するようにカスタマイズしたので、ページの上部に記事タイトルが6件、その下に「もっと見る」ボタンがあって、折りたたまれた記事(短文表示)が6件表示されます。もちろんその下には「もっと見る」ボタンがあります。



たぶんですが、Seesaaブログが「もっと見る」リンクを設置しているのは、短文表示とはいえ記事をいきなり12件も表示すると閲覧者が長々とスクロールしなければ内容がわからないから、という理由による配慮だと思います。

でも、私はタグ一覧ページの上部に記事リストを作ってしまいました。
タイトルだけとはいえ記事リストを見れば何について書いた記事なのかわかるので、最初から最大件数の12件を表示させても何の問題もないと思います。


【注意】
以下のカスタマイズは、記事だけにタグを付けている場合にのみ行なってください。
記事以外のものにタグを付けている場合(例えば画像にもタグを設定している場合)、以下のカスタマイズを行なうと、そのタグ(画像用のタグ)をクリックしても「ページが見つかりません」の表示になってしまいます。

下記では、タグに対するURLを「<% blog.tag_url(tag,'articles') -%>」と変更すればよい、と書いています。このURLの記述のうち「url(tag,'articles')」は「記事に設定されたタグ」を意味します。もしも画像にタグを設定しているならば、このURL部分は「url(tag,'photos')」にならなければいけません。
理屈はわかっていますが、そのようにHTMLの記述を変更することができませんでした。(私が何とかできたのはサイドバーのタグクラウドだけであり、タグ一覧ページのタグクラウドにこの設定をすることはできませんでした)
不完全なものを紹介するわけにはいかないので、しつこいですが、下記のカスタマイズは「記事」にだけタグを設定している場合のみ、やってください。記事以外の、例えば画像や音楽などにもタグを付けてアップロードしている場合は、やらないでください。
よろしくお願いします。




タグ一覧ページの表示記事数を最大件数にする


記事に設定されている「タグ」をクリックしてタグ一覧ページに飛ばすので、HTML上の「タグ」にはリンクの指示、つまり「aタグ」があります。


飛ばす先のページURLを表示するために、このリンク部分には「<% blog.tag_url(tag) -%>」というSeesaaブログの独自タグが使われています。(HTMLには「<a href="<% blog.tag_url(tag) -%>"><% tag.word -%></a>」等のように記述されています)


「もっと見る」ボタンが表示されるページを飛ばして、最初から記事件数12件のページを表示させるためには、この「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更します。



例えば、私のデモブログで「test」という「タグ」をクリックすると、URLはこんな感じです。

デモブログのURL


で、「もっと見る」をクリックした先(記事件数12件のページ)のURLはコレです。

もっと見るをクリックして開くページのURL


画像を準備してみましたが、暗くて見えないという(笑)
まあ、要するに最大件数を表示させるためのURLには「articles」が必要だということを言いたかったのです。



ということで、以下、「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更します。
HTML上には「<% blog.tag_url(tag) -%>」が4ヶ所あります。
「タグ」をクリックしたら、最初から最大件数を表示させるページ(articles)に飛ばしたいので、当然4ヶ所全部を変更します。
コンテンツHTMLにもサイドバーの「タグクラウド」の記述があるので、忘れないようにコンテンツHTMLの「<% blog.tag_url(tag) -%>」も変更します。



記事ページの「タグ」を変更する


管理画面の「HTML編集」画面を開き「<% blog.tag_url(tag) -%>」で検索すると4ヶ所がヒットしますので、まずは1つ目を編集します。



1つ目は記事ページの記事タイトルの下の「タグ」です。日付の横に表示されるヤツです。
デフォルトのテンプレートだと79行目に「<% blog.tag_url(tag) -%>」があります。
ここまでのカスタマイズ後だと368行目あたりです。


記事ページのHTML



「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更します。


<編集後>
編集後の記事ページのHTML


作業は簡単だと思います。なので、以下は変更後のコード画像のみを掲載します。
どこを変更するのか場所がわかれば、あとは「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に書き換えればいいだけなのですぐに編集できると思います。
(「<% blog.tag_url(tag,'articles') -%>」をコピペすればいいだけです)



個別記事ではないページ(トップページ)の「タグ」を変更する


管理画面の「HTML編集」画面を開き「<% blog.tag_url(tag) -%>」で検索した結果の2つ目を編集します。


「個別記事ではないページ(トップページ)」とは、そのまま「記事ページではないページ」のことです。デフォルトのテンプレートでは「記事ページ」と「それ以外のページ」という分け方をしてHTMLにコードを記述しています。「それ以外のページ」には例えばトップページや、カテゴリページ、過去ログ(アーカイブ)ページ等があります。
これらのページの記事タイトルの下に「タグ」がありますので、このリンク先を「<% blog.tag_url(tag,'articles') -%>」に変更します。



「HTML編集」画面を開いて編集します。検索でヒットした2つ目です。
デフォルトのテンプレートだと146行目です。
ここまでのカスタマイズ後だと448行目あたりです。
「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更して「保存」します。


<編集後>
記事ページではないページのHTML



タグ一覧ページの「タグクラウド」の「タグ」を変更する


管理画面の「HTML編集」画面を開き「<% blog.tag_url(tag) -%>」で検索した結果の3つ目を編集します。
デフォルトのテンプレートだと343行目です。
ここまでのカスタマイズ後だと797行目あたりです。


これはタグ一覧ページの「タグクラウド」の「タグ」部分ですが、私は以前の記事<■タグ一覧ページのパーツ(タグクラウド・タグサーチ)の順番を変更する>で「タグクラウド」と「タグサーチ」の位置を変更しました。(ページの上部にあったものを下部に移動させました)



デフォルトとカスタマイズ後の行数が全く違うし、下記掲載のコード画像もHTML記述がデフォルトとは少し違いますが、要するに「<% blog.tag_url(tag) -%>」で検索してヒットしたものを全部変更してしまえばいいだけなので大丈夫でしょう。
「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更して「保存」します。


<編集後>
タグ一覧ページのHTML



コメント記入ページの「タグ」を変更する


管理画面の「HTML編集」画面を開き「<% blog.tag_url(tag) -%>」で検索した結果の4つ目を編集します。
デフォルトのテンプレートだと628行目です。
ここまでのカスタマイズ後だと1009行目あたりです。



これは、記事ページ下部の「コメントを書く」リンクをクリックすると開くページの、記事タイトルの下に日付と一緒に表示される「タグ」部分です。
必要かどうかは知りませんが、他の箇所と統一しておきたい(というか「もっと見る」を非表示にしたい)ので、ここも変更します。
「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更して「保存」します。


<編集後>
コメント記入ページのHTML


【注意】
確認のためコメント記入ページを開いてみても、記事タイトルの下部分に「タグ」が表示されません。日付は表示されるけど「タグ」が無い。「なんだコレ???」と思いましたが、同じことを以前の記事<■コメント記入ページの記事を線で囲む>でも書いていました。

以前の記事では、コメント記入ページの記事を線で囲むという作業をしています。
この時に「コピペはしないでください」と注意しています。
日付部分のタグ「<% if:with_date -%>」と「<% /if -%>」の「if」の前にはタブでスペースが入っているようで、このスペースが無いと日付自体、表示されません。なので「コピペしないで直打ちして」と書いていました。

以前の記事内でも触れていますが、そもそもデフォルトのテンプレートでも「タグ」は表示されません。
今回、日付部分と同じようにタグの「if」の前にスペースを入れてみたり、色々といじってみましたが、やっぱり表示できない。なのでもう、諦めましょう。コメント記入ページなんだから、タグなんてなくてもいいでしょ!(でもいつか理由が判明するかもしれないので、ここでは「<% blog.tag_url(tag,'articles') -%>」に変更しておきます)




サイドバーの「タグクラウド」の「タグ」を変更する


上記でHTML上の4ヶ所の編集が終わりました。
次に、「コンテンツHTML編集」画面で、サイドバーの「タグクラウド」の「タグ」を変更します。この作業で終わりです。



管理画面の「コンテンツHTML編集」画面を開き「<% blog.tag_url(tag) -%>」で検索すると1ヶ所がヒットします。
デフォルトのテンプレートだと354行目です。
ここまでのカスタマイズ後だと389行目あたりです。
「<% blog.tag_url(tag) -%>」を「<% blog.tag_url(tag,'articles') -%>」に変更して「保存」します。


ちなみに、私はサイドバーの「タグクラウド」をプルダウンメニューにしてしまいましたので、デフォルトのテンプレートとはコード記述が激しく違うと思います。


<編集後>
タグクラウドのHTML



コード編集後の実際のページ


編集後のタグ一覧ページの表示


「タグ」をクリックすると、「もっと見る」ボタンが表示されることなく、タグ一覧ページ(最大件数表示ページ)が開きます。




次の記事の紹介

次の記事では、Seesaaブログの横幅を変更してから各サムネイル画像のサイズを調整する方法を説明します。


【Seesaaブログ新デザインシステム】横幅を変更してから各サムネイル画像のサイズを調整する
突然ですが、このブログの横幅を広げます。最近のサイトやブログはレスポンシブ対応のものが多くて(Seesaaブログもそうですね)、けっこう横幅を広くして使っている方が多いようです。私も真似します(笑)‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。