コンテンツ[リンク集]をリスト表示にする

サイドメニューのコンテンツをリスト化する方法ができたので載せてみました。
※seesaaブログでの変更法です。
HTML・CSSの変更は自己責任でおこなってくださいね。

この「・~ 」の部分ですね
コンテンツのHTMLを変更します。
[デザイン]→[コンテンツ]→[リンク集]→[コンテンツHTML編集]
<div class=”sidetitle”><% content.title %></div>
<% content.header -%>
<div class=”side”>
<% loop:list_link -%>
<a href=”<% content_link.url %>” <% if:content_link.target %
>target=”_blank”<% /if %>><% content_link.title %></a><br />
<% /loop -%>
<% content.footer -%>
</div>
このように表示されていると思います。この部分を下のように変更します。(赤字部分)
<div class=”sidetitle”><% content.title %></div>
<% content.header -%>
<div class=”side”>
<ul><% loop:list_link -%>
<li><a href=”<% content_link.url %>” <% if:content_link.target %
>target=”_blank”<% /if %>><% content_link.title %></a>
<% /loop -%></ul>
<% content.footer -%>
</div>
あと、6行目の</a>の後ろの<br />を消します。リスト表示では自動的に改行されますので。
これでリスト表示が完成です。

↑これが完成画面。他のコンテンツにも応用できます。
「・」の部分がちょっと右に寄りすぎてるのが気になるので位置調整もしてみたいと思います。


位置調整のためにCSS部分を変更します。
[デザイン]→[デザイン一覧]→対象のCSSを選びます。
.side ul {
padding-left: 10px;
margin: 0px;
}
.side li {
padding-left:0px;
margin-bottom:0.8em;
}

この記述を加えてみました。.side a{  } の次あたりに入れるといいかと思います。
サイトのデザインによって違うと思いますのでpadding、marginをプレビューしながらいろいろ調整してみてください。
[メモ] liの部分 margin-bottom 次のリストとの行間

スポンサーリンク
広告(大)




広告(大)




シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告(大)