Blogger:ラベル設定(4)モバイルサイトでラベルリストを表示

前の関連記事:Blogger:ラベル設定(3)同じラベルの投稿タイトルのみを表示

テンプレートのHTMLの編集が必要


Blogger:テンプレート編集(5)ウィジェットはインクルードの入れ物の記事でテンプレートのHTMLの編集でウィジェット属性を設定すればモバイル表示できることがわかりました。

まずはBlogger:ラベル設定(1)ラベルのリスト表示のとおりパソコンサイトでラベルのリストを表示させるガジェットを追加しておきます。

それから管理画面→テンプレート→HTMLの編集

一番下までスクロールすると右のサイドバーの部分のHTMLがあります。


私の場合はタイトルを「テーマ別」に設定してあります。

その行の左にある右向き黒三角形をクリックします。


<b:widget id='Label1' locked='false' title='テーマ別' type='Label'>

にモバイル属性を付け足します。

<b:widget id='Label1' locked='false' title='テーマ別' type='Label' mobile='yes'>

上にある「テンプレートを保存」ボタンをクリック。

勝手に順番が入れ替わって

<b:widget id='Label1' locked='false' mobile='yes' title='テーマ別' type='Label'>

になります。

モバイルテンプレートをカスタムにする必要がある


これだけではまだモバイルサイトに反映されません。

反映させるためにはモバイルテンプレートをデフォルトからカスタムに変更する必要があります。

管理画面→テンプレート


モバイルの下のギアのアイコンをクリックします。


モバイルテンプレートを一番下の「カスタム」にします。

「保存」をクリックします。




自己紹介の上にラベルリストが表示されるようになりました。

参考にしたサイト


Blogger PCとモバイルでウィジェットを切り替える方法 - 元「なんでもエンジニ屋」のダメ日記
モバイルテンプレートをカスタムにする必要がある。

次の関連記事:Blogger:ラベル設定(5)Googleさん、「全て選択解除」ボタンを作ってほしいな

PR

4 件のコメント:

  1. いつも、こっそり参考にさせていただいています。ありがとうございます。
    質問なのですが、ラベルリストからラベルを選択し、ページ遷移した後、ラベルリストを確認すると、クリックしたものがただのテキストになってしまいます。
    こちらのサイトはリンクのままですが、何か特別なことをされているのですか?

    返信削除
    返信
    1. 面白いことを発見されましたね。
      このブログではBlogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法でやったように投稿数の表示を5個になるようにラベルリストから呼び出したときにURLの最後に「?max-results=5」を追加しています。
      その状態だと確かにラベルリストのそのラベルのリンクもアンカーがついています。
      それがただのテキストに変化することがあるのかと思って、iOSのSafariでアクセスしてみるとやはりただのテキストにはなりませんでした。
      ところがiOSのサファリでウェブバージョンにアクセスしてみるとご指摘の通り選択したラベルのリンクがただのテキストになっています。
      不思議に思っていろいろやってみるとラベルのインデックスページの最後のURLによって変化することがわかりました。
      ガジェットのデフォルトの設定のURL http://p--q.blogspot.jp/search/label/クラウド利用レポ? でアクセスするとただのテキストになりました。
      これに表示投稿数の制限をしたURL http://p--q.blogspot.jp/search/label/クラウド利用レポ?max-results=5 でアクセスするとただのテキストにはなりませんでした。
      モバイルサイトのURL http://p--q.blogspot.jp/search/label/クラウド利用レポ?max-results=5&m=1 ではただのテキストにはなりません。
      モバイル端末からみたウェブバージョンのURL http://p--q.blogspot.jp/search/label/クラウド利用レポ?m=0?max-results=5 ではただのテキストになっています。ただしこのURLは間違っており投稿数の制限はできていません。本来は「?m=0?max-results=5」ではなく「?m=0&max-results=5」とすべきですがBlogger:モバイルサイト(8)Bloggerのタグではウェブバージョンをモバイル端末からみていることを判別できずの問題でできていません。
      モバイル端末からでも http://p--q.blogspot.jp/search/label/クラウド利用レポ?m=0&max-results=5 とするとただのテキストにはなりません。
      「?max-results=5&m=0」としてもただのテキストにはなりません。
      以上のことからラベルインデックスページのURLで表示投稿数を指定するmax-resultsオプションをつけるとただのテキストにならないように思います。

      削除
  2. 何時も参考にさせて頂いています。こちらの背景が点滅しているのは意図的なものなのでしょうか?点滅するたびに読めなくなるので困っています。スマホ版だけでも直していただけませんか?

    返信削除
    返信
    1. 背景が点滅とはとても読みにくくて申し訳ありません。
      私の環境では背景が点滅したことがなく再現できないので、すぐに解決は困難と思いますが今後機会があれば改善したいと思いますので、可能な範囲で点滅する環境を教えていただけるでしょうか?
      OS名とそのバージョン、スマホの機種、ブラウザ名とそのバージョン等がわかれば助かります。
      私の環境はipod touch(iOS6) Safari、Kindle Fire HDX 7その他PC(WindowsXP,Windows7,linuxBean)のIE,Chrome,Firefox,Operaでいずれも点滅したことがありません。
      特定の記事のみ点滅するのならその記事のどこかに点滅させるタグが埋め込まれてしまっているのかもしれません。

      削除