Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマ…

【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマークを付ける

Seesaaブログのカテゴリページの記事リスト先頭にマークを付ける
■Seesaaブログのカテゴリページ上部に作った「記事リスト」にマーク(画像)を付ける
■リストタグ「ul」「li」を使って記事リストを作る
■新しく作ったclass「top-list」の設定  

私はSeesaaブログの「カテゴリページ」「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」のページ上部に、記事リストを置くように設定しています。


設定してからかなりの期間が経ちますが、機能に関しては何の問題もありません。ちゃんと「記事リスト」が表示されます。
ただ、記事タイトルが長文になった場合に、記事リストの行間が少し広いので違和感があるんです。単語の途中で折り返されてしまうし。


現時点のテンプレート
現時点のカテゴリページの記事リスト


状況がわかりやすいと思ったので、デモブログではなく「仮」の画像を掲載しました。
行間がすごいことになっているので、どうにかしたいと思います。
あと、直接HTMLに記述することで記事タイトルの先頭に「◆」マークを付けていましたが、リストタグを使用したHTML記述に変更して、リストの先頭に矢印の画像を付けることにします。



この記事では「カテゴリページ」の記事リストを編集しますが、この後、「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」も同じように編集します。
下記で記事案内を書いておきますが、これらはすべて、既に各ページに記事リストがあることが前提の記事です。まあ、記事内で以前の記事を案内しているので大丈夫だと思いますけどね。







記事リストの先頭に付ける画像を準備する


現時点の記事リストの先頭には「◆」マークを付けていますが、これを画像に変更したいと思います。
先頭に付けるマーク(画像)は、ご自分で好きな画像をご準備ください。


「アイコン」「矢印」「フリー」等の単語でネット検索すると、親切な方が無料でアイコン用画像をダウンロードさせてくれます。私自身も使用しているのはダウンロードした画像です。
再配布はできませんので、ご自分でお探しください。



私が使用している画像サイズは「13px × 13px」です。できれば同じサイズで画像を準備していただきたいと思います。(他のサイズの画像ではどのような表示になるのか私自身が試したわけではないのでわかりません)
準備した画像は、ご自分のブログにアップロードしておいてください。



私が準備したリストマークの例


とりあえず、どういう画像が必要なのか「例」という意味で、私が準備した画像を紹介しておきます。



リストマーク
「yajirushi_03.png」

yajirushi_03.png



カテゴリページの記事リストHTMLを編集する


HTMLを編集します。
関連記事<■【Seesaaブログ新デザインシステム】カテゴリページに記事リストを作る>を参考に、カテゴリページには記事リストを掲載するようにカスタマイズしておいてください。



管理画面の「HTML編集」画面を開き、「<% if:page_name eq 'category' -%>」で検索するとカテゴリページの記事リスト部分がヒットします。(記事リストを設置していますので、もちろんデフォルトのコードとは全く違う記述になっているはずです)


<元コード>
カテゴリページの記事リストのHTML

<!-- ********** カテゴリ一覧ページ(上部記事リスト)*********** -->
<% if:page_name eq 'category' -%>
<p class="heading">カテゴリ「<% category.name -%>」の記事リスト【目次】</p>
<div class="article_kobetu2">
<% loop:list_article -%>
<article class="article">
◆ <a href="<% article.page_url %>"><% article.subject %></a> <% article.createstamp | date_format("%Y/%m/%d(%a)") -%>
</article>
<% /loop -%>
</div>


この記述は、記事リストの先頭に無理やり「◆」マークを付けた記述です。
この「◆」マークを、準備した画像に変更したいと思います。
ついでに行間とか折り返し部分も調整したいと思いますが、このままの記述では指示を出せません。なので、この記事リスト部分にリストタグを付けて、リスト表示に変更します。



具体的には、上記コード内の赤色文字「◆ <a href="<% article.page_url %>"><% article.subject %></a> <% article.createstamp | date_format("%Y/%m/%d(%a)") -%>」の部分をリストタグ「ul」と「li」で囲みます
「ul」には新しくclass名「top-list」を付けて「<ul class="top-list">」と記述します。



面倒なので、以下の「入れ替えるコード」をそっくりコピペしてください。
赤色の文字の上、「<article class="article">」から「</article>」までを入れ替えればいいと思います。


<入れ替えるコード>
<!-- ********** カテゴリ一覧ページ(上部記事リスト)*********** -->
<% if:page_name eq 'category' -%>
<p class="heading">カテゴリ「<% category.name -%>」の記事リスト【目次】</p>
<div class="article_kobetu2">
<% loop:list_article -%>
<article class="article">
<ul class="top-list">
<li><a href="<% article.page_url %>"><% article.subject %></a> <% article.createstamp | date_format("%Y/%m/%d(%a)") -%></li>
</ul>

</article>
<% /loop -%>
</div>


●コピペした後は、おそらくタグが左端に寄った状態で表示されると思いますので、キーボードの「タブキー(Tabキー)」でタグを1つずつ移動させ、体裁よく並べてください。
タグが全部左端に寄っていても気にしない方はそのままでいいと思います。



コード編集後のHTML


コード編集後のカテゴリページの記事リスト部分のHTML



CSSに新しく作ったclass「top-list」を追加する


上記HTMLでリストタグ「ul」にclass名「top-list」を付けたので、CSSで「top-list」に対する指示を出します。
この記述は、「カテゴリページ」だけではなく、「ブログ内検索結果ページ」「タグ一覧ページ」「過去ログページ(アーカイブページ)」のページ上部の記事リストにも共通の設定です。



CSS(スタイルシート)を編集します。
管理画面の「スタイルシート編集」画面を開き、CSSの空いている部分に下記の記述を追加します。CSSの一番下でいいと思います。
コピペ後に変更内容を「保存」するのを忘れないでください。
(CSSの空いている部分に追加すればいいだけなので、CSS編集画面のコード画像は掲載しません)


<CSSに追加するコード>
/*** 上部掲載の記事リストのスタイル ***/
.top-list li {
line-height: 1.5em;
padding: 6px 0;
word-wrap : break-word;
overflow-wrap : break-word;
padding-left: 1em;
text-indent: -1.3em;
border-bottom:1px dotted #A1A8AF;
margin-left:5px;
}

.top-list li a {
font-size: 110%;
text-decoration:none;
}

.top-list li:before {
content: url(http://□□□.up.seesaa.net/image/yajirushi_03.png);
position: relative;
margin-right: 7px;
top: 1px;
}


●最初に書いた通り、リストの先頭にはマーク(画像)を使います。
上記CSSの赤色で表示しているURL部分には、ご自分でアップロードした画像のURLを記載していください。

●「word-wrap : break-word;」「overflow-wrap : break-word;」で、折り返し部分を切りの良いところで折り返すように設定しています。

●「border-bottom:1px dotted #A1A8AF;」を入れて、記事リストの下に点線を入れてわかりやすく表示するようにしました。不必要な場合は削除してください。



コード編集後の実際のページ


編集後のカテゴリページの記事リスト




次の記事の紹介

カテゴリページの記事リストを調整しました。
リストタグを使用して、CSSで行間も調整できたので、見た目的には問題ないと思います。
次の記事では「ブログ内検索結果ページの記事リスト」に対して同じような内容の編集をしたいと思います。


【Seesaaブログ新デザインシステム】ブログ内検索結果ページの記事リスト先頭にマークを付ける
前回の記事では「カテゴリページ」の記事リストを調整したので、今回は「ブログ内検索結果ページ」を調整します。せっかくリストマーク(画像)を準備しましたからね、使わないともったいないです。‥‥






posted by mameemon | Comment ( 0 ) | Category ( Seesaaブログ )
この記事へのコメント
コメントを書く
お名前:
コメント:
認証コード: [必須入力]

※画像の中の文字を半角で入力してください。