ワック スタイル
i
n
f
o
✕ とじれる
about : wack-style.
ワックスタイルについて

wack-style.は飼育中のハリネズミ(ピグミーヘッジホッグ)の飼い方やファッション・webマーケ・仕事に役立つ情報等をお届けするwebサイトです。

著者:
now reading
現在のページ

smart-big

TITLE  » WordPressを1時間でスマートフォン対応してみる
DATE 2012.04.16
CATEGORY 制作実績
TAG  , , , , , ,
ABOUT ハリネズミ(ピグミーヘッジホッグ)飼育飼い方や値段など総合ブログサイト。ペットの餌やりやゲージ・里親販売情報まではりねずみの情報得るならwack-styleへ!
+ SHARE THIS PAGE
        
reccommend
オススメ記事

WordPressを1時間でスマートフォン対応してみる

WordPressを1時間でスマートフォン対応してみる


2012
04.16



wack-style.がスマートフォン対応いたしました。是非アクセスしてみて下さい。

以下に今回行ったスマートフォン対応を記録しておきます。

1.PC/スマートフォンでの振り分け設定

wack-style.はWordPressを使用し構築しています。
function.phpファイルに以下のコードを追加しました。

スマートフォン向けの振り分けを自前で行う:WordPress私的マニュアル

以上でスマートフォン用にPCとは別の-sp.phpファイルを読み込むことが出来ます。

2.画像のリサイズ

ブログの投稿画像をスマートフォン用に画像をリサイズする必要があります。
そのためには1.コーディングで作成した-sp.phpのファイルにjQueryで画像をリサイズする以下のスクリプトを追加することで、スマートフォンページのみ画像がリサイズされます。

jQuery :: 画像を指定サイズにリサイズして表示する [Tipsというかメモ] 

<script type="text/javascript">
    jQuery.event.add(window, "load", function(){
        var fw = 100;        //fixed width
        var fh = 100;        //fixed height
        var sl = 'img.hoge'; //selector
        $(sl).each(function(){
            var w = $(this).width();
            var h = $(this).height();
            if (w >= h) {
                $(this).width(fw);
            } else {
                $(this).height(fh);
            }
        });
    });
</script>

var fw = 100;、var fh = 100;の数値を変更することでモバイル用にカスタマイズします。

YouTube/Video

動画は以下の方法が有効かも?(未使用)
YoutubeやHTML5video等の埋め込み動画のサイズをwindow幅に合わせて動的にリサイズ/可変にする方法 | HTML5 – CSS3 mag 

アクセス

アクセスは以下QRコードを読み込んでみてください。

著者: