デジタルゲート – ホームページ制作やリニューアル、サイトの企画・制作・運営をしています

HTML

  • Javascript複数のセレクトメニュー（プルダウンメニュー）どちらかが変更されたらGETで送信したい時

    ·

    master

    表示の絞り込み等で複数のセレクトメニューを使用している時、送信ボタンをクリックしなくてもセレクトメニューに変更があった時点で送信してくれると便利な場合がある。

    ちなみにセレクトメニュー（プルダウンメニュー）が１個の場合は

    Javascript

    function navi(c){
var class = c.options[c.selectedIndex].value;
location.href = '?c=' + class;
}

    HTML

    <form method="get" action="" name="form">
	<select name="class" onChange="navi(this)" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">１組</option>
		<option value="2">２組</option>
	</select>
</form>

    上記ではクラスのプルダウンを変更すると同ページにGETで引数が付いた状態でジャンプする。

    例　http://www.digital-gate.com/?c=3

    セレクトメニュー（プルダウンメニュー）が２個の場合は

    Javascript

    function multipleNavi(obj){
var class = document.form.class.value;
var group = document.form.group.value;
location.href = '?c=' + class + '&g=' + group;
}

    HTML

    <form method="get" action="" name="form">
	<select name="class" onChange="multipleNavi()" id="class-items">
		<option value="0">全クラス表示</option>
		<option value="1">１組</option>
		<option value="2">２組</option>
	</select>
	<select name="group" onChange="multipleNavi()" id="group-items">
		<option value="0">全グループ表示</option>
		<option value="1">グループ1</option>
		<option value="2">グループ2</option>
	</select>
</form>

    上記ではクラスまたはグループいずれかのプルダウンを変更すると同ページにGETで両方の引数が付いた状態でジャンプする。

    例　http://www.digital-gate.com/?c=2&g=1

  • iPhone対応サイトの作り方（その3）

    ·

    master

    iPhone専用のページを用意して対応する方法

    iPhoneからのアクセスの場合、iPhone用ページにリダイレクトする

    ■構成しているページがPHPの場合（.php）

    $hua = $_SERVER[“HTTP_USER_AGENT”];

    if(ereg(“iPhone”,$hua)){

    header(“Location: http://digital-gate.com/i/”);

    }


  • iPhone対応サイトの作り方（その2）

    ·

    master

    同じページでレイアウトのみを変更して対応する方法

    iPhoneからのアクセスの場合、iPhone用CSSに自動的に切り替える

    ■構成しているページがhtmlの場合

    javascriptを使ってスタイルシート(CSS)を切り替える方法

    if(navigator.userAgent.indexOf(‘iPhone’) != -1){

    document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”>’);

    }else {

    document.write(‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css”>’);

    }

    ■構成しているページがPHPの場合（.php）

    ※ユーザーエージェントを取得

    $is_iphone = strpos($_SERVER[‘HTTP_USER_AGENT’],”iPhone”);

    または

    $hua = $_SERVER[“HTTP_USER_AGENT”];

    if(ereg(“iPhone”,$hua)){$is_iphone = 1;}

    ※iPhoneなら、iPhone用のスタイルシートを出力

    if($is_iphone){

    $css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/iphone.css”/>’;

    }else{

    $css = ‘<link rel=”stylesheet” type=”text/css” href=”./css/pc.css” />’;

    }

    なお、いずれの場合も、PCでのアクセス用のコンテンツや広告等、iPhoneでは不要なものは、

    その部分を

    <div class=”for-pc”>PC用アフィリエイトコード等</div>

    としておき、

    iPhone用のスタイルシートに

    .for-pc{display:none;}

    としておくことで、無駄な表示を減らすことが可能。



  • iPhone対応サイトの作り方（その1）

    ·

    master

    同じページ、レイアウトも変更せず対応する方法

    iPhoneでPC向けページを表示させた場合、デフォルトで横幅980pxを想定して表示するようになっている。

    つまり、少し前に作られた横幅が750px等のサイトの場合、左右に無駄な余白ができ、さらに表示が小さくなる。

    そういった場合、以下のメタタグを入れることにより、無駄な余白を無くすことが可能。

    ※サイトの左右が750pxの場合

    <meta name=”viewport” content=”width = 750″ />

  • CSSスプライト（CSS Sprite）でサイトを高速化する方法

    ·

    master

    CSS Sprite・CSSスプライトとは、ページに表示される全部の画像をひとつにまとめて一枚の画像にしておき、表示する際にその一枚の画像から必要な部分のみをCSSで切り出して使うテクニック。
    簡単な例として、メニュー等で画像を使い、ロールオーバーによる画像変更をする場合、ひと昔前であれば、通常時とマウスオーバー時の画像をそれぞれ用意し、Javascriptでプリロード、同様にJavascriptで画像を差し替える。最近では、通常時とマウスオーバー時の画像を一枚にまとめておき、CSS・スタイルシートを使って画像位置を変える。といった方法がよく使われてきていたが、これをさらに全面的に使うのがCSSスプライト（CSS Sprite）と呼ばれる方法。

    確かに、サーバーへのリクエストが減るため軽量化されることが多いが、画像の作成、CSSの設定が面倒なのも事実。
    そういった場合には、Sprite Creatorを使うといい。
    http://www.floweringmind.com/sprite-creator/
    で公開されているこのサービスは、1枚の画像から特定の画像を取り出すCSSを作成するためのツールで、画像をアップロートして切り出したい画像部分を選択すると、それに対応したCSSが自動生成される。

    さらに、既存の画像ファイルをCSS Sprite・CSSスプライト化したい場合には、画像をまとめてくれるCSS Sprite Generatorを使う。
    http://ja.spritegen.website-performance.org/
    使っている画像をまとめてzip圧縮してアップロードすると、１枚の画像にしてくれる上に、CSS SpriteのCSSも自動的に生成してくれる。様々な設定が可能で、クラス名につけるCSS接頭語も設定できるので、既存のサイトのCSSスプライトにも便利だろう。

  • SmartyでHTMLタグを有効にする方法

    ·

    master

    OpenPNEで使われているSmartyは、通常HTMLタグが無効になるようにエスケープされる。
    文字データを取得し表示する場合等はこのままで構わないが、アフィリエイト用タグやGoogleアドセンス、Google Analytics、RSSデータ等、タグをエスケープして欲しくない場合もある。
    そんな場合は以下のようにnodefaultsを使うことでHTMLタグを有効にすることができる。

    ■SmartyでHTMLタグを有効にするサンプル

    ({$hoge:nodefaults})

    ※通常のSmartyでは、{$hoge}が置き換わるようになっているが、OpenPNEの場合、({$hoge})と表記する。

    有効にしたい部分にnodefaultsを使うだけで、読み込むデータがそのまま表示されるようになる。

  • Google AJAX Feed API カスタマイズ：HTMLタグを使う

    ·

    master

    Google AJAX Feed APIを使ってブログパーツを作る（その4）
    Javascriptだけを使って外部RSSを取得して掲載。

    ■カスタマイズ（innerHTMLを使ったタグ使用）

    Javascriptサンプル

          feed.load(function(result) {
            if (!result.error) {
              var container = document.getElementById(“feed”);
              for (var i = 0; i < result.feed.entries.length; i++) {
                var entry = result.feed.entries[i];
                var div = document.createElement(“div”);
                div.appendChild(document.createTextNode(entry.title));
                container.appendChild(div);
              }
            }
          });
    ↓
    feed.load(function(result) {
            if (!result.error) {
                var container = document.getElementById(“feed”);
                for (var i = 0; i < result.feed.entries.length; i++) {
                    var entry = result.feed.entries[i];
                    container.innerHTML += “<a href=’” + entry.link + “‘>” + entry.title + “</a>■” + entry.content + “<br />”;
                }
            }
        });

    これで

    タイトル■内容
    タイトル■内容
    タイトル■内容
    〜
    タイトル■内容

    となる。（タイトルにはリンク付）

  • リンク文字の下線（アンダーライン）を点線にするCSS

    ·

    master

    ユーザビリティから言えば本来の利用方法とは言えないので、全体で使うのはお薦めしないが、タイトルや他と区別したい時などに使う一つの方法として。

    なお、1pxの太さのdottedは「IE」ではdashedになるのでdottedにしたい場合は2px以上にするといい。

    <style type=”text/css”><!–
    a {
        text-decoration: none;
        color: #0000B1;
        border-bottom-color: #0000B1;
        border-bottom-style: dotted;
        border-bottom-width: 1px;
    }
    –></style>

  • SEO・SEMに最適なHTMLの書き方

    ·

    master

     SEO・SEMに最適なHTMLの書き方の基本は、綺麗なソースデータを作成することです。

    無駄なタグを作らないことは基本ですが、外部スタイルシートを用いることにより装飾用のタグは極力排除することも大切です。
    また、文章の構成をきちんと考えてマークアップすることも必要です。
    つまり、SEO・SEMだからといって特別なタグを考える必要はないのです。
    文章の構造を定義する代表的なタグに<H1>から<H7>がありますが、検索エンジンで<H1>のタグに囲まれた単語が重要視されるからといって、安易にページ内の見出しタグを全部<H1>にしたりしてはいけません。あくまで文章の構造に素直に、タイトル、大見出し、注見出し、小項目、等を段階的に区分し的確にタグを割り当てていくようにします。