『Stinger5-Cheetahカスタマイズ速習』もあっという間に第04回になりました。

目次はこちら:

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう ←今ここ

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる

 

子テーマを入れてカスタマイズの準備をし、カスタマイザーを使ってブログのデザインを整えたら、やっとブログの『機能面』での調整が始まります。

 

そう、ナビゲーションやフッターを作らなければならないのだよ!

 

今回は、WordPressの管理画面で『外観』をクリックしたときに表示されるメニューのうち

  • ウィジェット
  • メニュー

の2つについて、じっくりと説明していきます。

setting-the-menu-01

 

これで、『デザイン』と『ナビゲーション』の2つが揃うので、最低限のブログ準備が整うことになります。

 

ちなみに、説明なんていらないからおすすめの設定だけ教えて!って方は、↓の目次から、『ウィジェットのおすすめの設定箇所』という項目へ飛んでくださいませ。

 

 

ウィジェットの9つのパーツについて知ろう

Stinger5-Cheetahのウィジェットパーツは全部で9つ。

それぞれにどんな役割があるのか、また、ブログのどこに表示されているのか、ちゃんと知るようにしましょう。

setting-the-menu-02

※スマホ用フッターはスマホアクセス時にしか表示されないため省略。

 

 

サイドバーウィジェット

サイドナビの最も重要なメニューです。

インストール直後には

  • 検索
  • 最近の投稿
  • 最近のコメント
  • アーカイブ
  • カテゴリ
  • メタ情報

の6つのメニューがあります。

 

スクロール広告用

レンタルサーバーの比較記事とか、縦に長いページでコンテンツを読んでいると、サイドバーの広告がスクロールに合わせてついてくることありませんか?

 

縦に長いページで通常通りサイドバーを設置すると、スクロールとともに、何も表示されないサイドバーの分、余白が表示されてしまいます。

かといって、あれもこれもとサイドバーを長くしてしまうと、トップページや短めの記事を書いた時に、コンテンツ下が大きく空白になってしまいます。

 

これを避けるために、Stinger5-Cheetahでは、サイドバーウィジェットに続けて、スクロールに追随するコンテンツを作る事ができます。

『スクロール広告用』と名前がついてはいますが、広告を設置しなければいけないわけではありません。

これは見てほしいな!というコンテンツを設置しましょう。

 

Googleアドセンス用336px

コンテンツの一番下、『記事下CTA』とコメントの間に表示される広告を入力するウィジェットです。

管理画面で記載があるように、『テキスト』というパーツを設置し、そこに広告のタグ(HTMLコード)を記載することで広告が表示されます。

注意点としては、タグを1つ入れることによって、コンテンツでは自動で2つの広告が表示されます。

 

Googleアドセンスのスマホ用300px

Stinger5-Cheetahのサイドナビの幅は300pxです。

これは、スマートフォンで閲覧した際に、横幅320px以下であれば、だいたいどのスマートフォンでもはみ出すことなく見れるよ~という規格にそっているものと思われます。

このため、上記の336pxのものでははみ出してしまう可能性があるので、広告についても横幅300pxのものにしましょう、ということで、このウィジェットが用意されています。

 

フッター左/フッター中/フッター右

Stinger5-Cheetahは、パソコンで閲覧する際フッターを縦に三分割してくれます。

なので、通常のブログのメニュー構成よりも多くの情報を提示することが可能です。

 

おすすめの特設コンテンツを作るも良し!最近の投稿をもう一度掲載するも良し!

ブログの内容によって反応の良いコンテンツは変わるかと思いますので、いろいろなパーツを設置して、回遊率の良いもの(1ページだけ見て離脱せず、次のコンテンツを読んでくれるもの)を探してみてください。

 

スマホ用フッター

上記のパソコン用のフッターでは、多くのコンテンツを掲載できることが利点でした。

しかし、一方でスマートフォンでアクセスする際、そこまで大量のメニューがあると、読み込みに時間がかかったり、一覧性が無いため使いづらかったりと、けっして良いことばかりではありません。

 

Stinger5-Cheetahでは、スマートフォン用のフッターを全く別に作ることができるため、パソコンではたくさんのパーツを配置したフッターも、スマートフォンではTwitterの情報だけ~等、調整することが可能です。

 

記事用CTA

みなさん、Call to Action という言葉を聞いたことはありませんか?

これは、別名『落とし込み』とよばれるもので、記事を読んでくれたユーザーに最終的におすすめするコンテンツのことです。

 

一般企業であれば、お問い合わせはコチラ!といった形で電話やフォームへ誘導するでしょう。

ブロガーさんなら、メルマガやeBookへ誘導している人も多いかと思います。

 

ただし、このウィジェットも、フェイスブックなどのSNSへの誘導や、『この記事を書いた人』みたいなプロフィール画面として使うなど、自由に使うことができます。

 

 

スポンサーリンク

ウィジェットの使い方

ウィジェットの配置

ウィジェットを追加したいパーツ(例えばサイドバー)をクリックすると、アコーディオンのようにメニューが開きます。

setting-the-menu-03

 

次に画面の左側、『利用できるウィジェット』のところで使いたいものを決めら、その上で左クリックしたまま、配置したい場所までドラッグ&ドロップ。

setting-the-menu-04

 

または、配置したいウイジェットをクリックすると、『どのウィジェットパーツに入れる?』みたいな画面になるので、配置したいメニューを選んで『ウィジェットを追加』をクリック

setting-the-menu-05

 

ウィジェットの設定・並べ替え

メニューパーツに配置したウィジェットを左クリックすると、さらにそれぞれの設定欄がアコーディオンのように開きます。

ブログで表示されるタイトルや、表示件数、表示方法等、変更できますので必ずチェックしておきましょう

setting-the-menu-06

 

並び替えは簡単です。

変更したいウイジェットを選んで移動したい場所までドラッグ&ドロップするだけ!

setting-the-menu-07

 

ウィジェットの削除

削除したいウイジェットをクリックすると、設定欄が開きます。

下の方にある『削除』というボタンを押すと削除することが可能です。

setting-the-menu-08

 

 

スポンサーリンク

ウィジェットのおすすめの設定箇所

何も記入したい『テキスト』を配置しよう

最初は、どんなウィジェットを配置すれば良いか迷うものです。

ただし、ウィジェットパーツに何のウィジェットも配置しない場合、下記のウィジェットパーツについては、『ここはフッター左』等の説明文が表示されてしまいます

なので、下記のものについては、いったん何も記入していない『テキスト』を配置しておきましょう。

  • フッター左
  • フッター中
  • フッター右
  • スマホ用フッター
  • 記事下CTA

 

サイドバーは『検索』『アーカイブ』『カテゴリー』以外は削除してOK

Stinger5-Cheetahは初めから『最新の投稿(New Post)』がサイドバーに表示される設定になっています。

同じ内容が表示される必要はありませんし、コメントはQ&A的なコンテンツがない限りあまり使っているところを見たことが有りません。

メタ情報に至っては、ブログ運営での使いドコロが分からないので、いったん削除しちゃいましょう。

 

『アドセンス用』はGoogleアドセンスを利用しないなら何も配置しなくてOK

仮にアドセンスを利用する場合は、上記と同様にいったん無記入の『テキスト』を配置、とかでも良いのですが、特に使う予定が無いなら何も配置しなくてOKです。

 

サイドバーかスクロール広告用に『人気の記事』を配置しよう

ブログの回遊率をあげるために必須のメニューとして、

  • 最新の記事
  • 関連の記事
  • 人気の記事

 

といったものが挙げられます。

 

Stinger5-Cheetahでは、これらの3つのうち2つが最初から設置されています。

最新の記事→サイドナビの最上段

関連の記事→コンテンツ最下段

 

そこで、最後の『人気の記事』を作成するのに便利なのが、『WordPress Popular Posts 』というプラグインです。

WordPressの管理画面で『プラグイン』→『新規追加』→『検索窓に WordPress Popular Posts と入力』で入手することができます。

詳しい使い方や設定方法については、別で記事つくりましょうかね。

 

 

『メニュー』で自由なTOPナビゲーションを作ろう

WordPressの管理画面で『外観』→『メニュー』とクリックした時に表示されるのが、ブログのTOPナビゲーションを作るための画面です。

WordPressのインストール後、特になんの設定もしていなければ、TOPナビゲーションには『固定ページ』が配置されます。

setting-the-menu-09

 

左から固定ページの作成日が新しい順番に並びます。

ただし、『固定ページ』は 順序 を設定することができるので、左から表示したい順番に数字を割り振れば、作成日時に関係なく好きな思った順序でのメニューを作成できます。

 

じゃあ何のために、このページがあるのかというと、 自由にメニューを作ることができる んです。

例えば、特定の記事やカテゴリ一覧ページ、別サイトへのリンクなど好きに設定できます。

 

作成方法はウィジェットの配置とほぼ同じ。

好きなパーツを選んで、『メニューへ追加』をクリック。

setting-the-menu-10

 

順番をドラッグ&ドロップで変更して『メニューを保存』をクリック。

setting-the-menu-11

setting-the-menu-12

 

『位置の管理』タブで先ほど保存したメニューを選んで『変更を保存』をクリック

setting-the-menu-13

 

※メニューをまとめることもできます

ドラッグ&ドロップしようとすると、1段インデントが下がったところに配置することができるのに気がつくかもしれません。

これをすると、TOPナビゲーションでドロップダウンのメニューを作ることも簡単です

setting-the-menu-14

 

TSUNJI(@tsunji1983)的まとめ

メニューを工夫することで、記事に興味を持ってくれたユーザーさんが、『もう1記事くらい読んでみようかな~』と思ってくれた時、スムーズに次のページへ誘導することが可能になります。

 

最初はきっと、何を配置すれば良いか、全然イメージが付かないと思います。

 

なのでまずは、

  • 最新の記事
  • 関連の記事
  • 人気の記事
  • カテゴリ
  • アーカイブ

あたりが配置されていればひとまずOKです。

 

『どうやったらユーザーが使いやすいメニューになるか』

『どんなコンテンツなら回遊率が上がってくれるか』

 

といった形で妄想しつつ、SNSの反響やアクセス解析など自分なりの指標を決めて、どんどんバージョンアップしていきましょう。

Stinger5-Cheetahカスタマイズ速習 目次

基礎編 第01回 まずはStinger5-Cheetahをインストール

基礎編 第02回 最初に絶対子テーマを導入すべし!

基礎編 第03回 管理画面でデザインを変更しよう

基礎編 第04回 ナビゲーションやフッターを設定しよう ←今ここ

基礎編 第05回 テーマファイルでSNSの設定をしよう

基礎編 第06回 タップ ターゲットのサイズを適切に調整する

基礎編 第07回 コンテンツのサイズを表示域に合わせる