ワードプレスでグローバルメニューを作る

ワードプレスを構築したら、読者さんが便利に使えるように、
グローバルメニューを作りたいですね。

グローバルメニューとはこれのこと。

グローバルメニュー

グローバルメニュー、もしくはメニュー、
グローバルナビゲーション(略してグローバルナビ)とも呼ばれています。

グローバルメニューは、お使いのワードプレステーマ(テンプレート)によって
あらかじめデザインされているものと、デザインされていないものがあります。

また、ワードプレスの管理画面から簡単に設定できるタイプと、
グローバルメニュー自体はデザインされているんだけど、
管理画面から編集できず、phpファイルを手で編集しなきゃいけない、
というテンプレートもあります。

ワードプレスの管理画面上で簡単にグローバルメニューが編集できるようになったのは
2012年前後あたりからだったと思いますので、
それ以前にリリースされたテンプレートはphpを編集しないといけないかもです。
その際には、お使いのテンプレートの配布元などで詳しい手順をご確認ください。

ですから、例えば、このサイトでも利用している賢威テンプレートの場合、
今着せているのが賢威6.1。これは比較的新しくて、
ワードプレスの管理画面から簡単にグローバルメニューを編集できる、
いわゆる「カスタムメニュー」ってやつに対応しています。

ただし、一つ前の賢威5.0というシリーズは
まだカスタムメニューが導入される前にリリースされたテンプレートなので
残念ながらグローバルメニューはあるけれど、
自分でphpファイルをカスタマイズしなきゃいけないという手間がかかります。

※賢威5.0でphpを編集してグローバルメニューを作る方法は
 「賢威でWordPress~グローバルメニュー設定方法」ここで解説してます。

ちなみに、今の賢威6.0以降のシリーズでは、
グローバルメニューを簡単に設定できるほか
グローバルメニューそのものを表示させない設定もボタンひとつという手軽さ。

特に、アドセンスを扱うサイトでファーストビューを気にする際には
選択肢の一つとして考えてもいいかもです。

んで、グローバルメニューがそもそもデザインされてない場合は
デザインされているテーマに着せ替えた方が早いし、
phpを編集するタイプはテーマによってどこをいじるか千差万別なので割愛。

ここでは、ワードプレスの管理画面から、
グローバルメニューを簡単に設定する方法を見ていきます。

固定ページを作ればOK

ワードプレスの記事投稿には、「投稿」と「固定ページ」の
2種類の記事投稿方法があります。

ま、投稿記事と固定ページの違いという記事でも解説してますので
詳しくはそちらを読んでいただけたら、です。

そこでも解説していますが、投稿ページってのは通常のブログ記事、
固定ページってのは、ちょっと特殊な記事のために使います。
サイトマップや問い合わせなどといったものですね。

こういった「ちょっと特殊なページ」を固定ページで作成すると、
自動的にグローバルメニューに反映されます。

このカスタマイズも後で解説しますね。

ってことで、要するに、固定ページを作れば自動的にメニューができる、
とまぁ、そういうことなんですよ。以上、おしまい。

ね?簡単でしょ?

とはいえ、順序を変えたいとか表示させたくないページがあるとか
固定ページ以外のURLを表示させたいとか、いろいろありますよね。

そういうのを細かく見ていきましょう。

グローバルメニューを設定する

では、そもそもグローバルメニューをどう設定すればいいか、
設定画面を確認しましょう。

gm02

このように、「外観」→「メニュー」と進みます。

gm03

多分、こんな感じになってるかな~・・・と。(画像クリックで拡大)
この、赤線の部分に分かりやすい名前を付けます。
正直、自分さえ分かればいいので名前は何でもいいです。

適当に名前を付けたら「メニューを作成」をクリック。

gm04

多分、こうなる。

gm05

まずは、ここが空白のはずなので、
枠の右側にある▼をクリックして今作成したメニューを選んでみてください。

gm06

選んだら忘れずに保存しておいてね。

gm07

図のように、グローバルメニューに載せたいページに
チェックを入れて「メニューに追加」をクリックしてみましょう。

gm08

こんな感じでボワッと追加されますので
「メニューを保存」をクリックして保存します。

グローバルメニューの並び順序を変えたい

gm09

メニューの項目を並び替えたい時には、
その項目をマウスでぎゅーっと移動させるだけで
自由に順序を入れ替えることができます。

並び替えたあとは保存を忘れずに!

勝手にワードプレスのメニューが増えて困る!というとき

固定ページが自動的にメニューに反映される場合、
固定ページが増えれば勝手にメニューが増えてしまって
なんだかワケが分からないくらいにぐちゃぐちゃになることがあります。

これは、設定ひとつで直ります。

gm10

この、「トップレベルのページを自動的に追加する」という項目の
チェックを外せばOK。

「トップレベルのページを自動的に追加する」を直訳すると、
トップレベルの(一番新しく追加された)ページ(固定ページのこと)を
自動的に(グローバルメニューに)追加する、という意味です。

ここにチェックが入っていれば、新しい固定ページができれば
問答無用でグローバルメニューに追加しますよ、

ここにチェックを入れていなければ、
新しい固定ページができようがどうだろうが、
あなたが自分でメニューの設定をしない限り反映しませんよ、ってこと。

ですから、基本的にはチェックを外し、
自分で今まで見てきたように表示させたいページだけを選んで
グローバルメニューに追加していくほうが便利でストレスがないです。

あ~~!!間違えた!この項目を削除したい!

追加したメニューを削除したい場合、
(例えば「お問い合わせ」や「サイトマップ」をメニューから外したいなど)
メニューに追加した各項目の詳細設定から削除が可能です。

gm11

各項目の右端にある▼をクリックすると画面が開きますから
図のように「削除」をクリックすればOK。

ここでいう削除は、グローバルメニューから削除するという意味であり
記事そのものがなくなってしまうという意味ではありません。

ってか、タイトルが長すぎてはみ出る・・・

固定ページの記事タイトルが長すぎてグローバルメニューに追加したら
ミョーにはみ出てしまう場合、記事タイトルはそのままに
メニューの表示だけ短く変更することができます。

gm13

こんな風に、ミョーに長い記事タイトルを付けてしまった場合でも、
タイトルはそのままにメニューの表示だけ変更可能。

gm12

メニューにトップページや他サイトなどを入れたい

グローバルメニューにトップページへもどる表示や
他のサイトへのリンクを表示させたい場合。

gm14

こんな風に、「カスタムリンク」に直接URLを記載してやればOK。

これで、ブログのトップページでも他のサイトでも
自由に誘導することができるようになります。

ただし、残念ながら、別窓で開く表示を設定できないため、
他サイトへの誘導の際は同一ウィンドウで表示されます。

その他の注意点

ワードプレスのテーマ(テンプレート)によっては、
今まで見てきたカスタムメニュー機能を使って、
フッターやサイドバーなどを自由に設定できるものがあります。

その際には、ご利用のテンプレートの説明書を確認していただければなのですが
基本的な考え方は今までと一緒で、
新しくメニューを作成する→フッターなりウィジェットなりに反映させる、
という手順になりますよ^^

賢威6.1~全体の文字色を変更したい

賢威6.1マネー版の場合、デフォルトでは、背景色が濃いので、
文字色がすべて白になっています。

keni620

私のメインブログでは、背景をすべて白で設定したので、
もう、文字色が白だとが何がなんだか・・・

keni621

そこで、文字色を黒く変更してみました。

keni622

変更するのはここ。

「外観」⇒「テーマ編集」⇒「design.css」とすすみ、
以下の記述を探します。

/*——————————————————–
2、サイト全体の共通設定
——————————————————-*/

body{ color: #fff; } ⇒ ここを#000に変更

/*●リンク文字*/
a{ text-decoration: underline; }

a:link,
a:visited{ color: #0000ff; }
a:hover,
a:active{ color: #bea455; }

これで、サイト全体の文字色が黒になります。
ただし、ヘッダー画像の中に入っているサイトのキャッチコピーの文字色だけは、
色が独立して指定されているので別途色を変えてあげる必要があります。

・・・ただ、ですな。。。

kenis7

記事タイトルとかサイドバーなどの、
黒い背景部分の文字色まで全部変わっちゃうのです!

kenis8

そこで、
いや、君は白文字のままでいいから!!
という部分を、個別にCSSで指定してあげればOK。

まずは、各記事の記事タイトル部分(h2タグ)から。

「外観」⇒「テーマ編集」⇒「design.css」と進みます。

keni613

そこから、こんな記述を探して、
赤文字の部分を書き加えましょう。

/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/

#main-contents{ font-size: 1.4em; }

#main-contents .contents{
margin-bottom: 3.5em;
padding: 0 10px;
}

/*●H2タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.8em 0.8em 0.5em;
border-top: 1px solid #555;
border-right: 1px solid #000;
border-bottom: 3px solid #000;
border-left: 1px solid #101010;
background: url(./images/title/bg-conts-h2.gif) left top no-repeat #0a0a0a;
font-size: 1.286em;
color: #ffffff; ← この記述を書き加える
}

この、color: #ffffff;という記述が、
「H2タグの文字色を白くしてちょうだい」という意味なので、
もちろん、赤くしたいとか青くしたいとか黄色くしたいなら、
相応のカラーコードを加えてやればOK。

ただ、見出しタグは他にもあって、

  • H3見出しタグ
  • H4見出しタグ
  • H5見出しタグetc・・・

などなど、それぞれに、
「君の文字色は白!あ、でもそっちの君はそのままでいいよ」
などと定義してあげないといけません。

/*●H3タグ*/
#main-contents h3{
margin: 0 0 1.5em;
padding: 0.5em 1em;
background-color: #161616;
border: 1px solid #000;
border-left: 4px double #666;
font-size: 1.143em;
font-weight: bold;
color: #ffffff;
}

こんな感じで、必要な箇所に記述すればOKです。

ただし、デザインによってまちまちなので、
実際の見出しタグのデザインを見ながら進めましょう。

んで、サイドバーの見出しの文字色変更は、同じ「design.css」の中の、

/*——————————————————–
サブコンテンツ / サイドバー
——————————————————–*/

という部分を探し、この記述の中から、
以下のような記述箇所を探します。

/*●コンテンツ*/
.sub-column .contents{
margin-bottom: 1.5em;
padding: 0.5em;
}

.sub-column hr{ clear: both; }

.sub-column h3{
padding: 0.9em 0.8em 0.8em;
padding-left: 1.5em;
background: url(./images/title/bg-side-h3.gif) 9px 9px no-repeat #0a0a0a;
border: 1px solid #0a0a0a;
border-top: 1px solid #454545;
border-bottom: 2px solid #0a0a0a;
font-weight: bold;
color: #ffffff; ← この記述を書き加える
}

これでOKです。

実際のデザインを確認しながら進めてくださいね^^

賢威6.1~背景色とカラム部分の色を変える

あんまりかっこいいとは思わないんだけど、
一応こういうことも簡単にできます。

kenis7

みて。
サイトの背景の色と、メインカラム、サイドバー部分の色を変えてます。

この設定方法ね。

まずは、「外観」⇒「テーマ編集」と進み、
「design.css」を開きます。

keni613

この、一番上の記述なんだけど、

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: #a9a9a9; }

もしくは、マネー版みたいに、
うっすら背景に模様(斜線)が入っているようなタイプは

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{
background: url(./images/common/bg-main.png) repeat #a9a9a9;
}

* html #container{ background: #a9a9a9; } /*IE6*/

こうなっていると思います。

この記述の下に、こんな記述を書き足します。
赤い文字の部分のカラーコードは任意です。

#main-contents {
background-color: #fff;
}
.sub-column {
background-color: #fff;
}

全部書き足したマネー版の場合はこうなります。

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{
background: url(./images/common/bg-main.png) repeat #a9a9a9; ← 全体背景の色
}

* html #container{ background: #a9a9a9; } /*IE6*/ ← 全体背景と同じカラーコードにする

#main-contents {
background-color: #fff; ← メインカラム部分の背景色
}
.sub-column {
background-color: #fff; ← サイドバー部分の背景色
}

この3箇所を好みの色にそれぞれ変えてやります。

ただし、賢威6.1は、
基本的にサイト全体の文字色を、一括で大きく指定してしまっているので、
メインカラムとサイドバーで極端に背景色を変えた場合、
メインカラム用とサイドバー用に、それぞれ、文字色を割り当ててやらないといけません。

黒い文字なら全部が黒、白い文字なら全部が白。
いちいち細かく文字色を変えるにはそれなりに設定がいるからね!!

賢威6.1~「最新情報」のカスタマイズ

賢威6.1では、最新の投稿記事表示がこんな感じになってます。
まずは、これがデフォルト。

kenis1

で、こっちがタイプ2.

kenis2

この設定は、ワードプレスの管理画面で簡単に切り替えられます。

kenis3

ただ、ですね。。。
やっぱ、トップページは情報量が多いし、こうしたいわけですよ。

kenis4

この設定方法。
まずは、「賢威の設定」で、最新情報をタイプ1にしておいてくださいね。

kenis5

んで、ワードプレスの「外観」⇒「テーマ編集」⇒「index.php」へと進みます。

kenis6

この中から、<!–▽メインコンテンツ–>という箇所を探します。
で、この中の、

<!–最新情報–>~~~~~<!–/最新情報–>

この中にある、こんな記述を探します。

変更前
<?php newposts_keni(5,5,1,”year”); ?>
</dl>

変更後
<?php newposts_keni(5,5,0,”year”); ?>
</dl>

この赤い文字の部分を「0」にすればOK。

ただ、私のメインブログで使っている「マネー版」では、
この記述がありませんでした。

その代わりに変更した記述が、

変更前
<?php $new_info_rows = (trim(mb_convert_kana(the_keni(‘new_info_rows’),”as”)));
if (!mb_ereg(“^[0-9]+$”, $new_info_rows) or ($new_info_rows <= 0)) {
$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,1,”year”,0,the_keni(‘new_info’)); ?>
</dl>

変更後
<?php $new_info_rows = (trim(mb_convert_kana(the_keni(‘new_info_rows’),”as”)));
if (!mb_ereg(“^[0-9]+$”, $new_info_rows) or ($new_info_rows <= 0)) {
$new_info_rows = 5;
}
newposts_keni($new_info_rows,1,0,”year”,0,the_keni(‘new_info’)); ?>
</dl>

これですっきりです♪

賢威6.1~ブログ説明文の文字色を変えたい(ついでに編集もしたい)

keni617

ヘッダー画像に入るブログ説明文の文字色変更とテキスト編集。

最初の状態はこれ。

keni618

あ~~テキストの色が合ってないし、
お姉さんの画像に被っちゃってるね。

まずは、テキストの文字色変更から。

keni613

「外観」⇒「テーマ編集」⇒「design.css」と進み、
以下の記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

この中の、

/*●ヘッダーテキスト・右上の文章*/
#header-in #header-text{
float: right;
margin-top:25px;
width: 40%; /*・1行の幅はwidthの値を変更*/
color: #000;
}

この部分を変更します。

「#000」で黒、「#fff」で白。
他にも、カラーコードで自由に設定できるので、
作ったヘッダー画像に合わせて色を変えてみてくださいね。

ついで、あのテキストを編集。
あそこに入れる文字の編集ですね。

コイツは簡単。

keni619

ワードプレスの設定で変更可能です。

ただし、今までの賢威5.0とかだったら、
phpの記述の中に直接テキストを書き込んでいたので、
「改行」が使えたし、リンクなども使えましたが、
ワードプレスのキャッチコピーを直接持って来るので改行などのタグは使えません!

賢威6.1~ヘッダー画像の上下幅を変えたい

賢威6.1マネー版で、ヘッダーに画像を設定した場合、

keni615

このヘッダーは半分くらい真っ白なので見えにくいかもだけど、
ヘッダー画像の上部、と、ヘッダー画像とグローバルメニューの間、
要は、ヘッダー画像を挟んで上下のスキマが広いので、
細めのヘッダー画像を作っても、ちょっとヘッダーが大きくなりすぎな気がします。

まぁ、ヘッダーを目立たせて出オチを狙うってのもありかもですが、
そういうのはランディングページの役目であって、
コンテンツ重視のメインブログのヘッダーが異常に派手なのはいけすかない・・・

サイトが立ち上がった瞬間、読者さんの受ける印象として、
ヘッダー「だけ」ってのもねぇ。。。Σ( ̄Д ̄;)

ここにさらにイメージ画像を入れてしまうと、
サイトが立ち上がったとき、まるっきりコンテンツ部分が見えなくなってしまうでしょ?

それではメインブログとしてちょっと・・・

あと、PRIDEみたいにアドセンスを利用する場合、
ヘッダーが勝ちすぎて、ヘッダーとアドセンスしか見えない状態だと、
アドセンスの警告対象にもなってしまうので注意です。

ま、最初に見たとき、PCの画面半分くらいがヘッダーで埋め尽くされてて、
「あぁ、こりゃしつこいわ・・・」と思ったのがきっかけで、
ヘッダー画像を細く作り直したり、いろいろしたんだけど、

根本的にヘッダー画像の上下の余白が大きすぎるんだ!
という責任転嫁で自分を納得させ、じゃぁ、あの幅を縮めよう!
ってなことでやってみました。

「外観」⇒「テーマ編集」から、「design.css」へ進みます。

keni613

その中から、下記のような記述を探します。

/*——————————————————–
ヘッダー
——————————————————–*/

#header{
background: url(./images/common/bg-header.png) center bottom repeat-x #ffffff;
font-size: 1.2em;
}

* html #header{ background: #ffffff; } /*IE6*/

#header-in{ padding: -1em 0; } ← ここがヘッダー画像のすぐ上の幅

/*●ヘッダーロゴ(メインタイトル)*/
#header #header-title{
float: left;
width: 59.5%; /*ロゴ(メインタイトル)下の

の1行の幅はこちらのwidthの値を変更*/
}

#header .header-logo{
margin-bottom: 0.2em; ← ここがヘッダー画像のすぐ下の幅
font-size: 2.167em;
}

私はヘッダー画像のすぐ上の幅を「-1」にして、
ヘッダー画像のすぐ下の幅を「0.2」にしています。

keni616

なんか、すっきりした感じ♪

賢威6.1プリティ版の背景色を変える

賢威6.1のプリティ版、と言えば、このサイトのテーマでもありますが
そんなことをいいつつコロコロテーマを変えるのでとりあえずスクショ。

keni61

うーん。。
サイトの最上部の青と黄色のラインとか、H2見出しタグとかは
好みな感じでカラーチェンジできるんだけど、
メインカラムとかの全体背景の色がね。。。

keni612

見えるかな?
ビミョーにピンクで、これが賢威のテンプレートメーカーで変えられない><

あれ?メインブログで使っているマネー版は変えられるんだけどな^^;

まぁ、いいや。
手動で変えちゃえ!

ってことで、

keni613

「外観」⇒「テーマ編集」から「design.css」を選択。

/*——————————————————–
1、サイト全体の背景設定
——————————————————*/

#container{ background-color: #fffff1; }

お、いきなり最上部にあったぜ!!

んで、これをカラーコード変更すればOK。
とりあえず、真っ白にしたいから、上記赤文字の部分を#fffに変更しました。