Blogn Plus（Ver.2.5系）iPhone用スキン条件分岐（お手軽方法）::streetcar weblog 第二世紀

HOME > パソコン > Blogn Plus（Ver.2.5系）iPhone用スキン条件分岐（お手軽方法）

【お知らせ(マウスでクリック)2010-04-20】

Blogn Plus（Ver.2.5系）iPhone用スキン条件分岐（お手軽方法）

記事ID別・パーマリンク：	http://www.streetcar.jp/blog/index.php?e=837
記事タイトル：	Blogn Plus（Ver.2.5系）iPhone用スキン条件分岐（お手軽方法）
記事YMD別・パーマリンク：	http://www.streetcar.jp/blog/index.php?d=20090627

author : kenji

　( 私が現在・使用している「BlognPlus(ぶろぐん＋)Ver.2.5.3」での改造です。)

　( 3/31・リリースされた「Ver.2.6系」は、操作体系が変更されている様です。)

　Blogn+ は、スキンの選択を携帯のユーザーエージェントで判断し、携帯なら携帯専用のスキン (iskin.html)、そうでなければPC用の各種スキンに分岐させています。

　iPhone で自分のブログを見るにあたり、そのままではパソコン用のスキンが適用されてしまいます。

　横幅が有る (横幅が長い) サイトは、iPhone の safari が自動的に最適に縮小してくれます。
　全体をざっくりと眺めるには便利なのですが、実際に個々の記事の文章を読む段になると、縮小表示のままでは文字が小さ過ぎてその都度・拡大しないと読めません。(特に老眼鏡が必要な人など...

www)

　これでは面倒なので、iPhone 用に、専用のスキンを適用させて表示される様にしてみました。(お手軽方法

)

　なお・あくまでも、これは私の自分のサイト用の為に作りました。もしご自分のサイトの横幅が (iPhoneが縦位置で) 320px程度・或は iPhone が横位置で閲覧する場合で 400px 強の場合は、特に大きく縮小されないと思いますので、専用のスキンも要らないかもしれませんね。

　【私の場合】

　パソコンで表示させている私のスキンは、全体がディスプレイ横幅 1024px に収まる様に作っています。(実際には約 950px 程度)
　・両側のサイドバーエリアが各々横幅 150px
　・中央の記事部分の横幅が 600px (実際には安全を見て 610px)程度
　　.....に css を切っています。(横幅固定表示)

w150px

w600px

w150px

　記事が文字だけなら横幅可変 (リキッドスタイル) でもいいのですが、私の場合・記事内に写真が多く、それも一番大きい写真サイズで横 600px で作っています。

　また、横幅が小さい写真・例えば横幅 300px の写真を2枚横に並べた時は、現在ほとんどすべて css の float で表示させていますので、巾が狭く足りなくなった分・その写真が下に落ちるだけなのですが、昔・ブログをはじめた頃のものは、テーブルを打ってレイアウトを固定していた時も有りました。ですので記事欄の巾は、600px 確保しておきます。

　ゆえに新たに作る iPhone 用スキンの先頭に、viewport を 610px 程度に宣言しておけば最適になるのでは無いかと思っています。
　　<meta name="viewport" content="width=610" />
　もちろん、両側サイドバーの部分が無い様に (iPhoneでは表示させない様に) スキンを作ります。

w150px

w600px

w150px

↓

w600px

　・・・で問題はその iPhone 専用のスキンを、どのように表示されるか？なんですね。

【Blogn Plus ver.2.5.3 の場合】

　解凍・展開したばかりの状態で、「index.php」の1606行目「スキン選択処理」以下
　(1608行目の途中・青色文字の部分・・・　$ua[0] =='SoftBank' ||　・・・は、多分・皆さん自身で後から追加記述されていらっしゃると思います。)

1606 : //--------------------------------------------------------------------スキン選択処理

1607 : function blogn_skin_selector($mode,$entry_id, $date, $user_id, $category, $ua) {

1608 :      if ($ua[0] == 'ASTEL' || $ua[0] =='UP.Browser' || preg_match("/^KDDI/","$ua[0]") || $ua[0] == 'PDXGW' ||$ua[0] == 'DoCoMo' || $ua[0] == 'J-PHONE' || $ua[0] == 'Vodafone' || $ua[0] =='SoftBank' || preg_match("/^MOT/", "$ua[0]") || preg_match("/DDIPOCKET/","$ua[1]") || $ua[0] == 'L-mode') {

1609 :       define("BLOGN_MOBILE_KEY", 1);

1610 :        if($ua[0] == 'J-PHONE') {

1611 :           define("BLOGN_PNG_KEY", 1);

1612 :        }else{

1613 :           define("BLOGN_PNG_KEY", 0);

1614 :        }

1615 :        // スキンファイル読み込み

1616 :        $skin = file(BLOGN_SKINDIR."iskin.html");

1617 :        $skin = implode("",$skin);

1618 :        $skin = blogn_mbConv($skin, 0, 4);

1619 :     }else{

　この1618行目と1619行目の間に、もう一つ・下記の様に分岐を挟み込みました。

　正確には、1619行目
else の前、カッコ「 } 」の後に挿入します。

1619 : }　

(この位置に挿入)

　else{

1619 :     }

1620 :  // -------------------- 追加

1621 :      elseif

1622 :      (

1623 :     preg_match("/iPhone/","$ua[1]") ||

1624 :      preg_match("/iPod/","$ua[1]")

1625 :     )

1626 :                   {

1627 :                       define("BLOGN_MOBILE_KEY",0);

1628 :                       {define("BLOGN_PNG_KEY", 0);}

1629 :                       // スキンファイル読み込み

1630 :                       $skin = file(BLOGN_SKINDIR."iphone.html");

1631 :                       $skin = implode("",$skin);

1632 :                       $skin = blogn_mbConv($skin, 0, 4);

1633 :                    }

1634 :  // -------------------- 追加

1635 :     else{

　方法としては、元の1608行から1618行をコピペし「 elseif 」以下に貼付けて、不要な部分を消す・・・　そんな感じでしょうか・・・

　skin デイレクトリに新たに自分で作った iPhone 用スキンを入れておきます。
　上記の例では「 iphone.html 」と言うファイル名にしています。

　なお上記の例の、行数で言えば1627行目の
　　define("BLOGN_MOBILE_KEY", 0);
　0 = 写真表示・ 1 = [PIC] 表示、となります。

　「 0 」の写真表示にするということは、ブラウザ (PC・パソコン) からの閲覧の設定と同じになり、1ページの記事通常表示件数はブラウザ (PC・パソコン) から閲覧時の数になります。

　管理画面＞初期設定＞・・・の