« 今週のお買い物 (2007.04.15～04.21) | トップページ | ほんとうは(BlogPet) »
2007.04.22
ココログプロの既存の上級テンプレートを携帯対応にする
ようやく、先日、 ココログが正式に携帯で閲覧できるようになったんですが、ココログプロで上級テンプレートを使っている場合、携帯対応以前に生成したテンプレートをそのまま使い続けているといつまで経っても携帯対応になりません。携帯に対応するための作業が必要になります。
なお、上級じゃないテンプレート(通常のテンプレート、リッチテンプレート)の場合は、「デザインの編集」でサイドバーに「QRコード」を表示する設定にして、ブログの再構成を実行するだけで、携帯対応になります。ココログベーシックやココログプラスの場合も同じ方法で、携帯対応になります。(参考: ブログ：ココログ：ココログサポート：使い方ガイド：４：QR コード)
ということで、上級テンプレート(自分でカスタマイズ可能なテンプレート)を携帯対応にする方法について、解説します。
準備
新規テンプレートの作成
- まず、ココログの管理画面の「デザイン」-「新規テンプレートの作成」で、新しいテンプレートの作成を開始します。
- 「レイアウト」は、今のブログと同じ構成のものを選んでおくのが無難でしょう。
- 「表示項目」は、サイドバーに「QRコード」を表示するようにする(必須)のを忘れないように。それ以外の設定は適当で構いません。
- 「表示項目の並べ方」は特にいじらず、「ステップ 4: テーマを設定」へ
(後で作業しやすくするために、「QRコード」をいちばん下に配置しておくといいかも) - 「テーマ」も特にいじらず、「ステップ 5: 名前と説明を設定」へ
- 名前と説明を入力して、「このテンプレートを保存」します。
名前は「200704テンプレート」、説明は「携帯対応作業用」とでも入力しておけばいいでしょう。
注意: 間違っても「このテンプレートを保存して適用」の方のボタンは押してはいけません。押してしまうと、いま使っているテンプレートが置き換わってしまいます。
テンプレートの確認
- ココログの管理画面の「デザイン」-「テンプレートの管理」でテンプレート一覧を表示させます。
- さきほど作成したテンプレートを「確認」します。
- サイドバーに「携帯URL」という文字列が表示されていると思います。一方、QRコードは表示されていないかもしれません。この段階では、QRコードが表示されていなくても構いません。
- 「確認」画面を閉じ、「テンプレートの管理」に戻ります。
- さきほど作成したテンプレートにチェックを入れ(左端の白抜きの四角をマウスでクリック)、「上級テンプレートへ変換」ボタンを押します。
- 変換が終わったら、生成された上級テンプレートを編集します。
サイドバーの編集
- sidebar の編集画面を開きます。
- 以下のような文字列を探します。(上級テンプレート生成時期によって微妙に内容が違う可能性がありますので、必ずしも、以下の文字列と一字一句完全に一致するとは限りません)
<div class="module-qrcode module"> <h2 class="module-header"><$MTTrans phrase="Mobile URL"$></h2> <div class="module-content"> <img src="<$MTBlogURL$>qrcode.png" /><br /> <a href="mailto:?subject=<$MTWeblogTypeCastURLMailToSubject encode_url="1"$>&body=<$MTWeblogTypeCastURL$>%3Fblog_id%3D<$MTBlogID$>%26user_id%3D<$MTUserID$>"><$MTTrans phrase="Send mobile url of this blog's"$></a><br /> </div> </div>
- 上記で探し出した文字列を適当なテキストファイルにコピー、保存しておきます。[1]
Main Index Template の編集
- Main Index Template の編集画面を開きます。
- 以下のような文字列を探します。(上級テンプレート生成時期によって微妙に内容が違う可能性がありますので、必ずしも、以下の文字列と一字一句完全に一致するとは限りません)
<MTWeblogTypeCastIfActive><link rel="alternate" media="handheld" href="<$MTWeblogTypeCastURL$>?blog_id=<$MTBlogID$>&user_id=<$MTUserID$>" /></MTWeblogTypeCastIfActive>
- 上記で探し出した文字列を適当なテキストファイルにコピー、保存しておきます。[2]
Individual Archives の編集
- Individual Archives の編集画面を開きます。
- 以下のような文字列を探します。(上級テンプレート生成時期によって微妙に内容が違う可能性がありますので、必ずしも、以下の文字列と一字一句完全に一致するとは限りません)
<MTWeblogTypeCastIfActive><link rel="alternate" media="handheld" href="<$MTWeblogTypeCastURL$>?__mode=individual&blog_id=<$MTBlogID$>&id=<$MTEntryID$>&user_id=<$MTUserID$>" /></MTWeblogTypeCastIfActive>
- 上記で探し出した文字列を適当なテキストファイルにコピー、保存しておきます。[3]
QRコードの生成
- 「テンプレートの管理」画面に戻り、現行テンプレート(上級テンプレート)の元になった(上級テンプレート変換前の)テンプレートの「表示項目」を編集します。
- 「表示項目」のサイドバーのところの「QRコード」にチェックを入れ、「変更を保存」します。
- 「確認」で、サイドバーに QRコードが表示されていれば OK。表示されていない場合は、もう一度、「表示項目」の「変更を保存」を実行してみてください。何回かやれば、表示されるようになると思います。
現行テンプレートの携帯対応作業
- 「デザイン」-「現在のテンプレートを編集」で現行テンプレートの編集を開始します。
- sidebar の編集画面を開き、[1] で保存したコードを、QRコードを表示したいところに貼り付けます。貼り付けが終わったら、「保存」ボタンを押します。
- Main Index Template の編集画面を開き、[2] で保存したコードを、 <head> ～ </head> の間の適当なところに貼り付けます。貼り付けが終わったら、「保存」ボタンを押します。
- Individual Archives の編集画面を開き、[3] で保存したコードを、<head> ～ </head> の間の適当なところに貼り付けます。貼り付けが終わったら、「保存」ボタンを押します。
- 「反映」ボタンを押します。
- 「すべてのファイル」を「反映」してください。
以上で、携帯対応作業は終わりです。
上記の作業をやった後、「月別アーカイブ」や「カテゴリ別アーカイブ」の携帯対応作業が抜けてるんでは? という疑問を持つと思いますが、実は、今のところ、ココログでは「月別アーカイブ」と「カテゴリ別アーカイブ」の携帯対応は実現されていないようです。ブログのトップページと個別記事ページのみが携帯対応になります。
補足
上記の方法で生成される(=ココログの方で用意してもらえる) QRコードはブログのトップページのQRコードだけです。個別記事ページのQRコードは生成されません。要するに、サイドバーに表示される QRコードはブログのトップページの QRコードになります。
ちなみに、ブログのトップページの携帯向け URL は
またはhttp://app.m-cocolog.jp/t/typecast?blog_id=ブログID&user_id=ユーザID
http://app.m-cocolog.jp/t/typecast/ブログID/ユーザID
のようになります。どちらの URL でもアクセスできます。携帯からだけではなく、PC からもアクセスできます。
一方、個別記事ページの方の携帯向け URL は
http://app.m-cocolog.jp/t/typecast?__mode=individual&blog_id=ブログID&user_id=%ユーザID&id=記事ID
と
http://app.m-cocolog.jp/t/typecast/ブログID/ユーザID/記事ID
の2種類あり、どちらでもアクセス可能です。
投稿者: tsupo 2007.04.22 午後 07:05
| 固定リンク
| 
| 
| 
|
アマゾンわくわく探検隊
トラックバック
この記事のトラックバックURL:
この記事へのトラックバック一覧です: ココログプロの既存の上級テンプレートを携帯対応にする:
新着情報
