blog*citron

BlogPeopleやTB Peopleなどリンクリストが増えるとナビバーが長くなるだけでなく、外部から読み込む分トップページが重くなります。全部まとめて別ページにスッキリ収納するカスタマイズ。サンプルはこちら

• リストを2列に並べてスペースを有効活用（1列の場合のやり方もあります）
• 高さを決め、長ければスクロールバーが出るようにする
• 外部のhtmlもテーブルも使わない

導入手順

1: ユーザーを追加する

別ページを作成するためにユーザーを追加します。『ユーザー管理』からユーザー名とパスワードを入力して作成。名前は何でも構いません。 下準備として『編集』を押して『自動改行しない』にチェックを入れて下さい。

POINT

• ユーザリストに表示させたくない場合は『表示設定』の『ユーザーリストには表示しない』を選択しておくこと
• テンプレートでプロフィール欄のタイトルに「●●'s Profle」等の記入があれば、ベースHTMLテンプレートの方で削除しておくと良いでしょう

2: テンプレートのCSSを編集

デザインやサイズはお好みで。 サイズ調整の際は、エントリー幅を越えないように注意。

/* リスト内のリンクの下線を消す */ #linkpage a { text-decoration:none; } /* リストの段組 */ #linkpage { width:100%; } #linkpage dl { width:200px; float:left; } /* 見出し */ #linkpage dl dt { padding:0 0.2em; color: #40B8C5; border-bottom: 1px dashed #ccc; } /* 内部の余白 */ #linkpage dl dd { margin:1em; } /* リンクの高さとスクロール */ #linkpage div.bloglist { margin: 0 auto; height:210px; overflow:auto; }

POINT

• #linkpage dl dtがタイトル部分、#linkpage dl ddが中身です
• ※これまでに使用しているID名、class名と被るようなら任意の名前に変更

3: ユーザー説明を編集

1で追加したユーザーの『ユーザー説明』部分を編集します。
この例では2列×2段の4本です。増やす場合は後の応用編を参考にして下さい。

<div id="linkpage"> <!--1段目--> <dl> <dt>リストのタイトル1</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <dl> <dt>リストのタイトル2</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <br style="clear:left;" /> <!--2段目--> <dl> <dt>リストのタイトル3</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <dl> <dt>リストのタイトル4</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <br style="clear:left;" /> </div>

CSSのID名、class名を変更している場合はこちらも変更しておくこと。
最後にBPなどの呼び出しタグをコピペすれば完了！（呼び出しタグは各サービスの管理画面を参照）

POINT

• <dl>から</dl>までが1つのリスト
• 2列に並べる場合、段の終わりには<br style="clear:left;" />を必ず入れる。
  2段目が1列しかなくても入れます。

上手くいかない…

まずタグの閉じ忘れや書き間違いがないか確認。 テンプレートの他の部分に影響されることもあります。 テンプレートの構成によっては、floatの方向をleftではなくrightにすると上手くいく場合もあります。

floatの方向をrightにする場合

1. 手順2のCSSのfloat:left;をfloat:right;に変更
2. 手順3のHTMLの全ての<br style="clear:left;" />を<br style="clear:right;" />に変更

応用編

2列×3段の6本

<dl>から<br style="clear:left;" />までがセットで1段分。

HTML

<div id="linkpage"> <!--1段目▼--> <dl> <dt>リストのタイトル</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <dl> <dt>リストのタイトル</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <br style="clear:left;" /> <!--1段目▲--> <!--2段目▼--> <dl> <dt>リストのタイトル</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <dl> <dt>リストのタイトル</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <br style="clear:left;" /> <!--2段目▲--> <!--3段目▼--> <dl> <dt>リストのタイトル</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <dl> <dt>リストのタイトル2</dt> <dd><div class="bloglist">呼び出しタグ</div></dd> </dl> <br style="clear:left;" /> <!--3段目▲--> </div>
これ以上増やす場合も、<!--▼-->から<!--▲-->を同じように繰り返せばOK。

1列のリストにする

3カラムや記事幅の狭いテンプレートの場合、2列並べるには少し狭いので1列がオススメ。基本手順は同じ。

HTML

<div id="linklist"> <dl> <!-- ▼ --> <dt>リストのタイトル</dt> <dd><div class="bloglist">★呼び出しタグ★</div></dd> <!-- ▲ --> </dl> </div>
複数配置する場合は<!-- ▼ -->から<!-- ▲ -->までを繰り返します。

CSS

/* リスト内のリンクの下線を消す */ #linkpage a { text-decoration:none; } /* 全体の幅とセンタリング */ #linkpage { margin: 0 auto; width: 90%; } /* 見出しのスタイル */ #linkpage dl dt { color:#777; border-bottom: 1px dashed #ccc; } /* 内部の余白 */ #linkpage dl dd { margin:1em; } /* リンクの高さとスクロール */ #linkpage div.bloglist { height:150px; overflow:auto; }