スマホにおいてメニュー・サイドバー表示を最適化

テンプレート名:BBC-LazyLoader(BBC-013)

 

フルスクリーンのローディングアニメーションを表示1・2カラム・レスポンシブ対応

フルスクリーンのローディングアニメーションを表示
1・2カラム・レスポンシブ完全対応

【 BBC-LazyLoader(BBC-013)】はすべてのデバイスに完全対応
テーマとして設計された、多目的ワードプレスのテーマです。
スマホ表示においてメニュー・サイドバー表示が最適化されています。

 

【 BBC-LazyLoader 】ユーザーの早期離脱を防ぐために!

ユーザーは訪れたページの全てを見るわけではありません。あなたにも、あるページを訪問してページ読み込みに時間がかかりすぎ「やっぱり止めた」とすぐに戻るボタンをクリックして帰った経験はありますよね。こんな時に一瞬読み込みのアニメーションを表示させる(LazyLoad)ことにより、バックグラウンドでページの読み込みを行い、実際のページ読み込みにかかる時間を訪問者に少なく感じさせることが出来ます。

LazyLoad:ページの読み込みなどの際にフルスクリーンのローディングアニメーションを表示

fakeLoader

 

レスポンシブWebデザイン仕様

BBCテンプレートは全てのテーマが、レスポンシブWebデザイン仕様(PC・スマートフォン・タブレット等各デバイスに完全対応)です。
Googleも公式にレスポンシブWebデザインを推奨しています。これからのSEOではレスポンシブWebデザインが強みになります。

レスポンシブWebデザイン

注:上記のはめ込み画像は Prallax(BBC-012)で、今回とは別のものです。

 

モバイル・デバイスのアクセスが急増!

あるブログのアクセス解析(デバイス比)

モバイル・ディバイスのアクセスが急増!

これだけスマホが日常に浸透してくると、財布を忘れるよりもスマホを忘れる方が恐怖!という方も少なくないと思います。

また、毎日1回以上スマホから何らかの検索をしている人が約80%というデータもあるようにWeb制作における「スマホ対応」の必要性は増すばかり。

 

モバイル・デバイスのメニュー・サイドバー表示

WordPressテーマのスマホ表示は、結構頭を悩ませるところです。中でも特に、グローバルナビメニューや、サイドバーのスマホでの扱いには悩むところです。

BBCはこれまで、グローバルナビの場合は通常のパソコンと同じ表示方法でした。サイドバーの扱いはもっとぞんざいで、回り込みを解除して、本文の下に表示させるということぐらいしか、出来ていませんでした。

ただ最近、スマホのような幅の狭い端末で表示させる場合、横からスライドインしてくるメニューもいいなと思い始めました。
特にスマホで表示させると、下に行ってしまって、あまり日の目を見ないサイドバーなども、スライドインするようにすれば、多少利用者も増えるかもしれません。

という事で、今回はBBCテーマをスマホでの表示のみ、フッターに固定させてスライドインさせ、メニューやサイドバーに手軽にアクセスできるようにしてみたいと思います。

スライドイン1

 

ニュースアプリ経由などでは・・・

しかし、はてなブックマークのアプリ、グノシーのアプリなどは同じようなフッター固定式のメニューを搭載しており、それらを経由して読まれた記事はそのアプリのフッター固定メニューに重なってしまい操作できなくなるのです!下図はグノシー経由のブログの例です。

gunosy

 

スマホの表示でかぶっている項目を外してしまうと大変なことになります。そのことを踏まえて、また操作性の意味合いからヘッダーに固定するタイプのメニューに変更しました。

 

ヘッダー固定に変更

◯アクセス後のページ、すぐにはメニューは表示されていません。

Top-Sidr1

 

◯下に少しスクロールすると固定メニューが現れます。

Top-Sidr2

 

トップページや一覧ページなどでは、以下のようなヘッダーでの固定表示ボタンになります。

[Menu] グローバルナビメニューを左からスライドイン表示させるボタン
[Home] ホーム(トップ)ページに戻るボタン
[Top] スクロールをトップに戻すボタン
[Sidebar] サイドバーを右からスライドイン表示させるボタン

 

◯投稿ページでは、下記のようなボタン配置で表示します。

Top-Sidr5

 

[Menu] グローバルナビメニューを左からスライドイン表示させるボタン
[Home] ホーム(トップ)ページに戻るボタン
[Prev] 前の記事に戻るボタン
[Next] 次の記事へ移動するボタン
[Top] スクロールをトップに戻すボタン
[Sidebar] サイドバーを右からスライドイン表示させるボタン

 

◯Menuをクリックすると、左からメニューがスライドインします。また「閉じる」ボタンに変わります。

Top-Sidr4

 

◯Sidebarをクリックすると、右からサイドバーがスライドインします。また「閉じる」ボタンに変わります。

Top-Sidr4

 

多くの、スマホサイトで下に追いやられることが多いサイドバーも、これで多少有効活用される可能性が高まるかもしれません。

 

◯パソコンや画面の広い携帯端末(iPda等)は、下図のようなドロワーメニューになり、メニューアイコンをクリックすると、ドロワーが開きます。

pc-menu

 

✖️で閉じます。

iphone-menu

 

トップページにお薦め記事を表示

トップページにお薦め記事のアイキャッチ画像を表示出来ます。

recommen1

 

マウスオーバーで、記事タイトルが表示されます。

recommen2

 

初期設定では12記事の表示ですが、お好きな数に変更できます。

設定の仕方は、テーマオプションでお薦めしたい記事のカテゴリーを選ぶだけ。
勿論、表示させないことも出来ます。(初期設定では表示しない)

 

記事ページでのページネーション

個別記事ページ・ウインドウの左右に矢印アイコンが表示されます。
また、このアイコンはウインドウに追従します。つまりウインドウの上下センターに常に表示されるわけです。
それによりページビューが増える事が期待できます

pagination-1

 

マウスオーバーで記事タイトルとアイキャッチ画像が表示されます。

pagination-2

 

ソーシャルアイコンの表示

テーマオプション設定で、ソーシャルアイコンを表示できます。

sns-pc

PCでの表示(ページ下に表示されます。)

 

sns-mobile

スマートフォンでの表示(メニュー下に表示されます。)

 

もちろん記事下には、シェアーアイコン・ソーシャルブックマークが標準で表示されます。

share-icon

 

スマホには、LINEアイコンが表示されます。

line

 

おすすめ記事の表示

個別記事ページの記事下に、おすすめ記事のアイキャッチ画像が表示されます。

recommend-1

 

マウスオーバーで記事タイトルが表示されます。

recommend-2

 

個別記事の更新日を表示

IT系など情報の陳腐化が激しいジャンルでは、その記事がいつの情報を反映しているかがとても重要です。
そういう人にとって「記事がどの時点の情報を反映しているか」はとても大事です。

update

注:必要のない方には、投稿者・公開日・更新日を個別に非表示にすることも出来ます。

 

個別記事にメタ情報とカスタムCSSを追加できる

サイト全体へのメタ情報は管理画面から設定できますが、その記事にだけ適用したい場合があります。
特にキーワードはサイト全体よりも記事ごとに設定するほうがSEO的にも良いのがわかっています。

また、「noindex」や「nofollow」も、まだボリュームが少ない記事には有効です。
勿論固定ページにも設定できるので、「特商法に基づく表示」などは、検索インデックスされてほしくない場合があると思います。
個別記事および固定ページの編集画面から設定できます。

meta

 

固定ページのサイドバー

固定ページに、独自のサイドバーを表示できます。

pages-sidebar

 

付属マニュアル

独自ドメインとレンタルサーバー

ワードプレスのインストール

ブログの設定・テーマオプションの設定・プラグインの設定

ソーシャルメディア(Facebook・Twitter・Google+)設定マニュアル

ワードプレス投稿基礎マニュアル

今まで誰もやらなかった、Retina対応画像の作り方

その他

 

  • デモサイト

 

価格:7,560円(税込)

 

お申し込みは、下記フォームからお願い致します。
決済完了後、ダウンロードURLなどを記したメールをお送りさせて頂きます。

お名前
メールアドレス
クーポン
支払方法






WordPress日本語テーマ制作