<?xml version="1.0" encoding="utf-8"?>
<feed version="0.3" xmlns="http://purl.org/atom/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xml:lang="ja">
<title>PwBlogで遊ぼう</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/" />
<modified>2008-11-23T18:38:56Z</modified>
<tagline>PwBlogのデザインをアレコレいじって遊びます。
内容は、作業の備忘録も兼ねています。
生温く見守ってやってくださいまし。</tagline>
<generator>PwBlog</generator>
<copyright>copyright (c) 2008, PwBlog</copyright>
	<entry>
		<title>Amazon アフィリエイトをもっと活用する</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59886.html" />
		<modified>2007-09-03T22:20:05Z</modified>
		<issued>2007-09-03T22:20:05Z</issued>
		<id>tag:www.pwblog.com,2007-09-03:/user/yohko/asobou/59886.html</id>
		<created>2007-09-03T22:20:05Z</created>
		<summary type="text/html">PwBlogでは、ユーザーが自分のアフィリエイトIDを使ってAmazonアフィリ....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59886.html</url>
		</author>
		<dc:subject>遊んだ内容</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[PwBlogでは、ユーザーが自分のアフィリエイトIDを使って<a href="http://affiliate.amazon.co.jp/gp/associates/join">Amazonアフィリエイト</a>を利用する事が出来ますが、PwBlogに搭載された機能より、Amazonから取得したソースを使って利用したい。  そういう時にはどうすればいいか、やってみました。<img src="http://www.pwblog.com/user/yohko/files/07090301.jpg" alt="Amazonから提供されたものを使うとこうなる" height="260" width="140" style="margin:0 3px 0 0;float:left">こちらが今回試してみる商品。 毎度毎度漫画で申し訳ないですが『BLACK LAGOON』の最新刊、6巻です。 2人目の殺戮メイドの登場にワクワク。 続きが早く読みたい♪ と、そんな事はさておき。 <div style="clear:both">これを利用して、実験してみます。</div> こんなカンジで、個別商品を紹介したいと思った時、Amazonでリンクを作成すると、以下の様なソースをくれます。  <div class="o"><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=moviedame01-22&o=9&p=8&l=as1&asins=4091570755&fc1=000000&IS2=1&lt1=_blank&lc1=0000FF&bc1=FFFFFF&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe></div> しかしPwBlogでは、iframe タグを使う事が出来ません。 <img src="http://www.pwblog.com/user/yohko/files/info.png" alt="information" height="16" width="16" style="margin:0 3px 0 0;float:left">今回のバージョンアップで追加された、リアルタイムプレビューでは表示されますが、確認画面に進むとソースがそのまま表示されます。  <div style="clear:both">どうしても上の様に表示したいと考えた場合は、以下の様にします。</div> まず、新規テキストファイルを開いて、Amazon で貰ったソースに、以下の様に書き加えます。 <div class="o"><span style="color:#009465">document.write(&#39;</span><iframe src="http://rcm-jp.amazon.co.jp/e/cm?t=moviedame01-22&o=9&p=8&l=as1&asins=4091570755&fc1=000000&IS2=1&lt1=_blank&lc1=0000FF&bc1=FFFFFF&bg1=FFFFFF&f=ifr" style="width:120px;height:240px;" scrolling="no" marginwidth="0" marginheight="0" frameborder="0"></iframe><span style="color:#009465">&#39;);</span></div> これに適当な名前を付けて、jsファイルとして保存します。 osusume.js とでもしましょうか。 と言うか、私はその名前にしました。 これをファイルアップロードでアップし、URLをメモしておきます。  Amazonアフィリエイトリンクを表示させたい部分には、以下の様に記入します。 <div class="o">＜script type="text/javascript" src="アップロードしたjsファイルのURL"＞＜/script＞</div> <span class="xxs" style="color:#FF9900">＜,＞は便宜上全角で書いています。</span> <img src="http://www.pwblog.com/user/yohko/files/info.png" alt="information" height="16" width="16" style="margin:0 3px 0 0;float:left">記事をエントリーする時の確認画面では何も表示されませんが、登録を完了させると表示されます。  <div style="clear:both">これで、Amazonから貰ったソースを利用する事が出来ます。 このBlogの右側メニューをご覧ください。 上記の方法で上手く表示されています♪</div> ただ問題は、おススメが沢山ある場合には、イチイチそれ用のjsファイルを作っていかないといけないカンジである事。 私の映画Blogは、殆どの記事からAmazonへのリンクが貼ってありますが、そういうBlogでこの方法を使うとなると……ちょっと気が遠くなりそうです。 他にもっと良い方法がないかとやってみたのですが、PwBlogでは、記事本文に JavaScript を貼る事も出来ないですし…。 そういうBlogではおとなしく、PwBlogに搭載されている機能を使っておくべきなのかも知れません。  なお、このエントリーを書くに当たって、<a href="http://www.pwblog.com/user/Noppo/kontiwa/">明けましておやすみなさい</a>のソースを参考にさせていただきました。 どうもありがとうございました。  <img src="http://www.pwblog.com/user/yohko/files/info.png" alt="information" height="16" width="16" style="margin:0 3px 0 0;float:left">2007-09-04 追記：この記事をエントリーした後、ハッと思い付いてjsファイルの方をいじってみました。 <div style="clear:both">いじくった内容は、<a href="http://www.pwblog.com/user/yohko/files/asobou_osusume.js">こちら</a>。 実際に反映されてもいます。 これなら、1箇所に複数の紹介が貼れますし、内容の変更もjsファイルを差し替えるだけですね。 ただし、<span style="color:#AC0027">jsファイルをEUCで保存するのを忘れない事。</span>たぶん文字バケします。</div> もっと早くに気付けよ…というトコですが、これが私のクオリティ……。]]></content>
	</entry>
	<entry>
		<title>テキストエリアの中身を1クリックで全選択</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59806.html" />
		<modified>2007-09-02T23:19:52Z</modified>
		<issued>2007-09-02T23:19:52Z</issued>
		<id>tag:www.pwblog.com,2007-09-02:/user/yohko/asobou/59806.html</id>
		<created>2007-09-02T23:19:52Z</created>
		<summary type="text/html">PwBlogではtextareaが使えないと知って、しょんぼりしてしまった私です....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59806.html</url>
		</author>
		<dc:subject>遊んだ内容</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[PwBlogではtextareaが使えないと知って、しょんぼりしてしまった私ですが、せっかくですから見つけた情報は残しておきたいと思います。<a href="https://www.google.com/adsense/login/ja/index.html">Google AdSense</a> で広告を作る時、最後に、出来たコードを自分のサイトにコピー＆ペーストするのですが、そのフォームがとてもよく出来ている。テキストエリア内のどこでも1クリックすると、全てが選択出来るのです。 テキストエリア内全てを選択するには、Ctrl + A （Macの場合は、リンゴマーク ＋ A）で出来ますが、Google で見た時これイイなぁ、と思いまして。 この仕組みが判らないか検索したところ、ありました。 <a href="http://hori-uchi.com/archives/000382.html">クリックするとすべて選択されるテキストエリア</a> textarea タグに、以下を埋め込めばイケる様です。  <div class="o">onclick="this.focus();this.select()"</div> 試してみたところ、ちゃんと出来ました。 PwBlogでは使えないけど、憶えておくと便利だと思います。]]></content>
	</entry>
	<entry>
		<title>デザインテンプレート「カフェオレ」配色変更</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59773.html" />
		<modified>2007-09-02T18:15:03Z</modified>
		<issued>2007-09-02T18:15:03Z</issued>
		<id>tag:www.pwblog.com,2007-09-02:/user/yohko/asobou/59773.html</id>
		<created>2007-09-02T18:15:03Z</created>
		<summary type="text/html">デザインテンプレート「カフェオレ」の、リンク色などを変更しました。 以下、変更内....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59773.html</url>
		</author>
		<dc:subject>遊んだ内容</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[デザインテンプレート「カフェオレ」の、リンク色などを変更しました。 以下、変更内容を詳しく記載しておきます。<strong>プラグイン内の配色（リスト項目）</strong> <span style="color:#000000">リンク・文字色黒（#000000）</span>、アンダーラインなし <span style="color:#68605A">訪問後のリンク・薄茶（#68605A）</span>、アンダーラインなし <span style="color:#AC0027;text-decoration:underline">ポイントしたリンク・赤（#AC0027）</span>、アンダーラインあり <div class="o">div.plugin li a { <span style="margin-left:10px">color:#000000;</span> <span style="margin-left:10px">text-decoration: none;</span> } div.plugin li a:visited { <span style="margin-left:10px">color:#68605A;</span> <span style="margin-left:10px">test-decoration:none;</span> } div.plugin li a:hover { <span style="margin-left:10px">color:#AC0027;</span> <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <strong>プラグイン内の配色（フリーコメント）</strong> <span style="color:#000000;background:#E8E4E0">リンク・文字色黒（#000000）背景色薄茶（#E8E4E0）</span>、アンダーラインなし <span style="color:#90877F;background:#F8F4F0">訪問後のリンク・文字色茶（#90877F）背景色ごく薄い茶（#F8F4F0）</span>、アンダーラインなし <span style="color:#AC0027;text-decoration:underline;background:#E8E4E0">ポイントしたリンク・文字色赤（#AC0027）背景色薄茶（#E8E4E0）</span>、アンダーラインあり <div class="o">div.plugin div.body a {  <span style="margin-left:10px">color:#000000;</span>  <span style="margin-left:10px">background:#E8E4E0;</span>  <span style="margin-left:10px">text-decoration:none;</span> } div.plugin div.body a:visited {  <span style="margin-left:10px">color:#90877F;</span>  <span style="margin-left:10px">background:#F8F4F0;</span>  <span style="margin-left:10px">text-decoration:none;</span> } div.plugin div.body a:hover {  <span style="margin-left:10px">color:#AC0027;</span>  <span style="margin-left:10px">background:#E8E4E0;</span>  <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <strong>記事本文の配色</strong> <span style="color:#000000;background:#E8E4E0">リンク・文字色黒（#000000）背景色薄茶（#E8E4E0）</span>、アンダーラインなし <span style="color:#90877F;background:#F8F4F0">訪問後のリンク・文字色茶（#90877F）背景色ごく薄い茶（#F8F4F0）</span>、アンダーラインなし <span style="color:#AC0027;text-decoration:underline;background:#E8E4E0">ポイントしたリンク・文字色赤（#AC0027）背景色薄茶（#E8E4E0）</span>、アンダーラインあり <div class="o">div.ubc div.body a, div.ubc div.extend a { <span style="margin-left:10px">color:#000000;</span> <span style="margin-left:10px">background:#E8E4E0;</span> <span style="margin-left:10px">text-decoration:none;</span> } div.ubc div.body a:visited, div.ubc div.extend a:visited { <span style="margin-left:10px">color:#90877F;</span> <span style="margin-left:10px">background:#F8F4F0;</span> <span style="margin-left:10px">text-decoration:none;</span> } div.ubc div.body a:hover, div.ubc div.extend a:hover { <span style="margin-left:10px">color:#AC0027;</span> <span style="margin-left:10px">background:#E8E4E0;</span> <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <strong>記事タイトルの配色</strong> 記事の題名から個々の記事にリンクしている場合 <span style="color:#003C49">文字色・深緑（#003C49）</span>、アンダーラインなし <span style="color:#AC0027;text-decoration:underline">ポイントした時・文字色赤（#AC0027）</span>、アンダーラインあり <div class="o">div.ubc h2 a { <span style="margin-left:10px">color:#003C49;</span> <span style="margin-left:10px">text-decoration:none;</span> } div.ubc h2 a:hover { <span style="margin-left:10px">color:#AC0027;</span> <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <strong>「このブログのトップ」の配色</strong> <span style="color:#003C49">文字色・深緑（#003C49）</span>、アンダーラインなし <span style="color:#AC0027;text-decoration:underline">ポイントした時・文字色赤（#AC0027）</span>、アンダーラインあり <div class="o">p.toBlogTop a { <span style="margin-left:10px">color:#003C49;</span> <span style="margin-left:10px">text-decoration:none;</span> } p.toBlogTop a:hover { <span style="margin-left:10px">color:#AC0027;</span> <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <strong>「続きを読む」の配色</strong> <span style="color:#006080">文字色・青緑（#006080）</span>、アンダーラインなし <span style="color:#AC0027;text-decoration:underline">ポイントした時・文字色赤（#AC0027）</span>、アンダーラインあり <div class="o">p.morelink a { <span style="margin-left:10px">color:#006080;</span> } p.morelink a:hover { <span style="margin-left:10px">color:#AC0027;</span> <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <strong>「Comments」等の配色</strong> <span style="color:#8FABBE">文字色・薄青灰（#8FABBE）</span>、変更なし <span style="color:#AC0027;text-decoration:underline">ポイントした時・文字色赤（#AC0027）</span>、アンダーラインあり <div class="o">div.ubc p.posted a:hover { <span style="margin-left:10px">color:#AC0027;</span> <span style="margin-left:10px">text-decoration:underline;</span> }</div>  <img src="http://www.pwblog.com/user/yohko/files/error.png" alt="caution" height="16" width="16"> <span style="color:#AC0027">このBlogを参考にして、デザインテンプレートを編集した結果、何か不具合が生じても、当Blogの管理人は一切保証いたしません。</span> ご自分の責任において、編集してくださいまし。  上記のアイコンは、<a href="http://www.famfamfam.com/lab/icons/silk/">famfamfam.com</a>から拝借いたしました。]]></content>
	</entry>
	<entry>
		<title>Mac版FireFoxで半角英数字を全て見せるには</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59736.html" />
		<modified>2007-09-02T11:06:16Z</modified>
		<issued>2007-09-02T11:06:16Z</issued>
		<id>tag:www.pwblog.com,2007-09-02:/user/yohko/asobou/59736.html</id>
		<created>2007-09-02T11:06:16Z</created>
		<summary type="text/html">前のエントリーで書いた、Mac版FireFoxで半角英数字が折り返さないって問題....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59736.html</url>
		</author>
		<dc:subject>ブラウザ関連</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[前のエントリーで書いた、Mac版FireFoxで半角英数字が折り返さないって問題なんですが。 <span style="color:#009465">overflow</span>っていうプロパティを使えばOKだって事が判りました。  ……今さら何を言ってるんだろう…とお思いの方もおられるでしょうが、私の持ってる本には、こんなプロパティ載ってないんですよ。何しろ、私がスタイルシートをいじくり回していたのは遥か昔の事で、かなりのブランクがあるため、初歩的なところで躓いて、オロオロしている状態です……。 新しい本、買うべきかなぁ。  ともかく、最新の本がなくとも、ここまでは何とか出来たってトコを、備忘録として残しておきます。前のエントリーの際に、新たにCSSファイルに追加したのは、以下の通り。 <div class="o">div.ubc div.o {  margin: 5px 0px;  padding: 5px;  background-color: #E6E6E6; }</div> これに、overflow プロパティで、auto と scroll を入れた場合、表示にどんな差があるか、まずチェックしました。 FireFoxの場合。 <a href="http://www.pwblog.com/user/yohko/files/07090201.jpg" rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07090201_s.jpg" alt="Mac版FireFoxで見た時" height="150" width="100" style="margin:5px 2px"></a> Operaの場合。 <a href="http://www.pwblog.com/user/yohko/files/07090203.jpg" rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07090203_s.jpg" alt="Mac版Operaで見た時" height="122" width="100" style="margin:5px 2px"></a> 以上の結果から、<span style="color:#009465">overflow:auto;</span>を追加すれば良さそうだと思いました。  しかし問題は、Safariで見た場合。 プロパティの値を、auto にしても scroll にしても、テキストが全部表示されないという状態になっています…。 <a href="http://www.pwblog.com/user/yohko/files/07090202.jpg" rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07090202_s.jpg" alt="Safariで見た時" height="117" width="100" style="margin:5px 2px"></a> けれども、私のSafariはバージョンが1.0。 MacOSX10.2だし。 もっと新しいバージョンだとどんな風に表示されるのか、調べる方法はないかと思って探したら、ありましたよ。  Safari 2.0.4 でどう表示されるのかをチェックするだけなら、<a href="http://www.browsrcamp.com/">Browsr Camp</a>がお手軽。 ここは、Windowsユーザーが、Macのブラウザからどう見えるかをチェックする時に、役立ちそうです。Safari 2.0.4以外をチェックしようと思ったら、有料になるみたいだけど。 登録して24時間の間は、WinもMacもLinuxも無料でチェックし放題ってサイトなら、<a href="http://www.browsercam.com/">Brouser Cam</a>がいいみたい。 私も早速試してみて、その結果こんなカンジになりました。  MacOSX 10.3　Safari 1.3の場合。 <a href="http://www.pwblog.com/user/yohko/files/12715131.jpg"><img src="http://www.pwblog.com/user/yohko/files/12715131_s.jpg" alt="MacOSX 10.3 Safari 1.3" height="150" width="200" style="margin:5px 2px 10px"></a> MacOSX 10.4　Safari 2.0の場合。 <a href="http://www.pwblog.com/user/yohko/files/12715132.jpg"><img src="http://www.pwblog.com/user/yohko/files/12715132_s.jpg" alt="MacOSX 10.4 Safari 2.0" height="150" width="200" style="margin:5px 2px 10px"></a> ついでに、Windows Vista　IE 7.0の場合も見てみました。 <a href="http://www.pwblog.com/user/yohko/files/12715134.jpg"><img src="http://www.pwblog.com/user/yohko/files/12715134_s.jpg" alt="Windows Vista IE 7.0" height="150" width="200" style="margin:5px 2px 10px"></a> Brouser Cam、面白いなぁ。 これ、24時間過ぎてしまった後も、もう一度登録し直せば無料で使えるんだろうか…などというセコい事を考えたり。 私がBrouser Camを見つけるきっかけとなった<a href="http://muumoo.jp/pccolumn007.shtml">Webブラウザ徹底比較(3) 番外編</a>という記事では、管理人さんがもっと色々と試しておられます。  と、以上の作業により、 <div class="o">div.ubc div.o {  margin: 5px 0px;  padding: 5px;  background-color: #E6E6E6;  <span style="color:#AC0027">overflow: auto; </span> }</div> を採用する事にしました。  最新の専門書籍を持っていなくても、ネットで調べれば、何とかここまでの事が出来ます。 すっごい時間がかかりますけどね………。  textarea を使おうと思って調べた事は、また別の機会にでも。]]></content>
	</entry>
	<entry>
		<title>Mac版FireFoxで半角英数字を折り返さない現象</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59733.html" />
		<modified>2007-09-02T05:02:20Z</modified>
		<issued>2007-09-02T05:02:20Z</issued>
		<id>tag:www.pwblog.com,2007-09-02:/user/yohko/asobou/59733.html</id>
		<created>2007-09-02T05:02:20Z</created>
		<summary type="text/html">ひとつ前のエントリーで気付いたのですが、URLを記入したところで、テキストを折り....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59733.html</url>
		</author>
		<dc:subject>ブラウザ関連</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[ひとつ前のエントリーで気付いたのですが、URLを記入したところで、テキストを折り返さず、どこかに消えている部分があります。 この件の対策を考えてみました。<a href="http://www.pwblog.com/user/yohko/asobou/59710.html">PwBlogの画像ポップアップ機能について</a>というエントリーの、ソースを記入した部分を、Mac版FireFoxで見るとこんな事に。 （画像クリックで原寸表示） <a href="http://www.pwblog.com/user/yohko/files/07090104.jpg"><img src="http://www.pwblog.com/user/yohko/files/07090104_s.jpg" alt="Mac版FireFoxで見た時" height="48" width="119" style="margin:10px 0"></a> Mac版Operaで見ると、ちゃんと折り返して表示されています。 （画像クリックで原寸表示） <a href="http://www.pwblog.com/user/yohko/files/07090105.jpg"><img src="http://www.pwblog.com/user/yohko/files/07090105_s.jpg" alt="Mac版Operaで見た時" height="41" width="119" style="margin:10px 0"></a> 最近は滅多に使わないSafariで見てみたら、FireFoxと同じ様に、折り返されていませんでした。  Windowsの方で確認してみたら、FireFoxもIEも、ちゃんと折り返して表示されている。 インターネットユーザーが、ほとんどWindowsである事を考えると、これはこのまま放っといてもいい気がしたけど、それだとMacユーザーとして何かに負けた気がする……。  と言う事で、Google で検索した結果、関連があると思われる情報は、以下で見つける事が出来ました。  <ul><li><a href="http://pinotan.blog15.fc2.com/blog-entry-106.html">改行されない〜HTML、プラグインに関するメモ</a></li><li><a href="http://sweetspots.blog1.fc2.com/blog-entry-187.html">半角文字列の折り返し</a></li></ul> もっとちゃんと調べれば、より有用な情報が見付かるのかも知れないけど。 両方とも、FC2ブログでのデザインについて述べている様ですが、PwBlogの場合、デザインが崩れないだけでもマシなのかな…。 この記事の中の「半角スペースを使う」という方法は、いいかも知れないと思ったのですが、閲覧者が設定している文字のサイズによっては、やっぱり折り返されない部分は消えてしまう。 これではやはり、私が解消したい問題についての、根本的な解決にはなっていない気がしてしまいます。 どうするべきか、もうちょっと色々と調べてみようと思いますが、どなたか有用な情報をご存じでしたら、教えてやってくださいませ……。 今ンとこ、textareaを使ってしまおうかと思っております。]]></content>
	</entry>
	<entry>
		<title>PwBlogの画像ポップアップ機能について</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59710.html" />
		<modified>2007-09-01T23:26:55Z</modified>
		<issued>2007-09-01T23:26:55Z</issued>
		<id>tag:www.pwblog.com,2007-09-01:/user/yohko/asobou/59710.html</id>
		<created>2007-09-01T23:26:55Z</created>
		<summary type="text/html">今回のバージョンアップによって、PwBlogでは画像をクリックすると、ポップアッ....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59710.html</url>
		</author>
		<dc:subject>遊んだ内容</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[今回のバージョンアップによって、PwBlogでは画像をクリックすると、ポップアップされる機能が追加された様です。 これは、小さい画像を大きくして見たい時には、便利な機能ですね。  その一方で、ちょっと気になる点も出てきます。 まず、バージョンアップ前に登録した記事には適用されていないという点。 それから、時に「ポップアップされる画像デカすぎ！」と感じる点。  このエントリーでは、その辺について考えてみました。まず、ポップアップされる画像と、そうでない画像の差は、元画像へのリンクが付いているか否かということ。 バージョンアップ前にエントリーした記事の画像は、元画像へのリンクがあってもポップアップされませんが、これは、記事の編集でリンクタグに <span style="color:#009465">rel="lightbox"</span> というのを追記すれば大丈夫な様です。  例えば、<a href="http://www.pwblog.com/user/yohko/asobou/59446.html">フリーコメントを使ってリンク集を作る</a>という私のエントリーの例。 そこで使っているこの画像。 <img src="http://www.pwblog.com/user/yohko/files/07082902_s.jpg" alt="アイコンは出たけれど" height="119" width="103" style="margin:10px 2px 10px 8px" align="left">これが、サムネイル表示で元画像へのリンクがない状態。<br clear="all"> これに、元画像へのリンクをつけると… <a href="http://www.pwblog.com/user/yohko/files/07082902.jpg"><img src="http://www.pwblog.com/user/yohko/files/07082902_s.jpg" alt="アイコンは出たけれど" height="119" width="103" style="margin:5px 2px 5px 5px" align="left"></a>こうなります。 ポップアップさせる為のタグは入れていませんので、クリックすると、元画像を原寸表示します。<br clear="all"> この時のソースが、これです。 <div class="o">＜a href="http://www.pwblog.com/user/yohko/files/07082902.jpg"＞＜img src="http://www.pwblog.com/user/yohko/files/07082902_s.jpg" alt="アイコンは出たけれど" height="119" width="103" style="margin:10px 2px 10px 8px" align="left"＞＜/a＞</div> バージョンアップ前に登録した記事本文に使った画像は、確かこの状態になっています。 これを、今回のバージョンアップに伴うポップアップ機能に対応させるには… <a href="http://www.pwblog.com/user/yohko/files/07082902.jpg" rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07082902_s.jpg" alt="アイコンは出たけれど" height="119" width="103" style="margin:10px 2px 10px 8px" align="left"></a>画像をクリックすると、ポップアップされます。<br clear="all"> 編集機能で、以下の部分を追加すればOKです。 <div class="o">＜a href="http://www.pwblog.com/user/yohko/files/07082902.jpg" <span style="color:#009465">rel="lightbox"</span>＞＜img src="http://www.pwblog.com/user/yohko/files/07082902_s.jpg" alt="アイコンは出たけれど" height="119" width="103" style="margin:10px 2px 10px 8px" align="left"＞＜/a＞</div> 逆に言えば、ポップアップを使わずに原寸表示させたい時は、この <span style="color:#009465">rel="lightbox"</span> を使わなければいい訳ですね。 どっちが良いか、考えながら使ってみてください。  「ポップアップされる画像デカすぎ！」については、別の機会に書く事にします。]]></content>
	</entry>
	<entry>
		<title>PwBlogのエントリーから直接はてなブックマークへ</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59564.html" />
		<modified>2007-08-31T14:20:05Z</modified>
		<issued>2007-08-31T14:20:05Z</issued>
		<id>tag:www.pwblog.com,2007-08-31:/user/yohko/asobou/59564.html</id>
		<created>2007-08-31T14:20:05Z</created>
		<summary type="text/html">先日、はてなブックマークに参加できる様にしたぞ、と鼻息を荒くしていましたが、アレ....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59564.html</url>
		</author>
		<dc:subject>遊んだ内容</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[先日、<a href="http://www.pwblog.com/user/yohko/asobou/59290.html">はてなブックマークに参加できる様にしたぞ</a>、と鼻息を荒くしていましたが、アレコレやっているうちに、<img src="http://www.pwblog.com/user/yohko/files/b_entry.gif" width="16" height="12" alt="このエントリーを含むはてなブックマークのマーク" style="vertical-align:middle"> でこのエントリーを含むはてなブックマークに飛ぶよりは、直接 <img src="http://www.pwblog.com/user/yohko/files/append.gif" width="16" height="12" alt="このエントリーをはてなブックマークに追加のマーク" style="vertical-align:middle"> を使ってはてなブックマークに登録する画面にした方がいい様な気がしてきました。 そこで、またチマチマといじってみましたよ。<span style="color:#FF9900">文中の＜,＞,＝は、全角で書かれています。実際に編集する時は、半角で書いてください。</span> <ol> <li>まず、<img src="http://www.pwblog.com/user/yohko/files/append.gif" width="16" height="12" alt="このエントリーをはてなブックマークに追加のマーク" style="vertical-align:middle"> をはてなから拝借してきて、ファイルアップロードでアップします。 画像のURLをメモしておいてください。</li> <li>デザインテンプレート編集で、はてなブックマークをつけたい部分に、以下の様に挿入します。  ＜a href="http://b.hatena.ne.jp/add?mode=confirm&url=＝CGIQUERY_ubc_url＝"＞＜img src="アップロードした画像のURL" width="16" height="12" style="margin: 0px 5px" alt="このエントリーをはてなブックマークに追加" title="このエントリーをはてなブックマークに追加"＞＜/a＞  私の場合は、<img src="http://www.pwblog.com/user/yohko/files/append.gif" width="16" height="12" alt="このエントリーをはてなブックマークに追加のマーク" style="vertical-align:middle"> と <img src="http://www.pwblog.com/user/yohko/files/b_entry.gif" width="16" height="12" alt="このエントリーを含むはてなブックマークのマーク" style="vertical-align:middle">の間にマージンを入れたかったので、styleでそれを指定しています。</li> </ol> これで、以下の様に表示される様になりました。 <img src="http://www.pwblog.com/user/yohko/files/07083101.jpg" alt="はてなブックマークにエントリーボタンがついた" height="73" width="100" style="margin:5px"> わざわざ書く事じゃないかも知れないけど、いいんです。 自分が何の作業をしたか、忘れない様に書いてるんですから。 「普通忘れねーだろ」と思いますか？ でも、私のニワトリっぷりは、ちょっとスゴイんです…。]]></content>
	</entry>
	<entry>
		<title>PwBlogがバージョンアップ</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59545.html" />
		<modified>2007-08-31T08:13:17Z</modified>
		<issued>2007-08-31T08:13:17Z</issued>
		<id>tag:www.pwblog.com,2007-08-31:/user/yohko/asobou/59545.html</id>
		<created>2007-08-31T08:13:17Z</created>
		<summary type="text/html">PwBlog が、Ver.3にバージョンアップしたそうなので、さっそく試してみま....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59545.html</url>
		</author>
		<dc:subject>文字だけ日記</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[PwBlog が、Ver.3にバージョンアップしたそうなので、さっそく試してみました。  まずはblogを再構築。 え？ 「ちょwww　今までチマチマやってた事、もっかい仕込み直しですかwww」 ……軽く涙目になりました。 まぁしょうがない。 無料で使わせて貰ってる以上、文句言えた義理じゃないです。  気を取り直して、再構築っと。まずは、アンケート機能。 プラグイン追加で簡単にアンケートが作れる。 終わったアンケートがあれば、右側の一番上に「過去のアンケート」として表示される。  これ、アンケートそのものの場所は、プラグイン管理で変えられるのだから、過去のアンケートの場所も変えられたらいいのになぁ…。 と、思ったので、デザインテンプレート編集で、アンケート投票フォームに過去のアンケートへのリンクをつけて、過去のアンケートってヤツは消そうとしたら…。 これの表示非表示を制御してるのって、ドコですか？w デザインテンプレートをいじってどうこう出来るモノではなさそうなカンジです。  アンケート結果の表示は、デザインテンプレートでいじれそうだけど、棒グラフの色を変えたいとかいうのは、パッと見た感じユーザーレベルだと出来なさそうかな？   次に、読者機能。 デザインテンプレート編集で、場所を動かす事は出来ますが、サイドメニューの天辺か末尾かにしか設置できないんですね。 でもまぁこれは、どっちかの末尾でいいかな。 読者になりたいと思う時って、Blogの内容をある程度読んでからだと思うから、それを考慮した上で、ユーザーがプラグインの配置を変えればいいや。 という事で、ワタシはプロフィールの下に動かしてみました。 ワタシに限って言えば、今後も継続してチェックしたいと思う様なBlogなら、プロフィールは必ずチェックするからです。   次は、記事の評価。 これはなかなか……エグいですね。 投票数は多いのに平均点が低いと、普通にヘコみそうです。 0点がないだけマシかw  この表示形式は、デザインテンプレートでは編集できない様ですね。 誰も投票してくれないとか、平均点低いとかだったら、小さめに表示するとかしたいな。 星には画像を使うとか…。  しかしこれは、誰かが記事を見たというリアクションが欲しい、記事を書き続けるためのモチベーションが欲しいってだけの理由なら、<a href="http://www.webclap.com/">Web拍手</a>なんかは最適だと思うので、それを付ければ済む事かな。 今度やってみます。   最後に、関連記事表示。 ワタシは最近、コレにやられています。 興味のあった記事を読み終わった後に、関連記事として他のエントリーが表示されてると、ついつい読み進んでしまうんですよね。 結果、最初に調べに来たのが何だったか忘れてしまったりして。  今回のバージョンアップでは、ポータル全体から、テーマをもとに関連記事を引っ張って来ている様子。 となると、エントリーする時に、「面倒くせえ。その他のその他でイイや」とか適当にテーマを設定してると、関連記事としてピックアップされる事もなくなる…という事ですね。  コレが、Blogの中で関連記事を引っ張ってくる様になれば…とは思うのですが、素人考えとして、そういうのはタグとかいうのを設定しないと出来ない？　とすれば、PwBlogには、タグの設定がないから出来ないかなってカンジ。   ……とまぁ、簡単に、新機能をいじくってみて感じた事などを、書き散らしてみました。  <a href="http://www.pwblog.com/user/taka/taka/59294.html">社長日記</a>を読む限り、今回のバージョンアップは、ポータルサイト管理者に重きを置いたものの様なカンジなので、PwBlogを使う1ユーザーとしては、特に「コレは凄いぞぉッ！」ってなトコは……と思ったら。  <a href="http://www.pwblog.com/user/yohko/files/20060420075205.jpg" rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/20060420075205_s.jpg" alt="何様？…ねこ様" height="119" width="89"></a> な…なるほどぉ。 記事をエントリーする際のリアルタイムプレビューか。 これは便利だ♪]]></content>
	</entry>
	<entry>
		<title>フリーコメントを使ってリンク集を作る</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59446.html" />
		<modified>2007-08-30T00:49:22Z</modified>
		<issued>2007-08-30T00:49:22Z</issued>
		<id>tag:www.pwblog.com,2007-08-30:/user/yohko/asobou/59446.html</id>
		<created>2007-08-30T00:49:22Z</created>
		<summary type="text/html">PwBlogでは、プラグインでリンク集を作る事ができますが、特にお気に入りのサイ....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59446.html</url>
		</author>
		<dc:subject>遊んだ内容</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[PwBlogでは、プラグインでリンク集を作る事ができますが、特にお気に入りのサイトだったら、ひとこと紹介コメントなど入れてみたいもの。 そこで、フリーコメントを使ってリンク集を作ってみました。 ワタシの別Blog、「<a href="http://www.pwblog.com/user/yohko/yohko03/">映画がワタシをダメにする</a>」でやってみた方法です。 デザインテンプレートが、「Newデザイン」シリーズのBlogなら、多分共通の作業でイケると思います。<span style="color:#ff9900">文中の＜,＞,＝は、全角で書かれています。実際に編集する時は、半角で書いてください。</span>  <table border="0" width="100%"><tr ><td width="106"><a href="http://www.pwblog.com/user/yohko/files/07082901.jpg" rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07082901_s.jpg" alt="フリーコメントのみ使った状態" height="119" width="103"></a></td><td valign="top">普通にフリーコメントを使ってリンク集を作った場合、まあこんなカンジになるのかな。<br >これに、アイコンをつけたいと思った場合、フリーコメントで＜ul＞タグを使えばいいのですが……。</td></tr></table>  <table border="0" width="100%"><tr ><td width="106"><a href="http://www.pwblog.com/user/yohko/files/07082902.jpg"  rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07082902_s.jpg" alt="アイコンは出たけれど" height="119" width="103"></a></td><td valign="top">他のプラグインよりも、アイコンの位置がズレているのが、何だか気になります。</td></tr></table>  これを解消するには、まずデザインテンプレートを編集します。  『プラグインコメント』を選択し、  ＜div class＝"plugin"＞  ＜h2＞＝CGIQUERY_title＝＜/h2＞  ＜div class="body"＞＝CGIQUERY_comment_about＝＜/div＞ ＜/div＞  とあるのを、以下の様に書き換えます。  ＜div class＝"plugin"＞  ＜h2＞＝CGIQUERY_title＝＜/h2＞  ＝CGIQUERY_comment_about＝ ＜/div＞  Blogを再構築すると、アイコンの位置は揃いますが、リスト項目間の余白が気になりました。 <table border="0" width="100%"><tr ><td width="106"><a href="http://www.pwblog.com/user/yohko/files/07082903.jpg"  rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07082903_s.jpg" alt="これで出来あがり" height="119" width="103"></a></td><td valign="top">プラグイン管理から「編集」を選んで、「自動改行を行う場合はチェック」のチェックを外します。改行させたい時は、直接＜br＞タグを入力します。</td></tr></table>  <table border="0" width="100%"><tr ><td width="106"><a href="http://www.pwblog.com/user/yohko/files/07082904.jpg"  rel="lightbox"><img src="http://www.pwblog.com/user/yohko/files/07082904_s.jpg" alt="マージン消えてかっちょ悪い！" height="119" width="103"></a></td><td valign="top">これでOKかと思いきや、今度は実際のフリーコメントに、マージンが無くなってしまいました…。</td></tr></table> これを解消するには、フリーコメントを記入する際に、上の作業で外した＜div class="body"＞と＜/div＞を入れれば大丈夫です。 自動改行モードの時は、＜div＞タグとフリーコメント冒頭との間に改行を入れないこと。 変な余白が出来てしまいます。  プラグインでフリーコメントをたくさん使う場合、いちいち外したタグを入れるのは面倒くさいかも知れませんが、どっちの使用頻度が高いかなどと考え合わせて、より良い方を選択してください♪]]></content>
	</entry>
	<entry>
		<title>Google AdSense は気難しい</title>
<link rel="alternate" type="text/html" href="http://www.pwblog.com/user/yohko/asobou/59297.html" />
		<modified>2007-08-28T11:54:56Z</modified>
		<issued>2007-08-28T11:54:56Z</issued>
		<id>tag:www.pwblog.com,2007-08-28:/user/yohko/asobou/59297.html</id>
		<created>2007-08-28T11:54:56Z</created>
		<summary type="text/html">Google AdSense を導入してみたんですが…。 デザイン的なモノを考え....</summary>
		<author>
			<name>yohko</name>
			<url>http://www.pwblog.com/user/yohko/asobou/59297.html</url>
		</author>
		<dc:subject>文字だけ日記</dc:subject>
		<content type="text/html" mode="escaped" xml:lang="ja"><![CDATA[<a href="https://www.google.com/adsense/login/ja/?destination=%2Fadsense%2Fhome">Google AdSense</a> を導入してみたんですが…。 デザイン的なモノを考えると、この広告、やっかいですなぁ。 たくさん広告が入るフォーマットを選ぶと、文字サイズが気に入らないし、文字サイズ小さめを選ぶと広告が少ない。  小さめ文字の広告を入れようと思うと、現状のデザインが崩れるからってのもあって、気軽に選べないし。 その文字小さめフォーマットも、Mac FireFox と Windows FireFox で見るといいカンジなのに、Windows IE で見るとガックリしてしまったり。 これを何とかする方法はないものかと、ちょっと探してみたんですが…。  <a href="http://adsense.blogspot.com/">公式Blog</a> によると、デザイン関連での変更は、ちょっと<a href="http://adsense.blogspot.com/2007/04/fresh-new-look-for-adsense-ads.html">スッキリしたデザインになった</a>ってのと、<a href="http://adsense.blogspot.com/2007/06/we-go-round-and-round.html">角が丸くできる様になった</a>ってのとくらいで、文字サイズに関する情報は見当たりませんでした。 …英語だからよくわからないけど。  という事は、新しい PwBlog のデザインを作る時は、Google AdSense が見栄えよく入る事も意識したモノにしないといけないってコトだなぁ。]]></content>
	</entry>
</feed>
