【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマークを付ける|ブログカスタマイズの雑談BLOGスマートフォン専用ページを表示ブログカスタマイズの雑談BLOGブログのカスタマイズやパソコン・ネットに関する雑談をするブログです。私はSeesaaブログの「カテゴリページ」「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」のページ上部に、記事リストを置くように設定しています。設定してからかなりの期間が経ちますが、機能に関しては何の問題もありません。「記事リスト」が表示されます。記事タイトルが長文になった場合に、記事リストの行間が少し広いので違和感があるんです。単語の途中で折り返されてしまうし。現時点のテンプレート状況がわかりやすいと思ったので、デモブログではなく「仮」の画像を掲載しました。行間がすごいことになっているので、どうにかしたいと思います。あと、直接HTMLに記述することで記事タイトルの先頭に「◆」マークを付けていましたが、リストタグを使用したHTML記述に変更して、リストの先頭に矢印の画像を付けることにします。この記事では「カテゴリページ」の記事リストを編集しますが、この後、「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」も同じように編集します。下記で記事案内を書いておきますが、これらはすべて、既に各ページに記事リストがあることが前提の記事です。記事内で以前の記事を案内しているので大丈夫だと思いますけどね。当記事の関連記事■カテゴリページの記事リスト先頭にマークを付ける■ブログ内検索結果ページの記事リスト先頭にマークを付ける■タグ一覧ページの記事リスト先頭にマークを付ける■過去ログページの記事リスト先頭にマークを付ける記事リストの先頭に付ける画像を準備する現時点の記事リストの先頭には「◆」マークを付けていますが、これを画像に変更したいと思います。先頭に付けるマーク(画像)は、ご自分で好きな画像をご準備ください。「アイコン」「矢印」「フリー」等の単語でネット検索すると、親切な方が無料でアイコン用画像をダウンロードさせてくれます。私自身も使用しているのはダウンロードした画像です。再配布はできませんので、ご自分でお探しください。できれば同じサイズで画像を準備していただきたいと思います。(他のサイズの画像ではどのような表示になるのか私自身が試したわけではないのでわかりません)準備した画像は、ご自分のブログにアップロードしておいてください。私が準備したリストマークの例とりあえず、どういう画像が必要なのか「例」という意味で、私が準備した画像を紹介しておきます。リストマーク「yajirushi_03.png」カテゴリページの記事リストHTMLを編集するHTMLを編集します。関連記事<■【Seesaaブログ新デザインシステム】カテゴリページに記事リストを作る>を参考に、カテゴリページには記事リストを掲載するようにカスタマイズしておいてください。-%>」で検索するとカテゴリページの記事リスト部分がヒットします。-%></div>この記述は、記事リストの先頭に無理やり「◆」マークを付けた記述です。この「◆」マークを、準備した画像に変更したいと思います。ついでに行間とか折り返し部分も調整したいと思いますが、このままの記述では指示を出せません。この記事リスト部分にリストタグを付けて、リスト表示に変更します。-%>」の部分をリストタグ「ul」と「li」で囲みます。class="top-list">」と記述します。面倒なので、以下の「入れ替えるコード」をそっくりコピペしてください。class="article">」から「</article>」までを入れ替えればいいと思います。-%></div>●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。タグが全部左端に寄っていても気にしない方はそのままでいいと思います。コード編集後のHTMLCSSに新しく作ったclass「top-list」を追加する上記HTMLでリストタグ「ul」にclass名「top-list」を付けたので、CSSで「top-list」に対する指示を出します。この記述は、「カテゴリページ」だけではなく、「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」のページ上部の記事リストにも共通の設定です。CSS(スタイルシート)を編集します。管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述を追加します。CSSの一番下でいいと思います。コピペ後に変更内容を「保存」するのを忘れないでください。1px;}●最初に書いた通り、リストの先頭にはマーク(画像)を使います。上記CSSの赤色で表示しているURL部分には、ご自分でアップロードした画像のURLを記載していください。break-word;」で、折り返し部分を切りの良いところで折り返すように設定しています。#A1A8AF;」を入れて、記事リストの下に点線を入れてわかりやすく表示するようにしました。不必要な場合は削除してください。コード編集後の実際のページ次の記事の紹介カテゴリページの記事リストを調整しました。リストタグを使用して、CSSで行間も調整できたので、見た目的には問題ないと思います。次の記事では「ブログ内検索結果ページの記事リスト」に対して同じような内容の編集をしたいと思います。■【Seesaaブログ新デザインシステム】ブログ内検索結果ページの記事リスト先頭にマークを付ける前回の記事では「カテゴリページ」の記事リストを調整したので、今回は「ブログ内検索結果ページ」を調整します。リストマーク(画像)を準備しましたからね、使わないともったいないです。[必須入力]※画像の中の文字を半角で入力してください。