■Seesaaブログのタグ一覧ページ上部に記事リストを作る(1)
■構成を考える
■独自で作っていたclass「article_kobetu」「subheading」を使用
■記事リスト用のタイトル表記を変更
■構成を考える
■独自で作っていたclass「article_kobetu」「subheading」を使用
■記事リスト用のタイトル表記を変更
記事リスト作成シリーズ、第三弾は「タグ一覧ページ」です。
一応、記事リスト作成に関する記事を紹介しておきます。
当記事の関連記事■カテゴリページに記事リストを作る
■ブログ内検索結果ページに記事リストを作る
■タグ一覧ページに記事リストを作る(1)
■タグ一覧ページに記事リストを作る(2)
■過去ログページ(アーカイブページ)に記事リストを作る
■ブログ内検索結果ページに記事リストを作る
■タグ一覧ページに記事リストを作る(1)
■タグ一覧ページに記事リストを作る(2)
■過去ログページ(アーカイブページ)に記事リストを作る
今回の「タグ一覧ページ」の記事リスト作成は、内容を書いていたらあまりにも長くなったので「1」と「2」に分けて掲載します。
今回の記事の続き「2」はこちらです。→<■タグ一覧ページに記事リストを作る(2)>
現時点のタグ一覧ページ
タグ一覧ページに表示される記事数は6件です。
同じタグが付けられた記事が7件以上ある場合、タグ一覧ページの記事下には「もっと見る」ボタンが表示されます。(以前の記事<■ページ案内リンク「もっと見る」の表記を変更する>で『「○○」の記事をすべて見る』という表記に変更済みです)
タグ一覧ページはブログ内検索結果ページと同じようにページ案内リンク(1ページ目や2ページ目を案内するボタン)が表示されません。
記事の7件目以降を表示させたい場合は「もっと見る」ボタンをクリックします。
すると、短文表示の記事の下に「次へ」ボタンが出てきます。
この「次へ」ボタンをクリックしてページを繰っていきます。
つまり、タグ一覧ページには「もっと見る」ボタンをクリックした「先」があり、そのページも「タグ一覧ページ」だということです。
「もっと見る」ボタンをクリックして開いたページには12件の記事が表示され、さらに「次へ」ボタンをクリックするたびに12件ずつ表示していきます。
今回はタグ一覧ページの上部に記事リストを作りますが、もちろん「もっと見る」ボタンの先のページにも記事リストを表示させたいと思います。というか、HTMLコードを追加すると「もっと見る」ボタンの先のページにも勝手に記事リストが表示されます。
タグ一覧ページにどんな順番で何を表示するのか
私は以前の記事<■【Seesaaブログ新デザインシステム】タグ一覧ページのパーツ(タグクラウド・タグサーチ)の順番を変更する>で、タグ一覧ページに表示するパーツの順番を変更しました。
以前の記事では、タグ一覧ページの上部にあった「タグ一覧(タグクラウド)」と「"○○"でSeesaa全体を検索するリンク(タグサーチ)」をページの一番下、つまり「もっと見る」ボタンの下に表示するように変更しました。
この構成を前提に説明するつもりなので、デフォルトのテンプレート「シンプルA. ホワイト 右カラム」のままだと、以下の記述の意味がわからないと思います。
というか、混乱しますね確実に。
「デフォルトの場合」「ここまでのカスタマイズ」「実装している場合」の3つのHTMLを同時に比較しながら考えるのは、正直言って疲れます。
なのでもう、デフォルトの場合については説明しないことにします。
ごめんなさい、面倒です(笑)
もしもテンプレートがデフォルトの場合(「タグクラウド」→「"○○"でSeesaa全体を検索する」→「本来の記事リスト」という順番でページを構成している場合)は、ご自分で色々とやってみてください。
以下で説明するコードのパーツ記述は間違いありませんので、入れ替えればいいんじゃないかな?と思います。
「タグクラウド」→「新作の記事リスト」→「"○○"でSeesaa全体を検索する」→「本来の記事リスト」という順番にするとか、パーツの意味を理解できたら色々とカスタマイズできるのではないでしょうか。
もちろん私は不親切なので、詳しい説明は一切しません。
ご自分で編集してみてください。
ということで、作成するタグ一覧ページの構成を書いておきます。
<タグ一覧ページ>
◆タイトル(タグ「○○○○」記事リスト【目次】)
◆記事タイトルと日付(曜日) ←今から作る記事リスト6件
◆「もっと見る」ボタン
余白
◆タイトル(タグ「○○○○」の記事一覧)
◆記事タイトルと最初の文章、「続きを読む」 ←元からあった短文表示の記事6件
◆「もっと見る」ボタン
◆タグクラウド
◆タグサーチ("○○"でSeesaa全体を検索する)
<タグ一覧ページ(もっと見るボタンの先)>
◆タイトル(タグ「○○○○」記事リスト【目次】)
◆記事タイトルと日付(曜日) ←今から作る記事リスト12件
◆「次へ」ボタン
余白
◆タイトル(タグ「○○○○」の記事一覧)
◆記事タイトルと最初の文章、「続きを読む」 ←元からあった短文表示の記事12件
◆「次へ」ボタン
◆タグクラウド
◆タグサーチ("○○"でSeesaa全体を検索する)
◆タイトル(タグ「○○○○」記事リスト【目次】)
◆記事タイトルと日付(曜日) ←今から作る記事リスト6件
◆「もっと見る」ボタン
余白
◆タイトル(タグ「○○○○」の記事一覧)
◆記事タイトルと最初の文章、「続きを読む」 ←元からあった短文表示の記事6件
◆「もっと見る」ボタン
◆タグクラウド
◆タグサーチ("○○"でSeesaa全体を検索する)
<タグ一覧ページ(もっと見るボタンの先)>
◆タイトル(タグ「○○○○」記事リスト【目次】)
◆記事タイトルと日付(曜日) ←今から作る記事リスト12件
◆「次へ」ボタン
余白
◆タイトル(タグ「○○○○」の記事一覧)
◆記事タイトルと最初の文章、「続きを読む」 ←元からあった短文表示の記事12件
◆「次へ」ボタン
◆タグクラウド
◆タグサーチ("○○"でSeesaa全体を検索する)
こんな感じでページ上部に記事リスト関係、ページ下部に通常のタグ一覧ページを表示させたいと思います。
【注意!】「article_kobetu」と「subheading」
下記で紹介するコードでは、私が独自に作ったclass「article_kobetu」と「subheading」を使用しています。1つ目の「article_kobetu」は「記事を点線で囲む」というclassで、もう1つの「subheading」は「上部に100pxの余白を入れる」というclassです。
<私が勝手に作ったclass>
.article_kobetu {
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
}
.subheading {
margin-top: 100px;
}
margin-bottom: 40px; /* コンテンツとコンテンツの間 */
padding: 10px 10px 15px 10px;
border:1px dotted #4E667D; /* コンテンツを点線で囲む */
}
.subheading {
margin-top: 100px;
}
この2つのclassをCSSに記述していない方は、CSSの空いている部分に記述してください。
もしも「線で囲まないし、余白もいらない」という場合は、下記で紹介する「入れ替えるコード」内で該当部分を緑色で表示していますので、その部分を外した状態でご自分のHTMLにコピペしてください。(すみません、記事を2つに分けましたので「入れ替えるコード」というのは次の記事のことになります)
それと、私は以前の記事<■【Seesaaブログ新デザインシステム】カテゴリページ・タグ一覧ページのタイトルを記事タイトルと同じ位置に置く・「heading」を編集する>で、HTMLに記述されている「<div class="l-content">」と「<div role="main" class="main l-left">」の位置を変更しました。
カテゴリページとかタグ一覧ページとか、そういうページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で、同じ位置(高さ)に置きたかったので、このような処理をしています。
もしも上記のタグを移動させていない場合はどのような表示になるのかわかりません。おそらく大丈夫だとは思いますが、私自身のカスタマイズとは異なる場合のことは関知しませんのでご了承ください。
タグ一覧ページに記事リストを作る(タイトル表記の変更)
HTMLを編集します。
管理画面の「HTML編集」画面を開き、「<% if:page_name eq 'tag' -%>」で検索すると2ヶ所がヒットしますが、まずは1つ目を編集します。
デフォルトのテンプレートだと36行目です。
ここまでのカスタマイズ後(カテゴリページとブログ内検索結果ページの記事リストを作った後)だと98行目あたりです。
このタグ部分の5行分を、下記で紹介するコードに丸ごと入れ替えてください。
カテゴリページやブログ内検索結果ページのカスタマイズとは異なり、このタグ一覧ページのカスタマイズでは、ページ上部の記事リスト部分とページ下部の本来の記事リスト部分を別々に編集します。
今、ここで「入れ替えてください」と言っているのはページ上部に表示されるタイトルのことです。
下記のようにコードを入れ替えると、ページ上部に表示される記事リストのタイトルが『タグ「○○○○」記事リスト【目次】』という表記になります。
【注意】
タイトル部分の表記を変更した場合、このタイトルはタグページ全部に共通となりますので、それが嫌な方は変更しないでください。
「タグページ全部」とは、例えば画像にタグを設定している場合も、オーディオでもビデオでも、タグを設定しているページの上部タイトルが『タグ「○○○○」記事リスト【目次】』と表記される、ということです。
私は画像にタグを設定した場合や、オーディオやビデオにタグを設定した場合のタグページに記事リストを表示させるつもりはありません。記事にタグを設定した場合にのみ、記事リストを作ろうと考えています。
でも、タグページ全部にこのタイトルが表示されますので、タイトルが不自然だと思われる場合(例えば画像にタグを付けた場合、記事リストが表示されないのに『タグ「○○」記事リスト【目次】』と表示するので違和感がある、という場合など)は、ここでのタイトル表記の変更をしないでください。
もちろん私自身は画像やオーディオにタグを設定するつもりがないので、さくっとタイトル表記を変更しますけどね。
タイトル部分の表記を変更した場合、このタイトルはタグページ全部に共通となりますので、それが嫌な方は変更しないでください。
「タグページ全部」とは、例えば画像にタグを設定している場合も、オーディオでもビデオでも、タグを設定しているページの上部タイトルが『タグ「○○○○」記事リスト【目次】』と表記される、ということです。
私は画像にタグを設定した場合や、オーディオやビデオにタグを設定した場合のタグページに記事リストを表示させるつもりはありません。記事にタグを設定した場合にのみ、記事リストを作ろうと考えています。
でも、タグページ全部にこのタイトルが表示されますので、タイトルが不自然だと思われる場合(例えば画像にタグを付けた場合、記事リストが表示されないのに『タグ「○○」記事リスト【目次】』と表示するので違和感がある、という場合など)は、ここでのタイトル表記の変更をしないでください。
もちろん私自身は画像やオーディオにタグを設定するつもりがないので、さくっとタイトル表記を変更しますけどね。
<元コード>
<入れ替えるコード>
<!-- ********** タグ一覧ページ(上部記事リストタイトル)*********** -->
<% if:page_name eq 'tag' -%>
<% if:tag -%>
<p class="heading">タグ「<% tag.word -%>」記事リスト【目次】</p>
<% /if -%>
<% /if -%>
<!-- ********** /タグ一覧ページ(上部記事リストタイトル) 終わり *********** -->
<% if:page_name eq 'tag' -%>
<% if:tag -%>
<p class="heading">タグ「<% tag.word -%>」記事リスト【目次】</p>
<% /if -%>
<% /if -%>
<!-- ********** /タグ一覧ページ(上部記事リストタイトル) 終わり *********** -->
●コードを見たらわかると思いますが、デフォルトの記述から変更したのはタイトル表記部分だけです。
●しつこいですが、画像やビデオにタグを設定した時のページで「目次」等と表示したくないならば、この部分の変更はしないでください。
コード編集後のHTMLと実際のページ(画像にタグを付けた場合)
次の記事の紹介
さて、続きは説明がややこしくなります。
私自身が混乱してしまうぐらいには、ややこしいです。
次の記事では、タグ一覧ページに記事リストのコードを追加します。
■【Seesaaブログ新デザインシステム】タグ一覧ページに記事リストを作る(2)
今回の「タグ一覧ページ」の記事リスト作成は、内容を書いていたらあまりにも長くなったので「1」と「2」に分けて掲載しています。タグ一覧ページに関するHTMLの記述は、前回の記事で編集した箇所の他にもう1つ‥‥
今回の「タグ一覧ページ」の記事リスト作成は、内容を書いていたらあまりにも長くなったので「1」と「2」に分けて掲載しています。タグ一覧ページに関するHTMLの記述は、前回の記事で編集した箇所の他にもう1つ‥‥