リンク管理サービスの草分け的存在 BlogRolling リニューアル
リンク管理サービス「BlogRolling」がリニューアルしました。
リンク管理サービスといえば、国内では「BlogPeople」が有名ですが、「BlogRolling」は、その草分け的存在といえるでしょう。これらのサービスを利用してリンクリストを作成すれば、更新順にリストを並び替えてくれたり、新着表示をしてくれます。
当サイトでも、BlogRolling を使って、テンプレート利用ユーザーの方を登録させて頂いてました。現在は多忙のため更新していませんが、そのままリンクのページに掲載していたところ、リスト全体が文字化けしている、という報告を頂きました。
今年初めに BlogRolling にログインしようとしたら、リニューアル中でしばらくログインできなかったのですが、先日ようやくリニューアルが完了したようです。
数年前からブログをやっている方には過去のサービスかもしれませんが、最近ブログを始めた方には意外に新鮮かもしれないという勝手な解釈で、一応紹介しておきます。
１．BlogRolling のアカウント登録
BlogRolling の左サイドバーにある、Create account をクリック。
メールアドレス・パスワード・セキュリティコード（表示されている画像の中の歪んだ文字）をそれぞれ入力して、「Register me」をクリック。
登録が成功したらダイアログの「OK」をクリック。
登録したメールアドレスに確認用のメールが送信されるので、メールに掲載されているURLをクリック。これで登録されます。
２．BlogRolling の設定
前の作業で表示された画面からログインします。
最初の画面で、まず、リンクリストを作成する前準備として、ブログロール名とリンクリストを使用するURLを設定し、「Submit」をクリックします。「Advanced Options」をクリックすれば、ブログロールの詳細な表示方法を設定できます。
次に、作成したブログロールに、リンクを追加します。「Add/Edit Links」をクリックします。
「Add」をクリックします。
追加したいサイトのサイト名やURLなどを設定して、「Save」をクリックします。
これで追加されました。リンクは好きなだけ追加できます。
３．BlogRolling をブログに表示
左メニューの「My BlogRolls」をクリックした後、「Get BlogRolling Code」をクリック。
「JavaScript」の「Click to select the code」をクリックし、すぐ下に表示されているscript 要素を選択状態にして、コピーします。
あとは、script 要素を、ブログのテンプレートなどの、リンクリストを表示したい位置に貼り付ければ完了です。下は、script 要素だけを index.html として作成した場合の表示です。さきほど登録したリンクが表示されます。
以上です。ブログのテンプレートなどにリンクを直接書いている方は是非お試しください。
「小粋な UserList」不具合のお知らせ
当ブログのテンプレートご利用者の方をリスティングしている「小粋な UserList 」ですが、現在下記の事象が発生しています。
- リストが更新されていない
- リストが文字化けする
１．「小粋な UserList」とは
「小粋な UserList」は、冒頭にも記したとおり、当ブログのテンプレートご利用者の方を登録したリンクリストで、グローバルナビゲーションの Link をクリックした先にある「Template Users」がそうです。
このリンクリストは BlogRolling を使用しており、登録しているブログが更新されると（厳密には BlogRolling のPIng サーバーに更新通知が送信されると）、リンクリストの先頭に該当のブログが表示されます。BlogPeople のリンクリストもこれと同じ仕組みです。
「小粋な UserList」の詳細はテンプレートのページの中ほどに記載しています。
２．不具合の原因
BlogRolling が Blogrolling 2.0 として生まれ変わるようで、そのため、現在機能停止中となっています。
BlogRolling の管理画面にはログインできるのですが、編集作業などができません。
３．「小粋な UserList」設置されている方へ
BlogRolling のサイトではまもなくサービスが開始されるようです。回復しましたらブログにて周知致しますので、そのままにしておくか、一旦「小粋な UserList」を外しておいてください。
BlogRolling にスクロールバーをつける
以下、カスタマイズ方法です。 |
１．blogroll を div タグ等で括る
下記のように blogroll を表示するタグを div 要素で括り、id 属性 hogehoge を div 要素に記述してください。
<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>Serena Bach で定義型リスト（dl - dt - dd）を使っている場合は、下記のように dd 要素の中に div 要素を与えてください。
<dl class="xx">
<dt id="xxname">LIST</dt>
<dd id="xxlist">
<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
</dd>
</dl>２．表示タグにスクリプトの追加
下記のスクリプト（青色部分）を、１項で修正したタグの下に追加してください。
<div id="hogehoge">
<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=xxxxx"></script>
</div>
<script type="text/javascript">
<!--
id = 'hogehoge';
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
tag1 = tag1.toUpperCase();
}
tag2 = 'BlogRolling';
nodes = document.getElementById(id).innerHTML;
data = '';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
if(list[i].indexOf('<br><br>') != -1) {
list[i] = list[i].replace(/<br>/,"");
}
if(list[i].indexOf(tag2) != -1) {
data += '</div><div class="blogroll-powered-by">' + tag1 + list[i];
} else {
if(counter){
data += tag1;
}
data += list[i];
}
counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>赤色で示した
id = 'hogehoge';ですが、hogehoge の部分に、１項で設定した id 属性と同じものを設定してください。
３．スタイルシートの設定
BlogList用のCSSとして、スタイルシートに下記を追加します。
.blogrollmain {
overflow: auto;
height: 200px;
}
.blogroll-powered-by {
margin-top: 5px;
margin-bottom: 0px;
}スクロールバーの高さを変える場合は
.blogrollmain {
overflow: auto;
height: 200px;
}の赤色部分を修正してください。
