Zenback のブログパーツの表示が出来ました。
今回はモバイルで表示させた場合にも Zenback が
表示されるように追記してみます。
GHP：Google Blogger でテンプレートを編集して Zenback を投稿記事の後に表示する
一部の作業が他の記事と重複します。
Zenbackであなたのブログに全てのフィードバックを。 -
http://zenback.jp/
０．まずはZenbackに登録してみる（PC版と同じ）
右上の新規登録から登録します。
特に難しい箇所はないので省略します。
登録が完了すると最後にスクリプトコードの取得が出来ますので
これを控えておきます。
１．コードを変換する（PC版と同じ）
テンプレートを編集して、上記のコードを張付ける場合は
あらかじめ文字を置換しておく必要があります。
１－１．
いちど作業０で取得したコードをメモ帳などに貼り付けて
下記の通りに文字を置換します。 実体参照というやつです。
「"」→「"」
「<」→「<」
「>」→「>」
「&」→「&」
１－２．
また、記事別で表示された時のみ Zenback の結果一覧を表示させたい場合は
コードを次のタグで囲みます。
<b:if cond='data:blog.pageType == "item"'>
Zenback のコード
</b:if>
詳しくは下記の記事を参照
GHP: Blogger：テンプレートを編集して 記事別表示 で表示する項目を選択する
２．モバイルテンプレートを有効にする。
既に設定されている場合は不要ですが、今までモバイルテンプレートの
編集を行った事がない場合は、事前準備を行います。
２－１．
Blogger の編集画面を開きます。
左側に「テンプレート」の項目があるので選択します。
「モバイル」の下にある設定ボタンを押します。
２－３．
「はい。携帯端末でモバイルテンプレートを表示する。」を選択します。
「モバイルテンプレートを選択」で「カスタム」を選択します。
２－４．
「保存を押しておきます。」
３．Blogger に張付ける
作業０でモバイル画面のカスタマイズが出来るようになりました。
次にアドセンスの表示コードをテンプレートに貼り付けます。
３－１．
Blogger の編集画面を開きます。
左側に「テンプレート」の項目があるので選択します。
「ブログで使用中」の下の「HTMLの編集」を押します。
テンプレートが表示されます。
ごちゃごちゃと訳の解らん英数字が並びます。
一度、キーボードの「CTRL」 ＋「A」などで文字を全選択→コピーして
メモ帳などに張付けておく、バックアップ作業をしておく事を勧めます。
３－４．
落ち着いてフォームの文字をどこでも良いのでマウスで選択します。
キーボードの「CTRL」を押しながら「F」キーを押します。
すると、右上にSearchと書かれた「検索ボックス」が表示されます。
３－５．
<div class='post-header-line-1'/>
↑この文字をコピーして、「検索ボックス」に張付けて
キーボードの「Enter」キーを押して
テンプレートから <div class='post-header-line-1'/> を検索します。
何度か「Enter」キーを押すと解るのですが
テンプレートの中には <div class='post-header-line-1'/> が２箇所存在します。
左の数字を見ながら、先頭から１番目にある
<div class='post-header-line-1'/> を探し出します。
この １番目の <div class='post-header-line-1'/> の行のすぐ下に
書いた内容が、モバイル版の記事の先頭に表示されます。
また、数行下の、<data:post.body/> の下に書いた内容が
モバイル版の記事の末尾に表示されます。
今回は、記事の後に Zenback を表示させたいので、こんな風にしてみました。
自分は後で追記箇所が追いやすくなるように <!-- --> で日付をメモしています。ソースコード見られると見付かっちゃうので、この辺はお好きなように。
張付けが完了したら、ページ上の「テンプレートを保存」を押します。
４．表示させてみる。
URL の末尾に ?m=1 を付けて、モバイル版表示にしてみます。
0 件のコメント :
コメントを投稿