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