リンクリストを別ページで一覧にする

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

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

導入手順

1: ユーザーを追加する

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

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

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

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

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

3: ユーザー説明を編集

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

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

これ以上増やす場合も、<!--▼-->から<!--▲-->を同じように繰り返せばOK。

1列のリストにする

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

HTML

複数配置する場合は<!-- ▼ -->から<!-- ▲ -->までを繰り返します。
CSS
Related Archive