• ブログタイトルのリンクは同じタイトルで開いてしまう。
• ブログタイトル前のアイコンからはフィードの内容が開いてしまう。

という問題がありますので、KB Advanced RSS Widgetを改造します。

KB Advanced RSS Widgetは
wp-content/plugins/kb-advanced-rss-widget/index.php
でWordPressのバージョンにより使われるファイルが違います。
今回、WordPressはver.2.9.1を使用しましたので、
wp-content/plugins/kb-advanced-rss-widget/versions/wp-2-8.php
を変更します。

この、435行目で「ブログタイトルのリンク」が生成されていますので、

$this->title = '<a href="'. $this->link .'">'. $this->title .'</a>';

を

$this->title = '<a href="'. $this->link .'"  target="_blank">'. $this->title .'</a>';

と修正します。

また、439行目でアイコン部分が生成されていますので、

$this->title = '<a class="kbrsswidget" href="'.$this->url.'" title="Syndicate this content"><img width="14" height="14" src="'.$this->icon.'" alt="RSS" style="background:orange;color:white;" /></a> '.$this->title;

を

$this->title = '<img width="14" height="14" src="'.$this->icon.'" alt="RSS" style="background:orange;color:white;" /> '.$this->title;

と修正しました。

これで、

• ブログタイトルのリンクが別ウィンドウで開く。
• ブログタイトル前のアイコンはリンクなし。

となりました。

そこで、色々なブログのRSSをサイドバーで表示する必要があり、KB Advanced RSS Widgetというプラグインを導入&改造しました。
なかなか日本語の情報もなかったので、メモします。

導入はダッシュボードのプラグイン>新規追加からKB Advanced RSS Widgetを検索してサクッと入れてしまいました。

有効化すると、外観>ウィジェットにKB Advanced RSS Widgetが出てくるので、これをサイドバーにドラッグ&ドロップして設定します。

私が行った設定は

Title  適当なブログタイトル名
RSS feed URL  該当ブログのRSSを取得するURL
RSS icon URL  ブログタイトル名の前にアイコンがつきます。デフォルトのままでアイコンがつくので変更してませんが、適当に変更可能です。
Number of items to display   表示する記事の数
Link title to feed URL?  チェックを入れるとブログタイトル名にブログへのリンクがつきます。
Hide widget when feed is down?  フィードが取れなかったら、表示しないってことでしょう。チェック入れときました。

で、設定のポイントは

<li><a class=’kbrsswidget’ href=’^link$’ title=’^description$’>^title$</a></li>

の部分で、http://wordpress.org/extend/plugins/kb-advanced-rss-widget/other_notes/
に説明があります。

^link$、description$、^title$とか言うのはRSSの中で使われているタイトル（変数名？）です。
これにオプションをつけることで、表示内容をコントロールできます。

RSSでタイトル（変数名？）がどのように使われているかを見るには、ブラウザのリンクに

http://フィードを表示させるWPブログのURL/?kbrss=該当ブログのRSSを取得するURL

と入力することで該当ブログのRSSの中身が確認できます。
この時、フィードを表示させるWPブログには「管理者」でログインしている必要があるようです。

ちなみに、私の場合、エキサイトブログのRSSとMovableTypeのブログのATOMをテストで使ったところ、

■エキサイトブログのRSSのフィードの中身

[title] => 記事タイトル
[link] => 記事URL
[guid] => 記事URL
[description] =>記事内容

■MovableType ATOMのフィードの中身

[title] => 記事タイトル
[link] => 記事のリンク
[id] =>
[published] => 記事発効日時
[updated] => 記事修正日時
[summary] => サマリー
[author] =>
[author_name] => 記事発行者名
[atom_content] => 記事内容

となってましたので、

■エキサイトブログのRSS用の設定

<li class=’kbrsswidget’>^pubdate[opts:date=Y/m/d]$<br /><a href=’^link$’ title=’^description$’ target=”_blank”>^title$</a><br />^description[opts:trim=40]$</li>

■MovableType ATOM用の設定

<li class=’kbrsswidget’>^updated[opts:date=Y/m/d]$<br /><a href=’^link$’ title=’^summary$’ target=”_blank”>^title$<br />^summary[opts:trim=40]$</a></li>

としました。

エキサイトブログの方だけ説明すると
^pubdate[opts:date=Y/m/d]$
記事の発効日を2010/01/09の形式とする

<a href=’^link$’ title=’^description$’ target=”_blank”>
同じ画面で開かないようtarget=”_blank”を入れました。

^description[opts:trim=40]$
ブログの内容を頭から40character分表示

となります。

これで、

ブログタイトル
記事日時
記事タイトル
記事内容サマリ
記事日時
記事タイトル
記事内容サマリ
記事日時
記事タイトル
記事内容サマリ

とサイドバーに表示されるようになりました。

KB Advanced RSS Widgetの場合一つのウィジェットっで1つのフィードURLしか設定できませんので、複数のフィードを表示させるにはウィジェットを複数分設定する必要があります。

本年もよろしくお願いいたします。

前回で3カラムのリキッドレイアウトはできましたが、このままだとmain部分が狭すぎたり間延びしたりするので、min-width、max-widthを設定することにします。

ここで問題なのは、min-width、max-widthがIE6で効かないこと。
いつもの手ですが、minmax.jsを使わせてもらいます。

こちらのサイトからminmax.jsをダウンロードしヘッダー部分に

<script src="minmax.js" type="text/javascript"><!--mce:0--></script>

のように読み込みます。

HTMLは下記のように全体を#contenntsで囲み、
[HTML]

<div id="contents">
<div id="header">
		headerの中身</div>
<div id="main_wrapper">
<div id="main">
			mainの中身</div>
</div>
<div id="side1">
		side1の中身</div>
<div id="side2">
		side2の中身</div>
<div id="footer">
		footerの中身</div>
</div>

CSSで、min-width、max-widthを設定します。
[CSS]

#contents {
	min-width: 760px;
	max-width: 960px;
}

これで、IE6でもきちんと表示されるものができました。
全体としては、以下のようなイメージです。

3カラムmax&min width

一番多いパターンは

のような形ではないでしょうか。

main部分にnin,max widthを入れてもうまいこといきません。

早速検索して、参考にさせていただいたのは3カラムレイアウトで、中央を可変にするCSS(リキッドレイアウト)のページ。

サンプルもあって、丁寧に解説されています。今回はこれをもとに少し変更しました。

■基本的な考え方

3カラム リキッドデザイン 基本的考え方

基本的な考え方は上の図のようになります。

ここでポイントなのは、main_wrapperの中にmainがあり、main_wrapperに対して左右180px（side1、side2の幅）のマージンを持っていて、mainの左右にside1、2を持ってくることです。

これを実現するには、

[HTML}

<div id="main_wrapper">
<div id="main">
		mainの中身</div>
</div>
<div id="side1">
	side1の中身</div>
<div id="side2">
	side2の中身</div>

[CSS]

#main_wrapper {
	float : left;
	width : 100%
}
 
#main {
	margin: 0 180px;
}
 
#side1 {
	float : left;
	margin-left: -100%;
	width: 180px;
}
 
#side2 {
	float : left;
	margin-left: -180px;
	width: 180px;
}

とします。

#main_wrapper、#side1、#side2がfloat leftしているので、この3つは横一列に並びますが、#side1はmargin-left -100%のネガティブマージンでmain_wrapperの左側にwidth 180pxでおさまります。
#side2はmargin-left -180pxのネガティブマージンでmain_wrapperの右側にwidth 180pxで収まります。
※この時、#side2のネガティブマージンと幅は同じ必要があります。

また、#mainはfloatしていませんから、#main_wrapperに対し左右180pxのマージンで配置され、結果的に、side1、main、side2が配置されることになります。

3カラムレイアウト

実際においては、#main_wrapper、#side1、#side2がfloat leftしているので、HTMLのside2の後ろでclearするか、全体をdivで囲ってclearfixする必要があります。

次に続く>>

本日よりブログスタートします。

よろしくお願いします。