『最近のコメント』と『最近の記事』の一覧にスクロールバーを付けた

【カテゴリ：パソコン　ブログカスタマイズの記録】

この『Seesaa』ブログのサイドバーに表示している『最近のコメント』と『最近の記事』の一覧をそれぞれスクロールバー付きで表示するように変更したので、その覚え書きです。


↑『最近のコメント』の表示例

スクロールバーを付けてみようと思ったのは、ふとした思いつきからですが、試してみたらすごく簡単にできました。

以下、変更の手順です。（以下は例として『最近のコメント』の変更ですが、『最近の記事』でも同様です。）

スポンサーリンク

(1)『ブログの管理メニュー』⇒『デザイン』の『デザイン > PC > デザイン一覧』画面から『コンテンツ』をクリックします。



(2) 『最近のコメント』のコンテンツをクリックします。



↓以下のような画面が表示されます。


(3) 右上の『コンテンツHTML編集』をクリックします。



↓以下のような編集画面が表示されます。


(4) ソースコードを変更します。

以下は変更後のソースコードですが、変更内容は、赤色の行（２箇所）を追加しているだけです。

<div class="sidetitle"><% content.title %></div>
<div class="side">
<div style="overflow:auto; height:400px;">
<% content.header -%>
<% if:content_recent_comment.type == 0 -%>
<% loop:list_article_child -%>
<a href="<% article_child.article.page_url %>#comment"><% article_child.article.subject | tag_strip %></a> by <% article_child.writer | tag_strip %> (<% article_child.createstamp | date_format('%m/%d') %>)<br />
<% /loop -%>
<% /if -%>
<% if:content_recent_comment.type == 1 -%>
<% loop:list_article -%>
<a href="<% article.page_url %>#comment"><% article.subject | html | tag_strip %></a><br />
<% loop:list_article_child -%>
　⇒ <% article_child.writer | html | tag_strip %> (<% article_child.createstamp | date_format('%m/%d') %>)<br />
<% /loop -%>
<% /loop -%>
<% /if -%>
<% content.footer -%>
</div>
</div>

『height:400px』では、例として高さを400ピクセルにしていますが、この値は実際に表示したい高さにあわせて変更する必要があります。



(5) 『保存』ボタンをクリックして保存します。




↑『編集を完了しました。』と表示されます。

(6)『最近のコメントのHTML編集』を閉じ、更に『保存』ボタンをクリックします。




↑『設定を変更しました。』と表示されます。

以上です。

スポンサーリンク