【Seesaaブログ新デザインシステム】過去ログページ(アーカイブページ)に記事リストを作る|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。記事リスト作成シリーズの第四弾は「過去ログページ」です。(第四弾とか言いながら、シリーズ最後ですけどねw)「過去ログページ」という呼び方で大丈夫だとは思いますが、HTMLの記述を見ると「アーカイブページ」とも呼ぶのかもしれません。このブログでは混在して使うと思いますが、「過去ログページ」でも「アーカイブページ」でも、同じページを指していることをご理解ください。一応シリーズものなので、前回までの「記事リスト作成」に関する記事を紹介しておきます。当記事の関連記事■カテゴリページに記事リストを作る■ブログ内検索結果ページに記事リストを作る■タグ一覧ページに記事リストを作る(1)■タグ一覧ページに記事リストを作る(2)■過去ログページ(アーカイブページ)に記事リストを作る現時点の過去ログ(アーカイブ)ページアーカイブページは、カレンダーのキャプション部分の「年月」や「日付」、サイドバーの「過去ログ」に表示される「年月」をクリックして開くページです。「年月」をクリックした場合に表示されるページカレンダーやサイドバー「過去ログ」の「年月」部分をクリックして開くアーカイブページは、「管理画面>設定」の「ブログ設定」で記事の表示件数を設定できます。記事の下にはページ案内ボタンが2種類表示されます。上段に「前月」「次月」のボタンがあり、下段に「案内ボタン12345」があります。「日付」をクリックした場合に表示されるページ「日付」のアーカイブページは、「カレンダー」の日付部分をクリックしたら表示されます。こちらは「ブログ設定」で設定した表示件数は無関係で、同日にアップされた記事すべてが表示されます。ページ案内ボタンは存在しません。この「日付」のアーカイブページも案内ボタンがあった方がいいと思って色々と試行錯誤していたんですが、Seesaaブログの独自タグではアーカイブは「月」単位しか無いみたいで、何をどうやってもうまくいきませんでした。私が見つけることができなかっただけかもしれませんが、「日付」を指定するタグがないのは痛いです。諦めてテンプレートの通りにしたいと思います。1日に20も30も記事を書くことなんて無いでしょうから大丈夫でしょう。通常のアーカイブページ(「年月」をクリックして表示するページ)は、カテゴリページと同じように、本文の途中まで入った記事が検索結果の数だけ表示されます。スクロールしないと記事タイトルはわかりません。どんな内容の記事を書いているのかわかりやすくするために、ページ上部に記事リストを表示したいと思います。ちなみに、デフォルトのHTMLにはアーカイブページの記事リストに関する記述がありません。アーカイブページの記事表示は他のページ(個別記事ではないページ)と共通のため、HTMLでは記事の下に表示される「案内リンク」に関するものだけが記述されています。何もないところに今から記事リストのコードを追加しますので、かなり長文のコードになります。下記で紹介するコードでは、私が独自に作ったclass「article_kobetu」と「subheading」を使用しています。1つ目の「article_kobetu」は「記事を点線で囲む」というclassで、もう1つの「subheading」は「上部に100pxの余白を入れる」というclassです。100px;}この2つのclassをCSSに記述していない方は、CSSの空いている部分に記述してください。「線で囲まないし、余白もいらない」という場合は、下記で紹介する「追加するコード」内で該当部分を緑色で表示していますので、その部分を外した状態でご自分のHTMLにコピペしてください。l-left">」の位置を変更しました。カテゴリページとかタグ一覧ページとか、そういうページのタイトルも、トップページや個別記事ページと同じように「記事のタイトル」という意味で、同じ位置(高さ)に置きたかったので、このような処理をしています。上記のタグを移動させていない場合は、どのような表示になるのかわかりません。大丈夫だとは思いますが、私自身のカスタマイズとは異なる場合のことは関知しませんのでご了承ください。アーカイブページに記事リストを作る(案内リンクに見出しを付ける)アーカイブページ(過去ログページ)のページ上部に記事リストを作ります。HTMLのアーカイブページに見出しを付けます。この作業はやらなければいけないものではありません。HTMLの記述がわかりやすくなるように目印を付けたいだけです。私は見出しを付けますが、付ける必要がないならば、この作業は飛ばしてください。アーカイブページに記事リストを作るためには、記事リストのコードをHTMLに新しく追加することになります。先ほども書きましたが、現時点でHTML上にあるアーカイブページに関するコード記述は、アーカイブページの記事部分ではなく「案内リンク」のコードです。(記事部分は「個別記事ではないページ」と共通のため「案内リンク」に関するコードしか記述されていません)HTMLを編集します。-%>」で検索すると2ヶ所がヒットしますが、このうち2つ目を編集します。(1つ目はタイトル部分に関する表記ですので無関係です)デフォルトのテンプレートだと196行目にあると思います。このコード一連の島が、アーカイブページの案内リンクの記述です。1つ目の島で「前ページ・次ページ案内リンク」を、2つ目の島で「案内リンク(12345ボタン)」を記述しています。(上記画像には途中までしか記載されていません)これらの記述は変更する必要は全くありませんので、そのままで大丈夫です。何について書いているのかがわかるように、私は見出しを追加しておきます。しつこいですが、必ずやらなければいけない作業ではありませんので、お好きなようにどうぞ。アーカイブページの「案内リンク」に見出しを付ける説明するのがけっこう大変な感じなので、行数で指示を出したいと思います。行数は、私が色々とカスタマイズしてきた後の数字です。3つほど見出しに対する指示を出します。その結果、指示していた行数がどんどんズレていきます(笑)もう面倒ですので、最終的には下記に掲載しているコード画像で確認してください。-->」と見出しを入れます。-->」と見出しを入れます。-->」と見出しを入れます。-->」と見出しを入れます。編集後のHTMLわざわざ書いてみましたが、あまり必要ない作業でしたねwアーカイブページに記事リストを作る(コードの追加)コードを追加する前に、タイトル表記をどうするのかを考えておいてください。以下で紹介するコードを追加することにより、アーカイブページ(過去ログページ)には2つのタイトルが表示されることになります。1つ目はページ冒頭に入るタイトルで、これは今から作ろうとしている記事リストのタイトルです。作った記事リストの下には余白100pxが入ることになり、余白の下には2つ目のタイトルが表示されます。2つ目のタイトルは、元からあった短文表示の記事に対するタイトルです。「年月」のページと「日付」のページではコード記述の内容が異なるので、それぞれ2つずつのタイトル表記を考えなければいけません。「年月」のアーカイブページは、例えば『「○年○月」の記事リスト【目次】』のようにタイトルを付けることができます。「日付」のアーカイブページのタイトルは、なかなかうまくいきません。ように「日付」までは表示できないからです。しても「○年○月」という表示になってしまいます。Seesaaブログには「日」を指定する独自タグが無いんですよね。「○月○日」とピンポイントで指定するようなコード記述ができないのです。(もしかしたら「日」を指定する独自タグもあるかもしれないけど、わからなかった)ということで、私は諦めましたw追加するコードのタイトル表記は、以下のようにしたいと思います。アーカイブページのタイトルに「(指定日)」という言葉を入れることで誤魔化したいと思います。この表記が気に入らない場合は、下記で紹介するコードのタイトル部分の表記をご自分でお好きなように変更してください。HTMLに記事リストのコードを追加するアーカイブページに記事リストのコードを追加します。先ほども書きましたが、現時点のHTML上には記事リストのコードは何も記述されていません。関連する全部のコードをそっくりそのまま、指定する場所にコピペしてください。HTMLを編集します。-%>」というタグで検索すると2ヶ所がヒットしますが、1つ目を見てください。デフォルトのテンプレートだと36行目にあります。-%>」タグは5行の島になっていて、タグ一覧ページのタイトル表記のコードが記述されていると思います。(以前の記事<■タグ一覧ページに記事リストを作る(1)>で編集済です)私が色々とカスタマイズしてきた後のHTMLだと104行目ぐらいがタグ一覧ページのタイトル表記の終了タグです。-%>」タグとの間に、下記のコードを全部コピペします。長文のコードですが、細かいことは気にせずにコピペをどうぞ。l-left">」が記述されていますが、この2つのタグを移動させたことは上記で説明している通りです。-%>」が記述されています。-%>」の上に下記のコードをコピペします。-->●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。タグが全部左端に寄っていても気にしない方はそのままでいいと思います。●記事リストを線で囲まないし、短文表示の記事リストのタイトルに上余白はいらないという場合は、緑色で表示している部分を外してください。コード編集後のHTMLと実際のページ「年月」のアーカイブページ「日付」のアーカイブページ【調整】記事リストの行間変更(classの変更)上記のようにコードを全部コピペすると、記事リストを表示させることができます。実際に作ってみると、ちょっと行間が狭いような気がしてきました。class="article_kobetu">」を変更すればいいのですが、「article_kobetu」はここだけではなく他の箇所でも使用しているclassなので、「article_kobetu」そのものを変更することはできません。新しくclass「article_kobetu2」を作って対処したいと思います。記事リスト内の行間が気になる方は、下記のように編集してみてください。「article_kobetu」を使用していなくて記事リストの行間が気になる場合も、同じように編集すればいいと思います。class="article_kobetu2">」と終了タグ「</div>」を追加すればいいです。class="article_kobetu2">」に変更します。-->」の下に2ヶ所あります)「article_kobetu」の後ろに「2」を入れればいいだけです。CSSに新しく作ったclassを追加するCSSに下記の記述を追加します。CSSの空いている部分にコピペしてください。2.3em;」を追加しました。a」を作り、リンク部分(つまり記事タイトル部分)のフォントを少し大きくしました。コード編集後のアーカイブページ(過去ログページ)関連記事の紹介この記事を書いた後で、記事リストのスタイルを少しだけ変更しました。上記で記事リストの行間を少し広くしたんですが、通常はいいんですけど記事タイトルの文字数が多い場合は広くした行間のまま折り返されてしまうんですよ。私としては、記事タイトルと記事タイトルの間(行間)は広めにして、記事タイトルの途中で折り返される時はもう少し狭い間隔で折り返してほしいわけです。そのためには、この記事で書いているような、デフォルトのHTML記述をそのまま利用したコード記述では無理なわけですね。リストタグ「li」を利用した記述に変更して、リストスタイルとして行間を設定した方がいいのです。ついでに、この記事では記事タイトルの先頭に「◆」マークを付けていますが、リストタグを使えば、簡単に自分が準備したリストマーク(画像)を使えます。変更した記事はこの記事でのカスタマイズが前提になっていますので、まずはこの記事の通りに編集してもらいたいと思います。その上で、こちらの記事をお読みください。■【Seesaaブログ新デザインシステム】過去ログページの記事リスト先頭にマークを付けるこの記事では「タグ一覧ページ」の記事リストを編集します。記事タイトルが長文になった場合に、記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないので編集します。次の記事では、Seesaaブログのすべてのサムネイル画像に枠線を付ける方法を説明します。■【Seesaaブログ新デザインシステム】すべてのサムネイル画像に枠線を付ける何となく「カスタマイズ、終わったかなぁ」とか思いながらページを開いて確認をしている時に、記事に白っぽい画像を挿入した場合、サムネイル画像が並んで表示されるパーツの見た目がおかしいことに気が付きました。[必須入力]※画像の中の文字を半角で入力してください。