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

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

最新の記事 /   

<twitter経由でコメントする(BlognPlus)リンクの作成
旧・JR(国鉄)大社駅と保存蒸気機関車D51774>

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
 ( 私が現在・使用している「BlognPlus(ぶろぐん+)Ver.2.5.3」での改造です。) φ(..)メモメモ
 ( 3/31・リリースされた「Ver.2.6系」は、操作体系が変更されている様です。)


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

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

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

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

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

 【私の場合】

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

<td style="height: 100px; width: 50px; background-color: rgb(204, 255, 255); text-align: center;">w150px</td><td style="height: 100px; width: 200px; background-color: rgb(255, 255, 153); text-align: center;">w600px</td><td style="height: 100px; width: 50px; text-align: center; background-color: rgb(255, 204, 204);">w150px</td>

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

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

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

<td style="border: 1px dashed rgb(153, 153, 153); height: 100px; width: 50px; text-align: center; background-color: rgb(255, 255, 255);">w150px</td><td style="border: 1px solid rgb(153, 153, 153); height: 100px; width: 200px; text-align: center; background-color: rgb(255, 255, 153);">w600px</td><td style="border: 1px dashed rgb(153, 153, 153); height: 100px; width: 50px; text-align: center; background-color: rgb(255, 255, 255);">w150px</td>
                    ↓
<td style="background-color: rgb(255, 255, 153); height: 100px; width: 200px; text-align: center; border:1px rgb(153, 153, 153) solid;">w600px</td>

 ・・・で問題はその 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 の前、カッコ「 } 」の後に挿入します。

<td style="font-weight: bold; width: 120px; vertical-align: middle;">1619 :     } </td><td style="text-align: center; font-weight: bold; width: 230px; background-color: rgb(204, 255, 204); vertical-align: middle;">(この位置に挿入)</td><td style="font-weight: bold; width: 150px; vertical-align: middle;"> else{</td>

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・パソコン) から閲覧時の数になります。

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



 ・・・の設定のことです。
これで、
  ・「携帯」は、携帯専用スキン。
  ・「iPhone」は、各自・自分で作った好みの iPhone 用スキン。
    そして
  ・その他は、通常のパソコンのブラウザで見るスキン。
     ...になります。

・・・と言う訳で、相当・お手軽な方法 (^_^) ですが、一応動作してます。

( 2009-10-27に、下記・画像を追加しました。)

【 ▼PC(パソコン)のブラウザーで見る 】


【 ▼iPhoneで見る 】        【 ▼ 携帯電話で見る 】



参照リンク / TB ping送信先:
カテゴリー【パソコン】

:: ::

<script language=”javascript” type=”text/javascript” src=”http://counting.hatelabo.jp/widget?count_id=5046” charset=”utf−8”></script>


| カテゴリー:パソコン | 00:00:00 | comments (0) | trackback (0) |




  Hatena::Bookmark  
 del.icio.us
twitter経由でコメント




コメント

コメントする

 (管理者の「チェック後・反映」の時が有ります)
 (なお投稿頂きましたコメントは著作権・著作隣接権・著作人格権・等を放棄(不行使)して頂きます)








トラックバックURL

 (管理者の「チェック後・反映」の時が有ります)
 (なお投稿頂きましたトラックバックは著作権・著作隣接権・著作人格権・等を放棄(不行使)して頂きます)

 ( 1クリックで全選択されます ▼ )

 ( トラックバックURLは変化します。最新の物をご利用下さい。 )

トラックバック

最新の記事 / このページの一番上へ /   

<twitter経由でコメントする(BlognPlus)リンクの作成
旧・JR(国鉄)大社駅と保存蒸気機関車D51774>


[読み易く] [標準]
文字[大] [標準]


follow me on twitter
@streetcar
Follow me !

@portram
こちらはBot(無人投稿)アカウントです

プロフィール

カテゴリー

アーカイブ


カウントダウン

リンク


スクリプト



新着記事


アクセスランキング


検索



コメント


トラックバック

144

シンジケート

この日記のはてなブックマーク数 del.icio.us - Everybody's bookmarks
track feed
Locations of visitors to this page

Amazon 広告


Google 広告


ValueCommerce広告

spacer.gifspacer.gifspacer.gifspacer.gifspacer.gif
ベストリザーブ

LinkShare広告

 iTunes Music Store(Japan)spacer.gif iTunes Store(Japan)spacer.gifANAの旅行サイト ANA SKY WEB TOURspacer.gif











▼ テスト

テスト


アクセス解析&SEM/SEO講座&ブログ for オンラインショップ開業