えぇ〜、昨日・・・、
とある知人の方に、おいしい焼肉をご馳走になる事となりまして・・・、
お迎えに上がりましたところ・・・、
ブログの更新中とのコトでしたので少し待つ事に・・・。
待つ事・・・1時間弱・・・(笑)
今回ご馳走していただきに行っておりまして・・・、
当然ですが、待つ事に関して全くストレスを感じたわけでもなく、楽しくトークしながら待たせて頂きましたのでワタシにとっては食事会の一環に含まれる「楽しいヒトトキ」として過ごさせて頂きました。
しかしながら、その知人も忙しい方でして・・・、
時には『待たせてはいけない場面でブログの更新が長引いてしまって・・・』っと言う場面も考えられます。
ワタシもご馳走して頂いてタダ何もなしでは、次回ご馳走になる時・・・ゴハンのオカワリするのを遠慮気味になってしまいます。
そこで今回は、『毎日ブログ更新するヒトの為のPhotoshopでのアレ。』っと題しまして若干早くなるんじゃないかなぁ?的なアレを記事として掲載して置けばまた遠慮なくご馳走になれるかと・・・(笑)
古いIE(Internet Explorer5.5や6)にて透過PING画像の表示をしたとき・・・、
周りがグレーに表示される。
ワタシは通常使用するブラウザーとして『Google Chrome』を利用しています。
また、WEBサイトの仕様によってはスクリプトの関係上、Chromeが正常に動作しないサイトもあり、IE7なども使用することもある。
まぁ、そんな中・・・、
とある方から先日ご指摘を頂きまして・・・、
『何でロゴのところが灰色なのぉ?』っと・・・、
ココのところ「クロスブラウザー」なんて言葉はすっかり忘れており・・・、
全くノーマークでした(笑)

ちなみに上は、通常見ている(であろうと思っていた)本サイトのロゴ表示。

そして、こちらは対策前にIE6にて表示した本サイトのロゴ表示。
こりゃ、灰色って言われちゃって当然です(笑)
っと言う事で、対策方法を・・・、
「IE PNG Fix 2.0 Alpha 4」より[iepngfix.zip]をダウンロードして、解凍する。
解凍フォルダには10個ほどファイルが入っていますが、必要なのは「iepngfix.htc」だけ。
※その他、詳細を確認するには、各自それぞれのファイルをご確認下さい。
そして、対策したいHTMLページファイルのヘッダ部分に以下のようなソースを記述します。
<style type="text/css">
img, div { behavior: url(./iepngfix.htc) }
</style>
url( この中の部分 ) は、HTMLファイルと同じディレクトリであれば、上記のような記載でOKでしょうし、CMSなんかで使用する場合は絶対パスで記載するとよいかと思います。
(例)
「http://i4u.bz/」のホームディレクトリ(index.htmlと同じ階層)に「iepngfix.htc」を設置する場合
url(http://i4u.bz/iepngfix.htc)
///////////////////////////////////////////////////
ちなみに、「透過のPING画像」とは・・・
※詳細はぜひ、ググって頂きたいのですが・・・、
顔の絵の部分に影をつけて保存した画像を、それぞれ背景色を変えた所に配置してみました。
上記のように淡色での塗りつぶしであれば、3種類のどの方法でもある程度は対応できますが、グラデーション背景や柄の入った背景の上に画像を配置したときには、透過PING画像がとっても便利です。
中々いまどき風なAjaxを使ったメールフォーム。。。
見た目もさることながら、使い勝手も良く・・・便利です。
開発された伊藤様・・・ご苦労様です。
【↓こんな感じです。】
送信フォーム
サンプルは一時閉鎖(笑)
Lightboxとバッティングする。。。
CMS系に利用する時は注意が必要だ。
Yahoo! pipes と Google AJAX Feed API
Posted by | Posted in web関連 | Posted on 20-01-2010
昨日の記事で・・・、
「Google AJAX Feed API」を業務連絡したついでに・・・、
とある問題を解決・・・、
さっそく本題に入ろうかと・・・、
今回、紹介しようかと思いますのは
feedデータから広告を取り除いたり(その他も色々とできますが・・・)できる便利なサービスを・・・、
その「Yahoo! pipes」を利用して広告データを取り除いて「Google AJAX Feed API」にて一覧表示する事もできます。
Yahoo!の無料で利用できるサービスになります。
色々なブログからRSSデータを取得してまとめたり・・・、1件のブログから条件にあったfeedを抜き出してRSSを生成したり・・・、
まぁ、いろいろできて・・・、
超便利です・・・、
しかし、Yahoo!といってもYahoo!Japanでの提供サービスではありませんので・・・全文英語。
ご利用方法は・・・、
また後日でも・・・。
『Google AJAX Feed API』を利用してフィードの表示をしてみました。。。
<!-- ++Begin Dynamic Feed Wizard Generated Code++ -->
<!--
// Created with a Google AJAX Search and Feed Wizard
// http://code.google.com/apis/ajaxsearch/wizards.html
-->
<!--
// The Following div element will end up holding the actual feed control.
// You can place this anywhere on your page.
-->
<div id="feed-control">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>
<!-- Google Ajax Api
-->
<script src="http://www.google.com/jsapi?key=notsupplied-wizard"
type="text/javascript"></script>
<!-- Dynamic Feed Control and Stylesheet -->
<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js"
type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css");
</style>
<script type="text/javascript">
function LoadDynamicFeedControl() {
var feeds = [
{title: 'トラスティ (新館)',
url: 'http://www.trusty21.com/blog/?mode=rss'
},
{title: 'トラスティ (別館)',
url: 'http://blog.livedoor.jp/trusty21/index.rdf'
},
{title: 'スリングショットウェイクボード',
url: 'http://www.slingshot.jp/blog/?mode=rss'
}];
var options = {
stacked : true,
horizontal : false,
title : "トラスティfeed"
}
new GFdynamicFeedControl(feeds, 'feed-control', options);
}
// Load the feeds API and set the onload callback.
google.load('feeds', '1');
google.setOnLoadCallback(LoadDynamicFeedControl);
</script>
<!-- ++End Dynamic Feed Control Wizard Generated Code++ -->
Feedの数は29行目以降の部分を「 , (カンマ) 」で区切って増減できます。
【例】
var feeds = [
{title: 'ブログその1',
url: 'http://ブログアドレス/index.rdf'
},
{title: 'ブログその2',
url: 'http://blog.アドレス.jp/ブログ/index.rdf'
},
{title: 'ブログその3',
url: 'http://blog.ブログ.jp/rss.rdf'
},
{title: 'メガエアーがここには・・・',
url: 'http://ブログフィード.jp/blog/?mode=rss'
}];
その他、見た目を変更したい場合は、24行目あたりにあるURLのCSSファイルを改造して自身のサーバにUPしてからURL指定を変更すればOK!
その他、JavaScriptエラーが出る場合のほとんどは、埋め込みや改造の際にカンマやクォーテーションを忘れてしまったりすることによる事が多いので、1行ずつ確認いただければと思います。













