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

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

Seesaaブログの過去ログページの記事リスト先頭にマークを付ける
■Seesaaブログの過去ログページ上部に作った「記事リスト」にマーク(画像)を付ける
■リストタグ「ul」「li」を使って記事リストを作る
■独自で作っていたclass「top-list」を使用する  

記事リスト調整シリーズの第四弾は「過去ログページ」です。
いわゆる「記事リスト」の調整に関する記事は、これで終わりですので、関連記事を紹介しておきます。






この記事では「過去ログページ」の記事リストを編集します。
記事タイトルが長文になった場合に記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないのです。
あと、リスト先頭のマーク(画像)を変更します。





記事リストを編集する前の準備


以前の記事<■【Seesaaブログ新デザインシステム】カテゴリページの記事リスト先頭にマークを付ける>で「カテゴリページ」の記事リストを編集した際に書いているように、リストマークの画像を準備してください。


あと、CSSには記事リストのために作ったclass「top-list」関連を記述してください。
この2つの作業をやっておけば、HTMLを編集するだけで作業が終わります。



念のために画像とCSSを掲載しておきますが、とりあえず現時点のテンプレートがどういう状況に変化するのかは、上記に掲載している「カテゴリページ」の記事リストに関する記事で確認しておいてください。



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


どういう画像が必要なのか「例」という意味で私が準備した画像を紹介しますが、そのまま画像を保存して使用するのはやめてください。「アイコン」「矢印」「フリー」等の単語でネット検索すると、親切な方が無料でダウウンロードさせてくれるので、そういうものを探してみてください。



リストマーク
「yajirushi_03.png」

yajirushi_03.png



class「top-list」


リストタグを使用して記事リストを作るための、スタイルを設定したclass「top-list」を紹介しておきます。
このまま、CSSの空いている場所にコピペすればいいと思います。
記述内の画像のURL部分(赤色文字)は、ご自分でアップロードしたリストマークの画像のURLを記述してください。


<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;
}




過去ログページ(アーカイブページ)の記事リストHTMLを編集する


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



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



アーカイブページには「月」ごとのアーカイブと、「日」ごとのアーカイブがありますので、HTMLには同じような記述が上下に2ヶ所あります。この2ヶ所とも編集します。
(2ヶ所あるので、「元コード」としてはとりあえず画像だけ掲載しておきます)


<元コード>
過去ログページの編集するHTMLコード


この記述は、カテゴリページと同じように、記事リストの先頭に無理やり「◆」マークを付けた記述です。
この「◆」マークを、準備した画像に変更し、行間や折り返しを調整します。



カテゴリページの編集と同じように、「◆」マーク以降の記述をリストタグ「ul」と「li」で囲みます
「ul」には新しく作っていたclass名「top-list」を付けて「<ul class="top-list">」と記述します。
(CSSには既に「top-list」関連の記述が為されていることが前提です。記述していない場合は、カテゴリページに関する編集記事を参考にして記述しておいてください。一応、念のためにこのページ上部にもCSSのコードを掲載しています)



2ヶ所とも、以下の「入れ替えるコード」をコピペします。


<入れ替えるコード>
<!-- ********** アーカイブページ(上部記事リスト)*********** -->
<% if:page_name eq 'archives' -%>
<!-- アーカイブページ記事リスト -->
<% if:archive_page_name eq 'month' -%>
<p class="heading"><% extra_title_datetime | date_format("%Y年%m月") -%>投稿の記事リスト【目次】</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>
<% /if -%>
<% if:archive_page_name eq 'mday' -%>
<p class="heading"><% extra_title_datetime | date_format("%Y年%m月") -%>(指定日)の記事リスト【目次】</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>
<% /if -%><!-- /アーカイブページ記事リスト 終わり -->


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



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


編集後の過去ログページの記事リスト部分のHTML


「年月」のアーカイブページ
「年月」のアーカイブページ


「日付」のアーカイブページ
「日付」のアーカイブページ




次の記事の紹介

次の記事では、Seesaaブログのタグをボタン風に表示する方法を説明します。


【Seesaaブログ新デザインシステム】タグをボタン風に表示する
少し細かいカスタマイズですが、気になったので編集します。Seesaaブログでは記事にタグを設定すると、記事ページやトップページの日付の横にタグが表示されます。トップページだけではなく、いわゆる「記事ページではないページ‥‥






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

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