【Seesaaブログ新デザインシステム】過去ログページの記事リスト先頭にマークを付ける|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。記事リスト調整シリーズの第四弾は「過去ログページ」です。いわゆる「記事リスト」の調整に関する記事は、これで終わりですので、関連記事を紹介しておきます。当記事の関連記事■カテゴリページの記事リスト先頭にマークを付ける■ブログ内検索結果ページの記事リスト先頭にマークを付ける■タグ一覧ページの記事リスト先頭にマークを付ける■過去ログページの記事リスト先頭にマークを付けるこの記事では「過去ログページ」の記事リストを編集します。記事タイトルが長文になった場合に記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないのです。あと、リスト先頭のマーク(画像)を変更します。以前の記事<■【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマークを付ける>で「カテゴリページ」の記事リストを編集した際に書いているように、リストマークの画像を準備してください。あと、CSSには記事リストのために作ったclass「top-list」関連を記述してください。この2つの作業をやっておけば、HTMLを編集するだけで作業が終わります。念のために画像とCSSを掲載しておきますが、とりあえず現時点のテンプレートがどういう状況に変化するのかは、上記に掲載している「カテゴリページ」の記事リストに関する記事で確認しておいてください。私が準備したリストマークの例どういう画像が必要なのか「例」という意味で私が準備した画像を紹介しますが、そのまま画像を保存して使用するのはやめてください。「アイコン」「矢印」「フリー」等の単語でネット検索すると、親切な方が無料でダウウンロードさせてくれるので、そういうものを探してみてください。リストマーク「yajirushi_03.png」class「top-list」リストタグを使用して記事リストを作るための、スタイルを設定したclass「top-list」を紹介しておきます。このまま、CSSの空いている場所にコピペすればいいと思います。記述内の画像のURL部分(赤色文字)は、ご自分でアップロードしたリストマークの画像のURLを記述してください。1px;}過去ログページ(アーカイブページ)の記事リストHTMLを編集するHTMLを編集します。関連記事<■【Seesaaブログ新デザインシステム】過去ログページ(アーカイブページ)に記事リストを作る>を参考に、過去ログページ(アーカイブページ)には記事リストを掲載するようにカスタマイズしておいてください。-%>」で検索すると3ヶ所がヒットしますが、このうちの2つ目を編集します。アーカイブページの記事リスト部分です。(記事リストを設置していますので、もちろんデフォルトのコードとは全く違う記述になっているはずです)アーカイブページには「月」ごとのアーカイブと、「日」ごとのアーカイブがありますので、HTMLには同じような記述が上下に2ヶ所あります。この2ヶ所とも編集します。(2ヶ所あるので、「元コード」としてはとりあえず画像だけ掲載しておきます)<元コード>この記述は、カテゴリページと同じように、記事リストの先頭に無理やり「◆」マークを付けた記述です。この「◆」マークを、準備した画像に変更し、行間や折り返しを調整します。カテゴリページの編集と同じように、「◆」マーク以降の記述をリストタグ「ul」と「li」で囲みます。class="top-list">」と記述します。(CSSには既に「top-list」関連の記述が為されていることが前提です。記述していない場合は、カテゴリページに関する編集記事を参考にして記述しておいてください。一応、念のためにこのページ上部にもCSSのコードを掲載しています)2ヶ所とも、以下の「入れ替えるコード」をコピペします。-->●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。タグが全部左端に寄っていても気にしない方はそのままでいいと思います。次の記事では、Seesaaブログのタグをボタン風に表示する方法を説明します。■【Seesaaブログ新デザインシステム】タグをボタン風に表示する少し細かいカスタマイズですが、気になったので編集します。Seesaaブログでは記事にタグを設定すると、記事ページやトップページの日付の横にタグが表示されます。[必須入力]※画像の中の文字を半角で入力してください。