どうも、ブログなんて物は書きたい事を自由に書けばいいじゃん。…的なイメージで普段から書いていので、今回もそんな感じで。
さて、Bloggerについて。
旧UIが廃止されたり、仕様変更が多々発生しています。海外には辛辣なフィードバックをしているユーザーもいたようです。確かに困惑する変更ではありますが、馴れればどうでも良いし、個人的に弄りやすい環境なので特に気にしません。
そんなBloggerについて、自身の使用しているテーマを見つめ直してみようと考えてみました。
使っているガジェットを見直してみる
ブログのデバイス別アクセスを見てみるとスマホによるアクセスが、圧倒的に多くなって来ました。
当方で使用しているテーマはいずれもレスポンシブ対応です。PCではサイドバーを表示した2カラムですが、スマホではレスポンシブデザインによりサイドバーをメインセクションの後部に配置したワンカラムデザインの状態に変換させています。
スマホによるアクセスが増えているという事は、閲覧者の殆どがワンカラムデザインのページを閲覧している事になり、読者はワンカラムデザインに視覚、操作性共に慣れきっているはずです。…たぶんね。
ならば、最初からワンカラムでも良いのでは？と思いましたが、PC環境でサイドバーが表示されたところで不都合もありません。
サイドバーに置かれたガジェットがスマホの限られたスクリーンを長々と占領して、スクロールが増える事で余り良いデザインでない気がします。
まずは、設置しているガジェットを再配置してスッキリさる事から考えましょう。本当は数値化すべきですが、まずは感で。
ガジェットの再配置を考えよう
使用している主なガジェットについて必要性や配置場所を考え直してみようと思います。
基本情報
プロフィール等に使う「基本情報」ガジェット。ブログの中の人を知りたくなるのでしょうか、意外とアクセスされています。サイドバーセクションかフッターセクションが適所と思いますが、常に表示されていなくても良さげ。
表示される標準スタイルがあまり良くないので、いずれcssを弄る気ではありますが、今回はそのままサイドバーセクションに放置します。
About （含むプライバシーポリシー）
固定ページに記載してヘッダーセクションに設置した「ページ」ガジェットにリンクを配置。
フッターセクションに再配置する予定。
サイトマップ
個人ブログのレベルでは不要な気はします。コチラも固定ページに作ってあり、ヘッダーセクションに設置した「ページ」ガジェットにリンクを配置。
閲覧回数は少ないのでフッターセクションで十分。
お問合わせフォーム（連絡フォーム）
当方のブログでは、任意の固定ページを開いた時にだけ「連絡フォーム」ガジェットが表示されます。
ヘッダーセクションに設置しているページガジェットにリンクを配置しています。
数回メールによる問い合わせを受けていますが、頻度は少ないです。コチラもフッターセクションで十分。
検索
有ると無いとでは閲覧者の使い勝手が変わって来るガジェット。ページの上部、フッター付近が理想な気がします。
ページ上部だとページ読み込みのスコアに影響しそうな気がしますが、確証はありません。とりあえずヘッダーセクションに配置しておきます。
人気の投稿
PCにて閲覧時は、サイドバーセクションに設置する事で投稿記事を読み進めているうちに目に止まる可能性はあるかと。けれど、検索結果からやって来る一見さんは開いた記事以外は興味無く、クリックしてまで読まないと思うし、投稿記事の後に表示されていればいいかな。
アーカイブ
個人的には不要なガジェット。他の方のブログ閲覧時もほぼ使用しませんが、ほぼ設置してますよね。
無いと寂しい為、とりあえずサイトバーセクションに放置しておきます。
ラベル
必須ガジェットですが、今ひとつ設置場所に悩んでしまいます。個人的には検索ガジェットと同じセクションに配置しべきと思いますが、なかなか良い感じに配置できません。
今回は思い浮かばない為、サイドバーセクションに放置しておきます。
…等と良いのか悪いのか分かりませんが、とりあえずデモページで、フッターセクションに配置出来るガジェットは再配置してみました。
また、どうしてもサイドバーが必要なら一旦隠しておく事もありかと。
サイドバーを横から出してみるのもいいかも…。
前述の通りガジェットの見直しをデモページで行ってみました。
今回対象のテーマはVaster2。
ヘッダーセクションに配置しているページガジェットを廃止して、新たにフッターセクションにページガジェットを追加。
そこにAbout、サイトマップ、お問い合わせの固定ページへのリンク配置しています。
さらにサイドバーセクションには細工を施してみました。
PCで表示した時はサイドバー付の2カラム、スマホ閲覧時はワンカラムの基本デザインはそのままですが、ヘッダーセクションに配置したボタンをクリックする事でサイドメニューが左側から出てくる様にしてみました。
デメリットは、
- サイドバーを出すのにワンクリック増える事。
- 縦型アドセンスをサイドバーに配置出来ない位？自動広告だとどうなるか分かりません。
サイドバーを横から出す原理は簡単。cssのtranslateを使い、普段は表示領域から左（マイナス位置）にズラしてスクリーンから外して配置、ボタンを押した時に表示エリアに移動させるだけ。
細かい調整はまだですが、以下デモページのリンクです。
デモページです。
左側から出てくるサイドバーのコードはリンク先に記載しています。
デモページで問題無さそうなら順次適用していこうと思っています。
*なかなか良いかと思っていたのですが、アドセンス自動広告とは相性が悪く、はみ出したり不格好になってしまう事が発生して改善の余地ありです。
変更しました。デモページを参照下さい。
以上
コメント