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. 投稿記事一覧が開きます。

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

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

Bloggerのブログタイトルのカスタマイズ

Bloggerを始めてデザイン的にどうしても気になったのは、ブログタイトルの部分が大き過ぎるということ。縦幅が大き過ぎ。私は野暮ったく感じました。
それで縦幅を狭めるべく、ネット検索したのですが、これだけは説明がありません。
さてどうしようかと考えていて、あ、画像を使えばいいじゃん！という結論になりました。
以下同じような悩み？を抱えている人たちのために、手順を記します。
背景が透明なシンプルなタイトル画像を作り、ブログに使用します。

1. 画像編集ソフトの準備



なんでもいいのですが、無料ということで、GIMPを使います。
バージョンは現時点で最新の、2.8.16。Macでも日本語がインラインで入力できます。
公式サイトでダウンロードします。
http://www.gimp.org/downloads/

2. ブログタイトル画像の作成

背景の作成

1. インストールが完了したら、GIMPを立ち上げます。
2. ファイルメニューで「新しい画像」を選択。
3. キャンパスサイズ（画像サイズ）を決めます。
4. 重要: キャンパスサイズの横幅は820pxにします。これがブログタイトル画像に最適な横幅です。縦幅は個人の好みで構いません。私は100pxにしました。
5. 詳細設定を表示して、塗りつぶし色を「透明」にします。
6. OKボタンをクリック。画像が開きます。

文字入力と調整

1. 左側にあるツールボックスから「A」と表示されているテキストツール・アイコンをクリックします。
2. 背景の上でクリック。そのままブログタイトルを入力します。文字（レイヤー）ができましたね。
3. 左下のツールオプションで、文字サイズを調整します。背景に収まる範囲で好みのサイズにします。
4. 同じくツールオプションで、文字色を決めます。ここはあなたのお好みで。
5. フォントを決めます。ここであなたのセンスが問われます。ツールオプションで左上にある「Aa」アイコンをクリック。フォントの一覧が表示されるので、好みのフォントを選択します。
6. サイズと色とフォントの調整が終わったら、今度は位置決めです。十字型をした移動ツール・アイコンをクリック。
7. 文字の部分をクリックします。黄黒の点線がグレーの線に変化するのが分かると思います。それを確認してから、ドラッグして位置を決めます。

画像の保存

1. ファイルメニューから「名前をつけてエクスポート」を選択。
2. 開いたウィンドウの一番上に名前ボックスがあるので、適当な名前をつけます。
3. 左側にある「場所一覧」で保存場所を指定します。
4. 一番下にある「ファイル形式の選択」の三角ボタンをクリック。
5. ファイル形式を選択します。PNG画像を選択して下さい。
6. エクスポートボタンを押します。
7. 再びウィンドウが開くので、そこにあるエクスポートボタンを押します。文字の背景が透明なタイトル画像ができます。

3. 作成した画像をブログタイトルとして使用する

ここからはWEBブラウザでの作業です。

1. ブログ管理画面を開きます。
2. 左側にある「レイアウト」メニューをクリックします。
3. Headerボックスの右下にある編集をクリック。
4. 「ヘッダーの制定」ウィンドウが開くので、イメージ欄で画像をアップロードします。
5. プレースメントにある「タイトルと説明の代わり」のラジオボタンをクリック。
6. 保存ボタンを押します。これで終了です。

4. 確認

どんな作業でも確認は大切。確認→修正→確認の繰り返しですね。
パソコンではどうでしょうか？スマホでの確認も忘れずに。どうでしょうか？満足できたでしょうか？OKですか。よかった。お疲れ様でした。

5. 補足

今回は背景が透明なシンプルなタイトル画像を作りましたが、背景に大切な愛猫の写真を使ってもいいですし、文字も影を付けて立体的にしたり、またメタリック仕様にすることもできます。
このあたりは、ネット検索して挑戦してみてください。

Bloggerとモバイルファースト

今や時代はスマートフォン。
Google検索の利用数も、パソコンメインだった時代から、モバイルメインに。

当然ブログも「モバイルファースト」。コンパクトな画面とタッチスクリーン操作に適化したブログでないと、利用してもらえない。

Bloggerはカスタマイズの自由度が魅力の一つだが、今はカスタマイズに当っても、スマートフォンで見て、分かり易いか、読み易いかを第一に考えないと、利用してもらえないどころか、戸惑わせるだけだろう。

モバイル時代の解決策の一つとして、レスポンシブWebデザインがあるが、Bloggerに限定して言えば、私は疑問。

私の理解では、レスポンシブWebデザインは、基本にパソコンでデザインされたWebサイトがあり、それをいかに効率よく、モバイルに対応させるかというコンセプトだと思う。
そのために、モバイルに対してはいかにコンパクトな画面に表示対応させるかということに特化している。確かに投稿記事はコンパクトな画面に収まり読み易くもあるが、肝心のユーザー・インターフェイスがすっぽりと抜け落ちている。

スマホ利用者が求めているのは、コンパクトな画面にきっちりと表示してくれるブログというよりは、タッチスクリーン操作で快適に読めるブログだろう。単に上から下にスクロールすることを求めるようなブログは、敬遠されるだろう。ましてや下にガジェット類が次々と現れるとなると、戸惑うだけだろう。

私は、スマホがパソコンとははっきりと違ったユーザー・インターフェイスを持っている以上は、そのユーザー・インターフェイスを最大限活かすようなWebデザインをすべきだし、それが今後主流になるのではないかと思う。というかそうでなくては、生き残れないだろう。

と、話が大風呂敷になってしまいましたが、大切なのは、今Bloggerを使っているあなたが、私がなにができて、なにをすべきかということです。

パソコン版のカスタマイズは、基本的には背景色等はモバイルにも反映されるので、背景色等を決めるには、スマホでも確認して、読み易いかチェックするということぐらいでしょうか。

あとモバイル版は、シンプルで使い易くよくできていると思いますが、記事のブラウジングができないのが、最大の欠点だと思います。
モバイル版のカスタマイズもできますが、ブラウジング機能の追加となると、これはGoogleに期待するしかないのかな。

以上羊頭狗肉の記事でした。