blog*citron

date: 051214

category:: tips
author:: ユヅ

プルダウン式ListMe！ver1.2

色々なListMeをつけるで、いろんなサービスへのListMeボタンの作り方を紹介しましたが、更にそれをプルダウン式にまとめてみました。いくつ増えても縦に長くならないし、その分サイドバーのスペースも空けられます(*´ー`*)
HTMLの編集ができればどのblogでもOKのコピペで使えるListMeセット。 BlogPeople、BlogPeopleTags、はてなアンテナ、はてなRSS、はてなブックマーク、Bloglines、Yahoo!RSS、ドリコムRSSの8種類に対応しています。

※MyBlogListは2005/12/12でリコムRSSへサービス統合。
2006/3月で完全停止。要コード変更。詳細はドリコムRSSにて。

ver1.1 (2005.09.23)
・はてなRSSの登録URL変更に伴いソースを修整。
・はてなブックマークに対応。

ver1.2 (2005.12.14)
・ドリコムRSSにサービス統合されたMyBlogListを削除。・ドリコムRSSに対応。

HTMLの編集

プルダウンをつけたいところに下記のソースをコピペして下さい。
★ブログのURL★、★サイト名★、★RSSのURL★をそれぞれ自分のサイトに合わせたものに書き換えておきましょう。
不必要なものがあれば、その行の<option～から</option>までを削除。
※「'」や「;」など記号を消してしまわないように注意！

<form action="./" name="topic" id="topic">
<select name="list" size="1" class="listme">
<option value="javascript:void(window.open('http://www.blogpeople.net/addlink.jsp?n=1&amp;u=' + escape('★ブログのURL★') + '&amp;ti='+escape('★サイト名★'),'blop','scrollbars=no,width=475,height=350,left=75,top=175,status=yes,resizable=yes'));">BlogPeople</option>
<option value="javascript:void(window.open('http://tags.blogpeople.net/tags_addlink.jsp?u='+escape('★ブログのURL★')+'&amp;ti='+escape('★サイト名★'),'BlogPeopleTags','scrollbars=no,width=480,height=320,left=100,top=100,status=yes,resizable=yes'))">BlogPeopleTags</option>
<option value="http://a.hatena.ne.jp/append?★ブログのURL★">はてなアンテナ</option>
<option value="http://r.hatena.ne.jp/append/★RSSのURL★">はてなRSS</option>
<option value="javascript:void(window.location='http://b.hatena.ne.jp/add?mode=confirm&amp;title='+escape('★サイト名★')+'&amp;url='+escape('★ブログのURL★'));">はてなブックマーク</option>
<option value="http://www.bloglines.com/sub/★ブログのURL★">Bloglines</option>
<option value="http://e.my.yahoo.co.jp/config/jp_promo_content?.module=jp_rss&amp;.url=★RSSのURL★">MyYahoo!RSS</option>
<option value="javascript:void((function(){var w=window.open('http://rss.drecom.jp/shortcut/add_rss?url='+encodeURIComponent(location.href),'add_rss','scrollbars=yes,width=450,height=500,left=100,top=100,status=yes,resizable=yes');w.focus();})());">DrecomRSS</option>
</select>
<input value=" ListMe! " type="button" onclick="location.href=list.options[list.selectedIndex].value" class="listme_sub" />
</form>

CSSの編集

CSSにはこちらをコピペ。（無くても動きます）
文字色や背景色などスタイルは自由に変更して下さい。

/* ListMeメニュー */
select.listme {
font-size:10px; /* 文字サイズ */
color:#666666; /* 文字カラー */
background:#fff; /* 背景色 */
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","Verdana","ＭＳＰゴシック","sans-serif"; /* フォント指定 */
}

/* ListMe登録ボタン */
input.listme_sub {
font-size:10px; /* 文字サイズ */
color:#fff; /* 文字カラー */
background:#808080; /* 背景色 */
border:none; /* ボーダー設定 */
font-family:Verdana,Arial,sans-serif; /* フォント指定 */
}

※日本語を含むフォームで英語フォントを優先指定すると、Macで文字化けするのでご注意。登録ボタンの方は「ListMe!」など英語だけなら英語フォントで大丈夫ですが、日本語を使う場合はselect.listmeと同じfont-family指定にして下さい。

ListMeのリンクはサイドバーの上に置かれることが多いと思うのですが、増えてくるとだんだん長くなります。すると、エントリーやカテゴリーなど訪問者が最初に見ることの多いリストが、その分だけ下がってしまいます。
エントリーリストやカテゴリリストは、出来るだけスクロールをしない状態でも手が届く場所にあるといいなぁと個人的な好みから、何とか短くしちゃろうとプルダウンに押し込めることにしました（笑）
ListMeがあると「このブログいいな」と思った時にすぐ登録できるので、リピーターさんが集まりやすいんじゃないかなと思います＾＾

Close

date: 051212

category:: -
author:: ユヅ

母上の武勇伝

先日、おいでよ！どうぶつの森を探して、母上に用事のついでに梅田のソフマップに寄ってもらったのです。大阪梅田のソフマップというのは駅の裏手側で、郵便局以外は特に何も無かったところなのですが、それが綺麗な飲食街にに大変身。
その一番奥に新しい梅田ソフマップが移転していました。

イタリアンやトンカツやら美味そうな店が立ち並ぶ中、辿り着いたソフマップ。
そこで母上が意気揚々と大きな声で放ったこの一言。

date: 051211

category:: tips
author:: ユヅ

カテゴリーのプルダウン化

リクエストのあったカテゴリーのプルダウン化。
JavaScriptを使って、親カテゴリ名をクリックするとサブカテゴリを表示させます。JavaScriptを切った場合は、プルダウンはできませんが親カテゴリのカテゴリリストからそのまま飛べるようになっています。

※注意
テンプレートに直接書き込む形になるので、カテゴリごとの記事数の表示は行われません。カテゴリの追加や削除をした場合はテンプレートの方も修整して下さい。

sb、SereneBachどちらでも使えます。
その他のブログツールでも、HTML編集ができてカテゴリーのURLが分かるものならば大抵は出来ると思います。
CSSで見た目も自由にカスタマイズできます。

▼JavaScript | <head>と</head>の間。
<script type="text/javascript">  </script>

▼HTML | <body>と</body>の間で任意の場所。
ulが2つあって親カテゴリのliの中にサブカテゴリのulとliが入る構成。

▼親カテゴリの増やし方
との間は親カテゴリの数だけ繰り返し、treeMenu1、treeMenu2…と通し番号をつけます。
▼サブカテゴリの増やし方
サブカテゴリのliを必要な数だけ繰り返します。

<li><a href="{site_cgi}?cid=●">サブカテゴリ1</a></li>

▼サブカテゴリがない場合
単独の親カテゴリはこの１行だけで構いません。

<li><a href="{site_cgi}?cid=●">カテゴリ1</a></li>

▼カテゴリーURLについて
cid=●はcid=1やcid=12など、カテゴリIDが入ります。カテゴリIDは管理画面のカテゴリーリストに表示されていますので、カテゴリー名に対応したidを入れて下さい。
sb/SB以外の方はリンク先URLを各カテゴリーのURLにして下さい。

※HTMLの一例
サブカテゴリのあるPhotoと映画、サブカテゴリなしの日記の組合せ

▼CSSの編集 | 必須ではありませんのでお好みで。
サブカテゴリの頭を1文字分ずらすのと、アイコンをつけたい時のCSS。

文字色はリンク色になるので指定する必要はありません。フォントサイズやマージン等、親要素で指定されていなければお好きなように付け足して下さい。
最後の/* 位置調整とリストマーク消し */については、sb/SBのテンプレートではCSSにあらかじめ入っていることが多いのでその場合は不要です。blog*citronのテンプレートでも最初から書いてあるので加える必要はありません。
Close

date: 051210

category:: blog,sb > sb
author:: ユヅ

EUCのsbからUTF-8のSBに移行する

文字コードEUCのsbから、文字コードUTF-8のSereneBachへの移行ログ。
sbからSimpleXML形式で書き出し→SereneBachでインポートでも出来るんですが、エントリーIDが0から順に振り直されるためにエントリーIDが変わり、過去の記事のURLが変わってしまいます。
個別記事へのリンクが多いblogにとってはあまり歓迎できない事態。
URLを変更せずにアップグレードをしてみよう。
※sb1.16RとSereneBach2.03Rで行いました。

date: 051209

category:: blog,sb > sb
author:: ユヅ

sbからSereneBachへ

どっしり重い腰をえっちらおっちら上げてSBに移行。
冬には寒々しい色だったので色も若干変更。
構造はほぼ変わっておりません(´ω`)たまには赤系。
~~クリスマスソングを聴きながらやったからとか断じてそんなことは。~~

▼変更点その１
海外の友人のためにEUC→UTF-8化。
手順がややこしいのでひたすら面倒でした…。
一番面倒だろうと思われるデータのEUC→UT-8の変換作業×300件分。
エディタで開いて読み直して保存して…の手作業を3件めで挫折。
どうにか楽できないかと妙なところを頑張ったおかげで、1分かからずに全て変換することができました（笑）エントリ化しておこうかなー

▼変更点その２
カテゴリーはプラグインがないので自分でプルダウンにしました。
畳まないとかなり縦長になってしまうので…。
JavaScriptを切るとサブカテゴリは出ませんがメインカテゴリには飛べます。
タイトルリスト表示がなくなりましたが、テンプレートとカスタマイズのカテゴリだけリスト表示モードをつけてもいいかなぁと考えてはいます。

▼変更点その３
記事のWEB拍手を分かりやすいようにアイコンに。
~~跪け崇めろ奉れ~~…ではなく、質問される方が公開できないURLを送る時に何処にあるかわかりにくかったようなので。

▼変更点その４
リンクリストの方にTBPを2つ追加。
旬のXmasピープルと、どうぶつの森ピープルです（やる気満々）