- date
- 050217
BP等のリンクリストをスクロールバー付で設置
Blog PeopleやTrackback Peopleなどのリンクリストをつけたい。
でもつけてみたら縦に長く伸びてしまって不恰好に…なんて人へ。
- リンクリストを設置する
- 縦の長さを固定し自動でスクロールバーを表示させる
この2つをセットにした、コピー&ペーストで出来るカスタマイズ。
06.09.01 : ソースの追記と見直し
HTMLの編集
設置場所は表示させたいところで構いません。
例えばリンクの下だと、sb系テンプレートなら<!-- END link -->の後に追加すればOKです。
Blog People
- BlogPeopleの呼び出しタグ
- BlogPeopleにログイン
- 表示形式の設定をクリック
- 基本設定と詳細設定をお好みで設定
- 詳細設定の
10.リンクリストの出力形式と文字コード
で、文字コードがブログと同じものになっているか確認。 - 例えばブログがEUCなら、ここもEUCにしないと文字化けすることがあります。
- 詳細設定の
- コードの作成/更新で出てきたものをコピー&ペースト
Trackback People
- TBPの呼び出しタグ
- この話題のリンクリストを作成する
- バナーを選んで生成をクリック
- 出てきたものをコピー&ペースト
複数のTBPをつける場合は、<!-- ★ -->で囲んだ部分だけを繰り返します。
- 複数設置する場合
CSSの編集
スクロールバーをつけるために、CSSに下記を加えます。height:●●px;の部分は好きな縦の長さにして下さい。
デザインのカスタマイズに関しては下記のエントリにまとめています。
blog*citronのテンプレートではdlを使っていますが、dl要素ではなくdivを使っている場合も
<div class="scroll">呼び出しタグ</div>
という形になれば良いので、基本的に同じ方法で構いません。
スクロールにわざわざdivを使っているのはmacIE向けのバグ対策だったりします。
同じ方法で色々なものを擬似フレームのように扱えるので、ブログパーツやオススメ商品が長くなった時にもいいかもしれません。しかし、見た目でスクロールされているだけですから、中身がたくさんあればそれだけ重くなります。貼りすぎには注意しましょう。
Comments
コメントエリアをスクロールする / スクロールを解除する
ユヅ様、こんばんは。
いつもお世話になってます。
この機能が使えてとっても便利になりました。
ありがとうございますーーー。
早速TBさせて頂いたのでご報告です♪
これからもいろいろ教えてくださいね★
●ヒロさん
こんにちは。
トラバも有難うございました。
短くまとめられるとスッキリしますよねー^^
なにか質問があればテンプレのコメント欄からどうぞです。
はじめまして。
以前よりsbは興味があったのですが、とても素敵なテンプレートだったので思い切って設置してみました。テンプレートを利用させていただいています。ありがとうございます。
BPのリンクリストですが、「ベースHTMLに呼び出しタグを書く
」とありますが、base.htmlはどこにあるものですか?
[util]ディレクトリ→[make_template]ディレクトリの中のbase.htmlでしょうか?
それを、上述にあるように書き換えたのですが、反映されません。
とても馬鹿な質問で申し訳ないのですが・・・どうぞよろしくお願いします。
ほかの過去コメントを見て、わかりました!
ローカルでするのではなく、ウェブ上でできるんですね。
すみません、初歩的なことをお聞きしてしまいまして。
非常に素敵なテンプレートなので、sbの輪が広がればいいな、と思っています。頑張ってくださいね。
初めまして。
先日からSBを使っています。
テンプレは、こちらの「雨色ドロップ」をお借りしています。
今回はこちらの記事を参考にリンクリストをスクロールさせることに成功しました♪
ありがとうございましたm(_ _"m)ペコリ
TBもさせて頂きます♪
●bucoさん
解決されてよかったです^^
●翠桜さん
はじめまして。
コメント有難うございました。
カスタマイズ成功おめでとうございます^^使いやすくなるといいですね。
こんばんわ。
教えていただきたいことがあります。
上の方法でBPをにスクロールバーを付けると下のほうに表示されるバーナーがスクロールバーの中に入ってしまいます。
これを外に出す方法を教えていただきたいのですか。
●ちむ。さん
ソースを開くとTBPの呼び出しタグに
<script language="javascript">b=0;</script>
といったような記述が見つかると思います。これがバナーの呼び出しタグです。(b-=0の0の部分は0~2までTBPごとに違うと思いますのでご確認下さい)
これを<div class="bloglist">~</div>の外に出せばスクロール外になります。
お返事ありがとうございます。
TBPのやり方は分かりました。
BPの方も同じやり方でしょうか?
違うのであれば教えてください。
すみません・・・。
●ちむ。さん
ソース見るとわかると思いますが、BPのほうにはバナーのタグはついていません。
BPの呼び出しリストの中に含まれているためです(このバナーの表示はBPの設定による)
どうしても外に出したければ、自分のアドレス調べて普通にアンカーとイメージタグ使ってテンプレに書き込めばよいかと(´ω`)
ユヅさんこんにちは!
ご質問なのですが、このスクロールバーはRECENT COMMENTSにも使えるでしょうか?
RECENT COMMENTSが1番長くなるので すっきりさせたいのですが…。 お忙しいところ申し訳ありませんが ご指導いただきたくお願い致しますm(._.)m
ユズさんもう1つ…すみません★
あたしも記事の文字が途中消えたりしていたので、div.entryとdiv.entry_moreの中にwidth:370px;を書き加えました。雨色ドロップを使わせていただいていますが div.entryはwidth:400px;で綺麗に表示されるようです。 ←これを行った後、新規記事を書き込む時に絵文字が消えてしまいました^^;
ゲストのコメントには反映されている様子★ プラグインを1度外して もう1度チェックを入れて再構築してみましたが×…。
原因わかりますでしょうか?
すみませんURLを忘れていました^^;
●hanakoさん
こんにちは。
応用でどこにでも使えます。
コメントリストならば、
<div class="bloglink">{recent_comment_list}</div>
という形にすればよいです。
絵文字プラグインはうちとは無関係なので、その動作についてこちらではサポートできませんし分かりかねます。
現状で私に言えることは、CSSのentry_body,entry_more,entryにそれぞれwidthを指定しただけなら、エントリーの横幅のサイズを固定しただけで、他に関係するものではありません。
絵文字プラグインがどういう仕様かは知りませんが、CSSやHTMLの書き間違いや使用しているスクリプトや画像のパスやパーミッションの確認などをされてはどうでしょう。
ユズさんお返事ありがとうございます^^
絵文字の方、DLしなおして入れ込んだら反映されました! ご迷惑をおかけしました^^;
スクロールバー 設置頑張ってみますね♪ ありがとうございました!
ユズさん何度も申し訳ありませんm(._.)m
設置頑張っているのですが どうしても[RECENT COMMENTS]のタイトル?!部分まで入ってしまいます^^;
<!-- BEGIN recent_comment -->
<dl class="recent comment">
<dt id="commentname">RECENT COMMENTS</dt>
<dd id="commentlist">{recent_comment_list_tree}
</dd>
</dl>
<!-- END recent_comment -->
の色んな部分に入れて試してみましたが…^^;
どこの部分に入れ込むと良いでしょうか??
●hanakoさん
1つ前のレスで、
<div class="bloglink">{recent_comment_list}</div>
と書いております。
独自タグをはさむのですから、
<dd id="commentlist"><div class="bloglink">{recent_comment_list}</div>
</dd>
となります。
ツリー化される場合は_treeにして下さい。
ユズさん 毎度毎度申し訳ありません^^;
出来ました…♪
ありがとうございました!これですっきりしました!!
ユヅさん、こんにちは。初のsb設置でこちらの方法を挑戦して無事できました!分かりやすかったです。
で、質問がありまして。
同じ質問が出ていると思うのですが、TBPでバナーがスクロール内に入ってしまう件です。
解答通り<div class="bloglist">~</div>の外に出すのですがバナーが消えてしまうのです。</dl>の外に出したり、最初に置いたり、バナー表示の部分をいろんなところに置いたのですが、どれもバナーが消えてしまいます。
これはテンプレートによってそうなってしまうのでしょうか。どうにもこうにも出来ないのでユヅさんのお知恵を是非お借りしたく…。お願いします。<(_ _*)>
くまんたさん>
いまTBPの呼び出しソースを見てきたんですが、同じ方法ではできなくなってますね。強制的にブロックの中に(リストのすぐ下)に表示させるように位置が固定されていました。これはTBP側が強制的に行っているので、こちらで回避することはできません。
ただ、バナーは画像ですので、IMGタグで呼び出せばどこにでも貼ることができます。今ご自分でアップされているバナー画像を使ってもいいし、TBP側のアドレスを調べたいのならリストのバナー画像のプロパティを見ればわかります。
例えば下におきたいのならHTMLは
<div class="scroll">TBP呼び出しタグ</div>
<img src="バナー画像のアドレス" alt="TBPバナー" />
このままだと、バナーが2つかぶるので、CSSでリストで強制的に出てくるバナーを非表示にします。
div.blogpeople-tbp-credit img {
display:none;
}
こんなかんじでいかがでしょ。
はじめまして、
検索からとんでまいりました、足立れいこと申します。
早速で悪いのですが、
ご質問させていただいてもよろしいでしょうか?
貼ってあるHPを今作成中なのですが、
「Song」→「青春学園」とすると、右側に曲のタイトルが表示されると思うんですね。
その右側だけスクロールバーがないので、下の記事がみれなくなってしまっています。
どのようにすればいいでしょうか…?
分かりづらくて申し訳ありません。
何卒、よろしくお願いします。
足立さん>
えーと、別にこの記事の方法を応用で使っていらっしゃって質問されてるわけじゃないんですよね…?
フレームのスクロールをnoに設定されていらっしゃるとかそういうオチでは…(・ω・)?