TopMovable Typeカスタマイズサイドバー > 2005年5月
2005年5月19日

MyBlogList にスクロールバーをつける(改)

May 19,2005 8:15 PM
Tag:[, , , , ]
Permalink

MyBlogListのリンクリストにスクロールバーをつけるカスタマイズです。(改)マークはJavaScriptによってクレジットバナーおよび「ListMe」をスクロールバーの外に追い出すことを指しています。

BlogPeopleのリンクリストにスクロールバーをつける場合は、div タグを付与する設定でリンクリスト表示用コードを生成すれば、div タグに予め指定されたクラス属性に対するスタイルを与えることでバナーをスクロールバーから外に追い出せたのですが、MyBlogListの場合は表示用コード生成でそのようなオプションが用意されていないため分割ができません。リストはバナーや「ListMe」を含め、単純に a タグが並んでいるだけのようです。

ということで、バナーおよび「ListMe」をスクロールバーの外に完全に追い出すためのスクリプトを作りました。スクロールバーの一番最後にも「by MyblogList」を表示しません。
具体的には BlogPeople と同様、リンクリストとバナーおよび「ListMe」をそれぞれ <div>~</div> タグで括り、個別にスタイルを与えることができるようにしました。リストの一番最初と最後に "<div>" および "</div>" をつけるのは簡単ですが、単純に並んだ a タグの途中でどのようにして div タグを挿入するかで悩みました。結局、a タグ("<a")で分割して検索していき、クレジットバナーの img タグが出現した時点で "</div><div>" を付与、「ListMe」については「MyblogList」という文字を検索して同様に "</div><div>" を追加という方法に落ち着きました。クレジットバナーに画像を使っていない場合も考慮しています。
2005.05.20 追記:リストへの日付や時刻の付与、および画像を用いたNEW装飾にも対応できるように改良しました。
以下カスタマイズ方法です。

1.MyBlogList 表示用タグの修正

各テンプレートに設定している、MyBlogList のリンクリストを表示するタグ

<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>

を div タグ等で括って

<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>

としてください。括られていない場合は、サンプルのようにタグを追加してください(タグは div でなくても大丈夫と思いますが、他のタグについては動作未確認です)。
hogehoge の部分は、任意の id 属性名を設定してください。id 属性名はページ内で一意になる名称にしてください(=他の id 属性名と重複しないこと)。
追加が終わったら保存・再構築してください。

2.テンプレートにJavaScript追加

1項の MyBlogList 表示用タグの下に、下記のスクリプト(青色)を追加します。

<div class="side" id="hogehoge">
<script language="javascript" type="text/javascript" src="http://list.myblog.jp/list/js…" charset="EUC-JP"></script>
</div>
 
<script type="text/javascript" language="javascript">
<!--
id = 'hogehoge';
image = 1;
 
tag1 = '<a';
if (window.navigator.userAgent.indexOf("MSIE") != -1) {
    tag1 = tag1.toUpperCase();
}
if (!image) {
    tag2 = '>by MyblogList<';
} else {
    tag2 = 'myblog_list_banner';
}
nodes = document.getElementById(id).innerHTML;
data = '<div class="mybloglist-main">';
list = nodes.split(tag1);
counter = 0;
for (i = 0; i < list.length; i++) {
    if(list[i].indexOf('window.open') != -1) {
        data += '</div><div class="mybloglist-listMe">' + tag1 + list[i];
        break;
    }
    if(list[i].indexOf(tag2) != -1) {
        data += '</div><div class="mybloglist-powered-by">' + tag1 + list[i];
    } else {
        if(counter){
            data += tag1;
        }
        data += list[i];
    }
    counter++;
}
document.getElementById(id).innerHTML = data + '</div>';
//-->
</script>

スクリプトの3行目の右辺(赤色)には、1項で設定した id 属性名を設定してください。またクレジットバナーに画像を用いず「by MyblogList」を表示している方は、4行目の赤色を

image = 0;

に変更してください。
追加が終わったら保存・再構築してください。

3.CSS設定

下記のクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。場所はどこでも大丈夫です。

.mybloglist-main {
    overflow: auto;
    height: 300px;
}
 
.mybloglist-powered-by {
    margin-top: 10px;
    margin-bottom: 0px;
}
 
.mybloglist-listMe {
    margin-top: 0px;
}

上から順番に、リンクリスト用・クレジットバナー用・「ListMe」用のスタイルです。内容は適宜変更してください。
もし同一名称のクラスセレクタがすでに存在する場合は、クラスセレクタを任意の名称に変更してください。その場合、2項のスクリプトに埋め込まれた3項のクラスセレクタ名を変更した名称に修正してください。
追加が終わったら保存・再構築してください。

以上です。Windows2000・XPのIE6.0/Netscape7.0/Firefox1.0/Opera7.23・8.0で正常に表示されることを確認しています。

2005.05.19 追記
スクリプトに誤りがありましたので修正しました。

2005.05.20 追記
先頭に日付・時刻が表示されている場合に不具合がありましたので修正しました。これに伴い2項のスクリプトおよび説明を修正しました。またNEW装飾に画像を用いることができるように改良しました。

Comments [13] | Trackbacks [4]
2005年5月11日

BlogPeople のリンクリストにスクロールバーをつける

May 11,2005 11:58 PM
Tag:[, , , , ]
Permalink

BlogPeople のリンクリストにスクロールバーを付与するカスタマイズを紹介します。参考記事は BlogPeople 主催者の

Modern SyntaxBlogPeopleリスト出力形式の変更のお知らせ

です。ありがとうございました。
かなり以前より色々なサイトでカスタマイズ方法が紹介されていますが、ここでは仕組みの詳細についてかみくだいて書いてみました。

1.CSSでスクロールバーを表示する方法

基本的手法として、サイドバーのメニューリストにスクロールバーを表示する方法は、

.hogehoge {
    height: 200px;
    overflow: auto;
}

というクラスセレクタを作り、メニューリストを div タグで括って

<div class="hogehoge">
     :
 (メニューリスト)
     :
</div>

とクラス属性 hogehoge(青色)を与えることで、メニューリストが200pxを超える長さになるとスクロールバーが自動的に付与されます。
overflow は指定したサイズ(ここでは200px)にコンテンツが入らない場合にはみ出した部分の表示方法を指定します。auto は「ブラウザ依存」を意味しますが一般的にはスクロールバーが表示されます。overflow: scroll; という指定も可能ですが、この指定では横スクロールも表示されるのでお勧めできません。

ただし BlogPeople のリンクリストでこの方法をこのまま適用して、リンクリスト表示用コード(青色)を

<div class="hogehoge">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

と括ってしまうと、一番下に表示されるクレジットバナーがスクロールバーの中に含まれてしまい、エレガントではありません。

現在、BlogPeople のリンクリスト用のコードには予めクラス属性が与えられています(上記の表示用コードの状態では目視できません)。具体的には、リンクリスト用のコードがHTMLとして表示される時には、

<div class="blogpeople-main">
      :
   (リンクリスト)
      :
</div>
<div class="blogpeople-powered-by">
      :
 (クレジットバナー)
      :
</div>

というタグに変換され、div タグには blogpeople-main と blogpeople-powered-by というクラス属性(青色)が設定されています。要するに、div タグがリンクリストとクレジットバナーでそれぞれ独立しているので、この構造を利用してリンクリストのみにスクロールバーを設定することができます。以下、設定方法です。

2.出力形式の選択とコード生成

上記のように表示にするためには、BlogPeople 会員ページで「表示形式の設定」の出力形式を「DIVタグ形式」にします。選択したら一番下にある「コードの作成/更新」をクリックします。

3.作成コードをテンプレートに設定

生成されたコードをマウスコピーし、ブログのテンプレートの任意の位置に貼り付けます。

4.CSS設定

1項で説明した、リンクリスト用のクラス属性 blogpeople-main とクレジットバナー用のクラス属性 blogpeople-powered-by に対応するクラスセレクタをスタイルシート(styles-site.css)に新たに定義します。

.blogpeople-main {
    height: 300px;
    overflow: auto;
}
 
.blogpeople-powered-by {
       :
 (クレジットバナー用のスタイル)
       :
}

この設定を行うことで3項でテンプレートに設定したコード

<script language="javascript" type="text/javascript" src="・・・"></script>

は div タグで括らなくても、リンクリストが一定の長さになるとその部分にだけスクロールバーが付与され、クレジットバナーがスクロールバーの外側に表示されます。私の場合は

<div class="side">
<script language="javascript" type="text/javascript" src="・・・"></script>
</div>

とクラス属性 side で blogpeople-main 以外の全体のスタイル(フォント等)を指定しています。クレジットバナーのスタイル(margin 等)を特に定義する必要がなければ blogpeople-powered-by の定義は不要です。

Comments [20] | Trackbacks [20]
2005年5月 2日

個別エントリーアーカイブに同一カテゴリーのエントリーを表示

タイトルの通り、個別エントリーアーカイブで同一カテゴリーに属するエントリーの一覧を表示するカスタマイズです。公開テンプレートのカテゴリーアーカイブで同一カテゴリーのエントリー一覧を表示していますが、本カスタマイズを行うことで同じものを個別エントリーアーカイブに表示することができます。

一番最初にこのカスタマイズを発見したのは実はかなり昔で、下の記事です。

今日まで、そして明日から。-3rd spiral-個別記事のページにカテゴリのエントリ一覧を表示する
87designThis Category Entries (easy)(元記事)

ご近所サイトさんでは下記がありました(とりこぼしご容赦ください)。

ぐーたら on MT個別記事にその記事の属するカテゴリーの記事一覧を。
Magic White個別記事にカテゴリー内記事一覧表示
Stupid ExcuseThis Category Entries
やむやむThisCategoryEntriesですと!?

以下、カスタマイズ方法です。

1.MTTagInvoke プラグインをダウンロード

下記のサイトよりプラグインをダウンロード・解凍して、0.9 の場合は MTTagInvoke.pl を plugins フォルダに配置(またはアップロード)、1.0の場合は MTTagInvoke フォルダごと plugins フォルダに配置(またはアップロード) します。

MT ExtensionsMTTagInvoke

アップロード後、Movable Type 管理画面の

メイン・メニュー > システム・メニュー > プラグイン

でプラグインの一覧が表示されますので、その中に「MTTagInvoke」が表示されていればOKです。

2.テンプレートの設定

個別エントリーアーカイブテンプレートのサイドバーに下記のタグを設定します。上記のサイトからの情報をまとめて3パターン用意してみました。緑色は公開テンプレート用の設定を示しています。

注:MTTagInvoke プラグインは2006年9月7日、Movable Type 3.3 対応のため、1.0 にバージョンアップされました。これによりプラグインで使用されているMTタグの名称が下記のように変更されています。サンプルリストは 1.0 に合わせた内容に変更しましたので、もし 0.9 を使っている場合は、記事のサンプルリストをご利用になる際、適宜読み替えてください。

MTTagInvoke プラグインMTタグ対応表
1.0(現在)0.9
MTTagInvokeNameMTTagName
MTTagInvokeAttributeMTTagAttribute
MTTagInvokeContentMTTagContent

2.1 同一カテゴリーに属するエントリー一覧を表示

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2.2 表示するエントリー数を指定

2.1に青色部分を追加します。サンプルは最近の5件を表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">5</MTTagInvokeAttribute>
<MTTagInvokeContent>
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTTagInvokeContent>
</MTTagInvoke>
</div>

2.3 エントリー毎にコメントを表示

2.1または2.2に青色字部分を追加します。サンプルは最近の5コメントを表示する設定です。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries"> 
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTIfNonZero tag="MTEntryCommentCount">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
<MTComments lastn="5">
└ <a href="<$MTEntryLink$>#<$MTCommentID$>"><MTCommentAuthor></a><br />
</MTComments>
</MTIfNonZero>
</MTTagInvokeContent>
</MTTagInvoke>
<div class="side">

2.4 ツリー化&日別表示をつける

「最近のエントリー」の日別表示を適用させてみました。サンプルは最近の10件を表示する設定になっています。lastn 指定の行を外せば全エントリーが表示されます。タグは ul -li のリスト形式になっていますのでご注意ください。

<div class="sidetitle">
Entries of this Category
</div>
 
<div class="side">
<MTTagInvoke tag_name="MTEntries">
<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>
<MTTagInvokeAttribute name="lastn">10</MTTagInvokeAttribute>
<MTTagInvokeContent>
<MTDateHeader>
<ul><$MTEntryDate format="%m/%d"$>
</MTDateHeader>
<li><a href="<$MTEntryPermalink$>" title="<$MTEntryTitle$>"><$MTEntryTitle$></a></li>
<MTDateFooter>
</ul>
</MTDateFooter>
</MTTagInvokeContent>
</MTTagInvoke>
</div>

MTTagInvoke プラグインはMTタグのタグアトリビュート(属性)に対してさらにMTタグを利用できるというものです。一番目のサンプルを例にすると、本来書きたいMTタグは

<MTEntries category="<$MTEntryCategory$>">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>

となります。これは「最近のエントリー」表示用タグで、これに赤色部分で「表示されているエントリーのカテゴリーと同じエントリーを表示」を指定しているのですが、タグアトリビュート category の指定にMT変数タグ <$MTEntryCategory$> は指定できません(再構築でエラーとなります)。そこで MTTagInvoke プラグインを用いて、MTEntries の代わりに MTタグ名の指定

<MTTagInvoke tag_name="MTEntries">

を行い、続いて「タグアトリビュート category に <$MTEntryCategory$> を使う」という指定、

<MTTagInvokeAttribute name="category"><$MTEntryCategory$></MTTagInvokeAttribute>

を行うことで、

<MTEntries category="<$MTEntryCategory$>">

と同じ効果を得ることができる訳です。ここではタグアトリビュートをひとつだけ指定していますが、複数指定することも可能です。

2006.05.25 追記
2.3項のタグで、コメントがないエントリーが表示される不具合を修正しました。

2006.10.02 追記
MTTagInvoke 1.0 の記述を追加しました。

2006.11.23 追記
サンプルリストを MTTagInvoke 1.0 にあわせました。

Comments [29] | Trackbacks [21]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner


AMN
Categories
Monthly Archives
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3