DIGITAL GATE トップ | HTML・XML

HTML・XML

iPhoneサイトで上下に表示されるパネルを非表示にする方法。

2009年2月25日 23:33 |
iPhone 向けサイトにアクセスした場合、通常は上にURLを入力するエリア、
下部に「戻る、進む、ブックマーク」のボタンのついたパネルが常に表示される。

上部のURLエリアは、以下にjavascriptで簡単にスライドさせることができる。

■サンプルjavascript

<script type="text/javascript" charset="utf-8">
	window.onload = function(){
		setTimeout(function(){window.scrollTo(0,1);},100);
	}
</script>
下部のパネルは以下のタグを入れる

<meta name="apple-mobile-web-app-capable" content="yes">

■サンプルサイト（iPhone用壁紙サイト）
Wallpapers@iPhoneStyle
http://iphone-sns.com/wallpaper/

ただし、下部パネルが非表示になるのは、ホーム画面に追加したもののみ。



携帯用Google Adsenseの文字サイズやスペースの変更方法。

2008年11月28日 11:23 |
前回の記事、『MT4iにGoogle Adsenseを入れる方法（サンプル付き）』でアドセンス広告を入れる説明をしたが、表示する文字サイズやスペースを変更する方法を説明したが、表示される広告とのスペースや文字サイズを変更したい場合もあるだろう。
携帯の機種によっては、スタイルシート（css）を読んでくれる機種もあるが、ここでは原始的なインラインタグでの方法を説明する。
なお、この方法は一般的なものだから、MT4iに限らず使える。

■基本：表示をセンターに

<div align="center">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

設定はスタイルタグで設定する。

■文字色を変更したいとき

<div align="center" style="color:#999999;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■文字サイズを設定したいとき

<div align="center" style="color:#999999; font-size:1.2em;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■上マージン（余白）を設定したいとき

<div align="center" style="color:#999999; font-size:1.2em; margin-top:4px;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■下マージン（余白）を設定したいとき

<div align="center" style="color:#999999; font-size:1.2em; margin-top:4px; margin-bottom:0px;">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

■上下左右にマージン（余白）を設定したいとき

<div style="color:#666666;font-size:0.8em; margin:4px 10px 4px 10px; ">
<TMPL_VAR NAME="GOOGLE_AD">
</div>

MT4iにGoogle Adsenseを入れる方法（サンプル付き）

2008年11月28日 08:55 |
MT4iを携帯用にしたMovable Typeを使って使っている人で、携帯版のグーグルアドセンス（google adsense）を入れたいと思っている人にGoogle Adsenseを埋め込む方法。

いくつかの方法があるが、まずはmt4i.cgi内に埋め込む方法。

mt4i.cgiのファイルを開き、以下のサンプルを追加。

その1
        # 結果をテンプレートに埋め込む
        $template->param(BLOG_LOGO => &index_title_logo);
↓
        # 結果をテンプレートに埋め込む
        $template->param(BLOG_LOGO => &index_title_logo);
        $template->param(GOOGLE_AD => &google_ad);

その2
    # fill in some parameters
    $template->param(BLOG_LOGO => &index_title_logo);
↓
    # fill in some parameters
    $template->param(BLOG_LOGO => &index_title_logo);
    $template->param(GOOGLE_AD => &google_ad);

その3
# ----- 概要 -----
sub index_blog_description {
の上あたりに（場所ば他でも可能）
↓

# ----- Google -----
sub google_ad {
    my $str;

use LWP::UserAgent;
use Time::HiRes qw(gettimeofday);
use URI::Escape;

〜省略（最後の部分はちょっと変更する）

if ($google_ad_output->is_success) {
  $str = $google_ad_output->content;
}else{
  $str = "[ad]";
}

    return $str;
}

これでmt4i.cgiの変更は終わり。

次に、テンプレートの変更。

tmplフォルダにあるindex.tmplを開く。

Google Adsenseを挿入したい場所に、
<TMPL_VAR NAME="GOOGLE_AD">
と入れ、保存。

各記事の詳細ページにGoogle Adsenseを入れたい時は、
individual.tmplを開き、
Google Adsenseを挿入したい場所
例えば、
<TMPL_INCLUDE NAME="header.tmpl">
の下に、
<TMPL_VAR NAME="GOOGLE_AD">
と入れ、保存。

タイトルよりも上にGoogle Adsenseを入れたい場合は
header.tmplに入れておくといい。




Google AJAX Feed APIを使ってブログパーツを作る（その3）

2008年9月26日 16:31 |
■星占いを表示するブログパーツを作る（ライブドア編）

レンタルブログやレンタルホームページといった、PerlやPHP等のプログラムが使えないサイトの中に、外部にある他のサイト（他ドメイン）で公開されているRSSを、Javascriptのみを使って掲載する方法。

通常Javascriptでは別ドメインのファイル(RSS)を取得すること（クロスドメイン処理）は難しいので、Googleが提供しているGoogle AJAX Feed APIを使う。

Google AJAX Feed
http://code.google.com/apis/ajaxfeeds/

■例：ライブドア（http://fortune.livedoor.com/）の星占いを表示するブログパーツ

ライブドアの星占いでは、その日の全星座の運勢をRSSで配信している。
そこで、それぞれのRSSからデータを取得成型して表示させることにする。

そのまま使えるサンプルコードはこれ

<script type="text/javascript">
google.load("feeds", "1");
function initialize(){
    var feed = new google.feeds.Feed("http://fortune.livedoor.com/xml/astro12.rdf");
    feed.setNumEntries(12);
    feed.load(function(result){
        if(!result.error){
            var container = document.getElementById("feed");
            var useFeed = "";
            for(var i = 0; i < result.feed.entries.length; i++){
                var entry = result.feed.entries[i];
                useFeed += '<a href="' + entry.link + '">' + entry.title + '</a><br>';
                useFeed += entry.contentSnippet + '<br>';
            }
            container.innerHTML = '<div class="horoscope">' + useFeed + '</div>';
        }
    });
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="feed"></div>
</body>
</html>

上記コードを記載したページにアクセスすると、以下のように表示されるはず。
星座名部分には、詳細結果が記載されているページにリンクされている。
（各結果はその日によって変わる）

牡羊座
人間関係は、万事順調となりそうです。あなたの人柄がものをいう日でしょう。友人の家に招待されたとき、親
牡牛座
周囲の注目を浴びそうな日ですので、言動がうまくいけば大きな幸運がもたらされる反面、失敗すれば大きなダ
双子座
小さな事件が、トラブルへと発展しそうな運気のようです。ただし、その原因は弱気なあなたにあるようです。
蟹座
トラブルのために、人間関係にひびが生じる予感があります。欲を表に出しすぎると、あなたのその欲張りさに
獅子座
このところしっくりいかなかった友人と仲直りをするチャンスです。素直な気持ちであなたのほうから声をかけ
乙女座
周囲からの期待が、あなたにとって重圧となることがありそうな日です。その重圧が大きな負担になり、途中で
天秤座
あなたの優しい思いやりの言動で、周囲の人たちとの関係が、さらに展開する幸運期を迎えています。心を穏や
蠍座
あなたに対する評価がよくなっていく幸運な日です。少々の無理難題でも、自分のことより相手の身になって対
射手座
周囲と対立してしまいそうな日です。無理矢理、自分の考えを押しつけたり、自己中心的な態度をとっていると
山羊座
人間関係が活発な日でしょう。周囲の人との交際から、有益な情報を得ることができたり、何か手助けをしても
水瓶座
調和が幸運のカギになる日です。単独で進んでいったり、あなた自身が前面に出てリーダーシップを取って物事
魚座
親しい友人との関係が、一時的にうまくいかなくなる予感があります。その友人とあなたの間に第三者が割りこ

あとはCSSを使ったりinnerHTMLを修正・変更して試してもらいたい。

リンクをクリックした時に表示される点線を消す

2008年2月15日 17:33 |
リンクをクリックすると、その範囲に点線が表示されるが、場所によっては見栄えが悪いこともある。
点線を消すにはcssに以下の設定を加えればいい。

a {
    outline: none;
 }

ただし、全部の表示が無くなるとユーザビリティが低下することが考えられる。

そこで、必要なリンクのみ、点線を消す方法。

消したいリンク個別に、onFocus="this.blur()"を追加する。

例；
<a href="index.html" onFocus="this.blur()">トップページへ</a>

この方法でユーザビリティの低下を最小限にすることができる。



IEのイメージツールバーを消すメタタグ

2007年11月26日 18:45 |
IEのイメージツールバーを消すメタタグは

<meta http−equiv＝"imagetoolbar" content＝"no" />


これを</head>の前に入れておきましょう。
« CSS・Javascript | メインページ | アーカイブ | PHP・MySQL »

RECOMMEND SITE

iPhone対応サイトを探すなら『iPhoneStyle Links』
iPhone専用またはiPhoneに最適化されているサイトを紹介。

iPhone iPodのブログコミ
iPhoneとiPodについて書かれたブログを紹介。流行やブームの兆しをブログでキャッチ。

UMPC NetBookの情報比較
UMPC選びに役立つブログを紹介

UMPC Collection
最新UMPCと周辺機器

このアーカイブについて

このページには、過去に書かれた記事のうちHTML・XMLカテゴリに属しているものが含まれています。

前のカテゴリはCSS・Javascriptです。

次のカテゴリはPHP・MySQLです。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

NEW!!

HTML・XML: ARCHIVES

RECOMMEND

ハッスルサーバー
ロリポップ