WordPressでデザインを決める【グローバルメニュー・サイドバー】

wordpress-design

前回、前々回の記事はこちら

本当に使えるWordPress国内無料テーマは9個だけ厳選してみた

2015.10.28

サイトアフィリを始めるなら絶対インストールすべきプラグイン10選

2015.10.19

サイトのデザインとは、グローバルメニューやサイドバーなどの設定です。

グローバルメニューはレスポンシブ対応が当たり前の現在は、重要になってきています。
逆にサイドバーはサブコンテンツ的なものを設置しましょう。

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

グローバルメニューとは、サイトの上部に並んでいるメニューのことです。
当サイトでいうと、画像の部分です。

wordpress-design1

目がいく部分なので、ココにアクセスしてほしいカテゴリーやページを表示させる事で、訪問者も目的の内容にたどり着きやすくなります。

昔PCでの訪問者が多かった時は、サイドバーを充実させるのが重要でした。
ですが、スマホが多い現在はグローバルメニューをしっかり設置してあげた方が親切です。

特にスマホの場合にはグローバルメニューからのアクセスも多くなります。

 

グローバルメニューに入れる内容

グローバルメニューの構成は、初めて訪れて来た方にサイトの内容を伝られるものにします。
探したい内容がすぐに分かるようにしてあげてこそ、ページビューや滞在時間が延びていきます。

良いサイトってこのグローバルメニューが分かりやすい気がします。

一般的に内容は次のようなものを設置しましょう。

  • トップページ
  • サイトの内容が分かるカテゴリ
  • 独自コンテンツ
  • メール(コンタクト)フォーム
  • サイトマップ

 

独自コンテンツとは、他のサイトと区別するコンテンツです。
体験記や、Q&Aなどアフィリエイトする商品でユーザーが欲しがる情報コンテンツです。

特に独自コンテンツは、目につきやすく成約に繋がりやすいので目立つグローバルメニューに入れるのがおすすめです。

グローバルメニューの数が多すぎると、ゴチャゴチャした印象になってしまいます。
テーマによって入る数も変わってきますが、5
6個くらいが良いです

 

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

サイト立ち上げ当初は、新規に作成してあげる必要があります。

ダッシュボードの外観から「メニュー」を選んでください。

wordpress-design2

 

「メニューの名前」の分かりやすい名前を付けて、「メニューを作成」をクリックすれば新しくグローバルメニューが作成できます。名前は何でも構いません。

wordpress-design3

 

当サイトのグローバルメニューはこのような感じになっています。

入れたい内容を選んでクリックしていけばどんどん追加出来ます。

wordpress-design5

 

読んでもらいたい記事やカテゴリーも任意で入れられます。
その場合には「カスタムリンク」を使います。

wordpress-design6

 

また追加したものはドラッグして階層化する事も出来ます。

wordpress-design7

 

実際に見てみると、このようになります。

wordpress-design8

 

以上でグローバルメニューの設定は終了です。

訪問者にとって分かりやすいグローバルメニューを作りましょう。

 

サイドメニューの作成・設置方法

サイドバーにはサブコンテンツ的なものを設置しましょう。

当サイトでいうと、下図の部分です。

wordpress-design9

 

一般的に内容は次のようなものを設置しましょう。

  • カテゴリ一覧
  • 人気記事ランキング
  • メインではないがサブコンテンツになるもの
  • タグクラウド

アフィリエイトサイトの場合にはランキングなどを入れても良いです。

人気記事ランキングにはこちらを使いましょう。
All In One SEO Packの設定と使い方

 

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

サイドメニューにコンテンツを入れていくには、ウィジェットというものを利用します。

ダッシュボードから「外観」「ウィジェット」を選択します。
なお、テーマによっては、サイドバーの内容は変わります。

wordpress-design10

ドラッグ&ドロップで順番を入れ替えれば順番も変わりますのでどんどん追加していきましょう。

 

画像を入れたい場合

画像を挿入したい場合には、「テキスト」を使います。
サイドバーにテキストウィジェットをドラッグ&ドロップしましょう。

wordpress-design11

 

ドロップすると下図の様になります。

そしてダッシュボードから「外観」「メディア」を選択します。

wordpress-design12

 

入れたい画像のURLをコピーしてメモ帳などに貼付けておきましょう。

wordpress-design13

 

コピーしたらウィジェット」に戻り、以下のタグをコピペしてください。

画像を表示させるタグ

 <img src=”画像のURL“>
「画像のURL」の箇所に、先にメディアで追加した画像のURLをコピペしましょう。

 

また、画像のサイズを指定する事も出来ます。

 <img src=”画像のURL“” width=”画像の横幅” height=”画像の高さ“>

ピクセル数やパーセントで指定可能です。
ピクセル数の場合は数値のみ。%の場合は数字に「%」をつけてください。

  • ピクセル数の場合の例:<img src=”画像のURL”” width=”600″ height=”400″>
  • %の場合の例:<img src=”画像のURL”” width=”100%” height=”80%”>

保存しないと反映されませんので繰り返しながら確認しましょう。

 

先ほどのテキストウィジェットにタグをペーストして、最後に保存をクリックです。

wordpress-design14

 

サイドメニューの一番下に画像を表示させてみました。

wordpress-design15

 

以上で終了です。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です