2016/02/10

Blogger: スマホの横バーの活用

今やスマホの時代。Bloggerのみなさんも、スマホで自分のブログがどう表示されるか、チェックされていると思います。

さて、本題ですが、リンクページを作ると、スマホに横バーが表示されます。
下の写真を見てください。


「雑記帳」というブログ名の下に、「ホーム」と表示された淡いグレーの横バーがあるのが分かると思います。
最初見るとなんだろう?とちょっと戸惑いますが、せっかくあるのだから、活用してみましょう。
まず初めに、すっきりとした方が好きだという人のために、この横バーを消す方法を記しておきます。

 横バーを消す

  1. ブログの管理画面を開きます。
  2. 左にあるメニューから「テンプレート」をクリックします。
  3. モバイルの下にある歯車アイコンをクリックします。
  4. 「モバイル テンプレートを選択」で「カスタム」を選択します。
  5. 保存ボタンを押します。

これで横バーは消えます。とても簡単ですね。
ところで横バーは消えた訳ではなく、一番下にあるプロフィールのさらに下に小さなボタンに変身して?あります。

このボタンもHTMLを編集することによって消せますが、本題ではないので、割愛します。
どうしても消したい人は、ネット検索で調べてください。「Blogger モバイル」でヒットします。

さてこの横バーを活用してみましょう。

モバイル テンプレートは、スマホで投稿記事を読むには、とてもよくできていると思います。ただ投稿記事を一覧できるようなナビゲーション機能がないのが、もったいないというか、最大の欠点だと思います。

そこで、Googleがナビゲーション機能を用意してくれるまでは、横バーで記事一覧が表示されるようにしましょう。Do it yourself!
以下、その手順を記します。

1. 投稿記事一覧ページを作る

まず投稿記事一覧ページを作ります。

これはgalifeさんの素晴らしい記事『Blogger 記事 を 一覧 表示 する ページ の 作成方法』を読んでください。
http://garafu.blogspot.jp/2013/07/blogger.html

記事の内容を理解したら、英語表記ですが、galifeさんが用意してくれているデモページを使うのが、色々な出力スタイルも試せますし、いいと思います。
http://garafu.github.io/blogger.toc/demo/index.html

できたでしょうか?この投稿記事一覧ページの素晴らしいところは、記事を投稿したら、自動的に更新して、一覧に加えてくれることです。

そうそうページの題名は「投稿記事一覧」等、訪問してくれた人に分かりやすい題名を付けてください

2. リンクページを作る

作り方が分からない人は、ネット検索してください。

3. モバイル テンプレート

「カスタム」にしている人は、「デフォルト」に戻してください

4. スマホでチェック

  1. 「ホーム」横バーをタップ。
  2. 下にサブウィンドウが開くので、あなたが付けた投稿記事一欄ページの題名をタップ。ちなみに私はシンプルに「投稿記事一覧」としました。
  3. 右にある「完了」をタップ。
  4. 投稿記事一覧が開きます。

下の写真がスマホで投稿記事一覧が表示されている様子です。


素晴らしい。パチパチ。
これでスマホでも興味のある投稿記事を探して読むことができます。
ただし訪問してくれた人が、この使い方に気づいてくれたらの話です。