Paroday

Paroday:ニュースやアニメのレビュー、FC2ブログのテンプレート・プラグインなどを配信しています。

もしかして Parody ではありませんか? yes

FC2ブログ、スマートフォン版のテンプレート編集機能を実装

 FC2ブログは30日までに、スマートフォン版のブログデザインをカスタマイズできる(テンプレート編集)機能を実装した。いつものように、一部のサーバのみ、試験的に先行実装されており、段階的にすべてのサーバに実装されるようだ。

FC2ブログ - カスタマイズ後のスマートフォン表示確認

 ライブドアブログが先月14日にリリースしたスマートフォン版ブログカスタマイズ機能は、HTMLが編集できず、配置を入れ替えるだけの積み木カスタマイズだったが、FC2ブログのスマートフォンテンプレートは、PCテンプレートと同様のカスタマイズが可能で、レイアウトを自由に変更できるようだ

 現在、公式テンプレートは2種類しか用意されていないが、将来的には使用できるテンプレートも増え、共有テンプレート機能がリリースされるものと思われる。

 ただ、出力される記事内のHTMLコードについては、携帯版と同一のため、記事内のYoutube動画などの貼付けコードが取り除かれてしまう仕様はそのまま残っている。記事内の<script>、<iframe>、<table>などの要素は除去され、文字色などのstyle属性も正常に反映されないこともある。

 テンプレート中のタグについては、正常に反映されるため、スマートフォン向けのJavaScriptを使用したアクセス解析や広告などを設置することができる。

設定方法

 通常のテンプレート編集と同様に、管理ページサイドメニューの[テンプレートの設定]から行う。

 スマートフォン用のテンプレート管理をクリックすると現在使用しているテンプレートの編集ページが表示される。適用テンプレートがない場合は、[公式テンプレート追加]からテンプレートを追加する。

 編集の際の注意点としては、PCと同じように、「<%ad>」「<%ad2>」がテンプレート中に含まれていないと更新できないので気をつけよう。

テンプレートプレビュー確認方法

(注)実装されていないサーバでは確認できない。

 ブログURLの末尾に「?sp=1」を加えることでプレビューできる。できない場合(既に「?」が付加されているURL)は、「&sp=1」を付けよう。

http://paro3day.blog4.fc2.com/blog-entry-67.html?sp=1

プラグインの設定

 通常のプラグインと同様に、管理ページサイドメニューの[プラグインの設定]から行う。

 スマートフォン用のプラグイン管理をクリックすると現在使用しているプラグインの一覧が表示される。初期状態は何もないので、[公式プラグイン追加]から必要に応じてカテゴリなどを追加する。


 スマートフォン用テンプレート対応済みのブログ(一部サーバ)では、レスポンスヘッダの文字コードが「utf-8」ではなく「utf8」になっているようだ。
Content-Type:text/html;charset=utf8

関連記事
  1. comment
  2. anonymous 2011-09-03 18:11 No.689 #-URL

    山田さん

  3. paruparu 2011-09-28 13:46 No.709 #-URLhttp://arinogotokuatumarite.blog19.fc2.com/

    スマフォ用公式テンプレートに搭載されているスクリプトについて 質問させてください。
    以下の部分ですが、これがどの部分に関連しているのか、ファイルを見ても理解できないので... もしよろしければざっくりとで良いので教えて頂けないでしょうか。。

    <script src="http://templates.blog.fc2.com/template/sphone/basic_blue/jquery.js"></script>
    <script src="http://templates.blog.fc2.com/template/sphone/basic_blue/iphone_resize.js"></script>

    <script type="text/javascript" charset="utf-8">
    <!--android-->
    window.onresize = function(){
    setOrientation();
    }
    <!--/android-->

    window.onload = function() {
    setTimeout(function(){if(window.pageYOffset === 0){window.scrollTo(0, 1);}}, 100);
    setTimeout(function(){setOrientation();},300);
    }
    function submit(){
    document.form1.submit();
    }
    </script>

    当初、これ丸ごと外したりしていたのですが、見た目の動きなどに関連しているのかなと思い 今は元の状態のまま戻しています。 <%ad_overlay> は自分のでは外しています。

    外すと、見た目や動きがおかしくなってしまうことはあるのでしょうか。

  4. Pdy 2011-09-28 22:22 No.711 #-URL

    ■jquery.js
    jQueryライブラリです。
    公式テンプレではプラグイン表示のスライドに使用しています。
    『basic_blue』では使用してないようなので、jQueryを今後使わないのであれば、なくても問題ないと思います。
    あっても他の動作に影響がでることはたぶんないと思います。
    (使う場合は公式サイトから最新の圧縮版をダウンロードして上げなおしても)

    ■iphone_resize.js
    ページ内で使用されている画像(img要素)のサイズ(横幅・高さ)をスマートフォンの幅に合わせて自動調整するスクリプトです。
    スマートフォンの向きを変更したときにも画像サイズの調整が行われます。
    元の画像が大きいときに縮小します。
    調整させないのであれば、外しても問題ないと思います。
    ■script要素内の <!--android-->~<!--/android-->と
    setTimeout(function(){setOrientation();},300);
    の1行も画像サイズ自動調整関連です。
    iphone_resize.jsを削除するときはこちらも一緒に削除します。

    ■window.onload = function(){
    setTimeout(function(){if(window.pageYOffset === 0){window.scrollTo(0, 1);}}, 100);
    }
    はページを開いたときに表示されているアドレスバーを隠します。
    アドレスバーが表示されてると閲覧の邪魔みたいです。
    バーはスクロールさせると勝手に消えるため、必要なければ削除しても問題ありません。

    ■function submit(){
    document.form1.submit();
    }
    はコメント投稿です。
    外すとコメントが投稿できなくなります。
    外す場合は、テンプレのコメント投稿ボタンをa要素からinput要素に変更して、type属性をsubmitにする必要があります。
    <input type="submit" value="投稿" />

     FC2の広告でこれらのスクリプトが使われる可能性もなくはないのですが、そのときはFC2側が何か対処をするのではないかと。

  5. paruparu 2011-09-28 23:03 No.712 #-URL

    丁寧な解説ありがとうございます。 大変参考になりました。

コメント

Icon ※必須 :
Pass  ※入力した英数字を識別コードとしてNoに表示(123→LkZag.iM)

トラックバック

http://paro2day.blog122.fc2.com/tb.php/789-e590c1ac

  1. trackback