ここではグローバルメニュー・サイドメニューの作成と設置につて詳しく解説します!

ここまでできれば、後は記事を書くだけとなります!


グローバルメニューの作成・設置方法

グローバルメニューとは、ブログ上部に並んでいるメニューのことです。

globalmenu01

グローバルナビゲーションと言ったり、グローバルナビと略した呼び方もされています。
グローバルメニューの存在意義は、ブログの閲覧しやすさの向上の為にあります。

アクセス数の多い人気ブログを見てみると、ページ間の移動がしやすいんです。

あなたも経験があると思いますが、記事が面白いサイトってどこに何があるのかが一目瞭然で、初回アクセスでも思わずいろいろ見てしまいますよね。

そう、どこに何がある視覚的に分かる作りになっているかどうかって事がとても大切なんです。

整理して、メニューでブログの趣旨を伝える

コンテンツが分かりやすく整理され、探したい記事がすぐに見つかってこそ、
読者一人当たりのページビューや滞在時間は延びます。

ブログの目立つ場所に重要なコンテンツをまとめたメニューがあれば、
読者も快適にブログの中を移動することができますし
メニュー構成である程度どんなサイトなのかを伝えることもできます。

 

グローバルメニューに何のリンクを貼るかは、
ブログのジャンルによって読ませたいものも変わってくるでしょうから、
一概には言えませんが例として以下のようなものが考えられます。

  • トップページ
  • 商品レビュー一覧
  • 力を入れた記事
  • プレゼントや特典一覧
  • プロフィール
  • ブログランキング
  • メールフォーム
  • サイトマップ

とにかく読者に快適にブログ内を移動してもらうこと、
そして伝えたい重要なコンテンツに誘導することを意識して構成しすることがポイントです。

 

グローバルメニューの数があまりに多くなってしまうと逆に見にくくなるので、57個くらいが適度でしょう。

もちろんコンテンツがないうちはそれ以下でも構いません。

6日目で作成した固定ページをまずは設置してみましょう。

 

簡単なグローバルメニューの作成方法

では早速、実際の作成・編集方法です。
とても簡単なので、是非これを読んだら真似てメニューをいじってみてください^^

【ダッシュボード】【外観】【メニュ】でグローバルメニューの新規追加・編集ページへアクセスできます。

globalmenu02

新規作成時は、【メニューの名前】の項目に好きなメニュー名(例えばトップページ用メニュー等)を入力し
【メニューを作成】ボタンをクリックすれば新しくグローバルメニューが作成できます。

*テーマによって複数個所設置できるものがあるので、必要に応じて2個以上作ってください。

globalmenu03

メニューが出来ると、メニューの構造を決めることが出来ます。

下図の様に、どのページをメニュー表示させるか決めて、最後に【メニューを保存】をクリックして完成します。

尚、固定ページ名のまま表示させたくない場合は、【ナビゲーションラベル】で任意のメニュー名に変更が可能です。

例えば、固定ページ名が長すぎる場合に短縮した名前にする等。

globalmenu04

こんな時は・・・

ケース①

新規で作成した固定ページがどんどんメニューに追加されてしまう場合があります。

その場合は、同ページ内メニュー設定項目の【固定ページの自動追加】のチェックを外してください。

globalmenu05

ケース②

下図の様に、縦長にメニューを表示させたい場合があると思います。

globalmenu06

この場合は、下図の様に表示させたいメニューの下に1つずらして配置すればOKです。

globalmenu07

とても便利ですが、縦にメニューが展開して、

更に横に展開してゆくと逆にどこに何があるか分からなくなるのでやり過ぎには注意してください。

サイドメニュー(ウィジェット)の作成・設置方法

ウィジェットは、平たく言うとサイドバーのことを指します。

wijet05

使うテーマにもよりますが、読者さんにブログを開いた際にどこに何があるのか視覚的に認識してもらうことはとても大切です。

カテゴリー分けもそうですが

  • どんなカテゴリーがあって
  • どれだけの記事があるのか

を知ってもらうことによって読者さんにブログのメリットや得られるものを知ってもらうことが出来ます。

 

ウィジェットの追加・入れ替え方法

【ダッシュボード】【外観】【ウィジェット】の順でページを開きます。

wijet01

ウィジェット追加ページの左側に、【利用できるウィジェット】一覧が表示されています。
これを、右側のウィジェットの項目にドラッグ&ドロップで移動させれば、完了です。

*テーマによっては、サイドバーやサイドウィジェットと表記が変わりますが、内容は同じです。
*左側から移動させても、利用できるウィジェット一覧からは消えずに残ります。

wijet02

これで、無事にサイドバーにカテゴリーのウィジェットを追加することが出来ました。

wijet03

順番の入れ替えは、ドラッグ&ドロップで順番を入れ替えるだけでOKです。

wijet04

アバターなどの画像を掲載する方法

プロフィール用のアバターを表示させ、プロフィールページへリンクさせる為には
【テキスト】というウィジェットを使うととても便利です。

wegit01

①まずは、表示させたい画像を、【メディア】から追加し、画像のURLをコピーして適当なテキストに残しておきましょう。

daya7-01

新規追加(アップロード)した画像データは、ライブラリで確認が出来ます。
ライブラリから掲載したい画像をクリックすると、詳細画面がポップアップします。
そのページの右上のURLが画像のアドレスとなります。

daya7-02

②テキストのウィジェットを新規で生成し、以下のタグをコピペしてください。

■イメージを表示させるタグ

<Img Src=”表示させたい画像のアドレス”>

■表示させる画像のサイズ指定をする場合

 <Img Src=”表示させたい画像のアドレス” width=”画像の横幅” height=”画像の高さ”>

因みに、サイズは、ピクセル数もしくはパーセントで指定可能です。
予め画像のサイズを合わせておくのもいいですし、これを活用するのも手です。

画像のアドレスの箇所に、先にメディアで追加した画像のURLをコピペしてください。

■ リンクを貼るタグ

<A Href=”アクセスしてもらいたいアドレス(URL)”>文言もしくはイメージタグ</A>

■ リンクにマウスを乗せると説明文が表示される

<A Href=”アクセスしてもらいたいアドレス(URL)” Title=”説明文”>文言もしくはイメージタグ</A>

■ リンク先を別ページで表示させる

<A Href=”アクセスしてもらいたいアドレス(URL)” Target=”_blank”>文言もしくはイメージタグ</A>