Top Page > Seesaaブログ > 【Seesaaブログ新デザインシステム】ブログ内検索結果ページの記事リスト…

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

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

私が独自にSeesaaブログに設置した「記事リスト」の行間を調整して、リストの先頭に画像でマークを表示させます。
「記事リスト」は現時点でも機能的に何ら問題はありません。ただ、記事タイトルが長文になった場合に、記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないだけです。



前回の記事<■カテゴリページの記事リスト先頭にマークを付ける>では「カテゴリページ」の記事リストを調整したので、今回は「ブログ内検索結果ページ」を調整します。
カテゴリページの記事リストの先頭にリストマーク(画像)を付けるように画像を準備したので、他のページでも使わないともったいないです。
とりあえず、関連記事の案内リンクを掲載しておきます。






今回は、前回のカテゴリページの説明と重なる部分が多いので、できるだけ簡略化した記事にしたいと思います。
なんかもう現時点の画像とかも載せるのも面倒だから、出来上がりの画像だけ掲載することにしますねw





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


記事リストを編集するための準備は、前回の記事<■【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 'search' -%>」で検索すると2ヶ所がヒットしますが、そのうちの2つ目を編集します。ブログ内検索結果ページの記事リスト部分です。(記事リストを設置していますので、もちろんデフォルトのコードとは全く違う記述になっているはずです)


<元コード>
ブログ内検索結果ページのHTML

<!-- ********** ブログ内検索結果ページ *********** -->
<% if:page_name eq 'search' -%>
<% if:list_article -%>
<p class="heading">キーワード「<% keyword -%>」の検索結果【目次】</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">」と記述します。
(CSSには既に「top-list」関連の記述が為されていることが前提です。記述していない場合は、前回の記事を参考にして記述しておいてください。一応、念のためにこのページ上部にもCSSのコードを掲載しています)



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


<入れ替えるコード>
<!-- ********** ブログ内検索結果ページ *********** -->
<% if:page_name eq 'search' -%>
<% if:list_article -%>
<p class="heading">キーワード「<% keyword -%>」の検索結果【目次】</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で行間も調整できたので、見た目的には問題ないと思います。
次の記事では「タグ一覧ページの記事リスト」に対して同じような内容の編集をしたいと思います。


【Seesaaブログ新デザインシステム】タグ一覧ページの記事リスト先頭にマークを付ける
機能に関しては問題ありませんが、記事タイトルが長文になった場合に、記事リストの行間が少し広く感じてしまうのと、単語の途中で折り返されてしまうのが気に入らないので編集します。この記事では「タグ一覧ページ」の記事リスト‥‥






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

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