メニュー機能、プラグインの設定方法、装飾機能の使い方（メシオプレス03）

このページでは、ワードプレステンプレート「メシオプレス03」を存分に発揮するための

メニュー（グローバルナビ、プライマリーナビ）
使用必須・推奨プラグイン
文字、リンク、画像装飾機能

の設定方法を解説しています。

注意！

この記事は、メシオプレス03リリース当時に書かれたものです。最新の設定方法は購入者サイトで確認してください。

メニューの設定

メニューは、サイト右上の「プライマリーナビ」と「グローバルナビ」の二箇所あります。新規にメニューを作成する場合の手順は次のとおりです。

STEP1：新規メニューを作成する

「外観」→「メニューを編集」→「新規メニューを作成」をクリックして、わかりやすい名前をつけて、「メニューを作成」してください。

STEP2：表示させたい項目を選択してメニューに追加する

左側の「固定ページ」「投稿」「リンク」「カテゴリー」の中から、メニューに追加したい項目を選択して、「メニューに追加」ボタンを押して、右側の「メニュー構造」に追加していきます。

※左側に項目が表示されない場合

もし、左側に「投稿」などの項目が表示されていない場合は、画面右上の「表示オプション」から各項目にチェックが入っているか確認してください。

STEP3：説明を記入（グローバルナビのみ）

追加したメニューの「▼」をクリックして、メニュー項目の説明を記入します。説明欄がない場合は先ほどの「表示オプション」から「説明」にチェックを入れます。プライマリーナビの場合は、ここは記入しないでください。レイアウトが崩れます。

STEP4：並び替えをして「保存」

表示したい順番にドラッグして並び替えて、「メニューを保存」してください。

STEP5：位置の管理で指定

「位置の管理」タブをクリックして、先ほど作成したメニュー名を「グローバルナビ」「プライマリーナビ」それぞれに選択して「変更を保存」して完了です。

なお、階層メニューには対応していません。もし、「階層メニューにしたことで売上が上がった」「階層メニューにしていないことで売上が下がった」などの事例があれば教えてください。対応を検討します。

グローバルナビの枠のサイズを可変タイプにしたい場合

メシオプレス03では、グローバルナビの各メニュー幅はすべて等間隔になるように設計してあります。これを等間隔ではななくて、文字数に応じて可変するタイプにしたい場合はstyle.cssの344行目付近

.headMenu .menu-item{
	width:18%;
}

となっている記述を全てコメントアウトするか、削除していただければOKです。なお、テンプレートをバージョンアップするとこの変更はリセットされますので、独自でCSSを変更する場合は「Simple Custom CSS」プラグインを使うと、バージョンアップ時にも上書きされませんので、おすすめです。

使用必須・推奨プラグイン

管理画面の「プラグイン」→「新規追加」から検索ボックスにプラグイン名をコピペして検索、インストール、有効化してください。

・All in One SEO Pack（必須）

Canonical URLsにはチェックを忘れずに入れてください。Canonical設定、記事ごとのメタディスクリプション設定、カテゴリー、アーカイブ、タグのnoindex設定などのSEO対策に使用します。カテゴリーページを固定ページで作る場合もAll in One SEO Packのnoindex機能を使ってください。

メシオプレス03では、パンくずの構造化データ「Schema.org」に対応しています。All in One SEO Packの「Use Schema.org Markup」にチェックが入っていると、All in One SEO Packが挿入するdescriptionタグの内容も構造化データと判断され、2種類のdescriptionが存在する状態になってしまいます。

この状態をGoogleがどう判断するかわかりませんが、意図した内容とは違うものが入る可能性があるので、「Use Schema.org Markup」はオフ（デフォルトではONになってる）にすることを推奨します。

下記の構造化データテストツールで正しく設定できているかチェックできます。
https://developers.google.com/structured-data/testing-tool/

・WP Social Bookmarking Light（推奨）

トップページのロゴ画像横（1000pxヘッダーの時は下）、記事上下にソーシャルボタンを表示します。バージョンが古いとエラーになることがありますので、最新版をお使いください。

また、いいねボタンを設定する場合はFBのバージョンを「html5」、Add fb-root:を「No」にしてください。

そうしないと、スマホで見たときに「いいねボタン」が表示されない現象が生じたり、トップページにアクセスした際に画面が一瞬大きくズレて、元に戻るという現象が発生してしまいます。

・Wordpress Popular Posts（推奨）

オリジナルウィジェット「カテゴリー別人気記事ランキング」（今見ている記事と同じカテゴリーの記事をランキング表示できるウィジェット）を使用する場合に必要です。

・Yet Another Related Posts Plugin (YARPP)（推奨）
記事下に関連記事を表示させるプラグインです。滞在時間やページビューを引き上げる目的もありますが、内部リンクの充実（内的SEO）目的でも入れることをおすすめします。有効化すると、自動的に記事下に反映されます。

なお、メシオプレス03では「カスタムテンプレート」を使用できるようになっています。

左にアイキャッチ、右に記事タイトルが表示されるテンプレートです。

スマホでは、この「カスタム」仕様が主流ですので、スマホのアクセスが多い場合は「カスタム」を選択するのがおすすめです。アイキャッチ画像のサイズや見出し文言は、メシオプレス設定→外観→「YARPPのサムネイル」から変更できます。

「サムネイル」テンプレートを選択する場合や、2重に表示されてしまう場合は下記の記事を参考にしてください。
関連記事プラグイン「YARPP」のサムネイル表示をカスタマイズする方法

文字装飾

＜span class=”boldtxt”＞太字＜/span＞
＜span class=”bigtxt”＞大きい文字＜/span＞
＜span class=”bigbigtxt”＞もっと大きい文字＜/span＞
＜span class=”smalltxt”＞小さい文字＜/span＞
＜span class=”marker-yellow”＞黄色マーカー＜/span＞
＜span class=”colorRed”＞赤字＜/span＞
＜span class=”boldtxt colorRed marker-yellow”＞太赤字黄色マーカー＜/span＞

リンク装飾

※下記をそのままコピペしても反映されません。全角になっていますので。

＜a href=”#” class=”arrow-orange”＞オレンジ矢印＜/a＞
＜a href=”#” class=”arrow-red”＞赤矢印＜/a＞
＜a href=”#” class=”arrow-blue”＞青矢印＜/a＞
＜a href=”#” class=”arrow-pink”＞ピンク矢印＜/a＞
＜a href=”#” class=”arrow-green”＞緑矢印＜/a＞
詳しくはこちら
 詳しくはこちら
 詳しくはこちら
 詳しくはこちら
 詳しくはこちら

文章中で設定するとこんな感じになります。

三角矢印（▶▶）

<a href=”#” class=”delta2-orange”>詳しくはこちら</a>
<a href=”#” class=”delta2-red”>詳しくはこちら</a>
<a href=”#” class=”delta2-blue”>詳しくはこちら</a>
<a href=”#” class=”delta2-pink”>詳しくはこちら</a>
<a href=”#” class=”delta2-green”>詳しくはこちら</a>

詳しくはこちら
 詳しくはこちら
 詳しくはこちら
 詳しくはこちら
 詳しくはこちら

文章中で設定するとこんな感じになります。

三角矢印（▶▶▶）

<a href=”#” class=”delta3-orange”>詳しくはこちら</a>
<a href=”#” class=”delta3-red”>詳しくはこちら</a>
<a href=”#” class=”delta3-blue”>詳しくはこちら</a>
<a href=”#” class=”delta3-pink”>詳しくはこちら</a>
<a href=”#” class=”delta3-green”>詳しくはこちら</a>

詳しくはこちら
 詳しくはこちら
 詳しくはこちら
 詳しくはこちら
 詳しくはこちら

文章中で設定するとこんな感じになります。

画像装飾

■デフォルト（装飾なし）

＜img src=”https://mesiopress.com/wp-content/uploads/2014/01/03logo200.png” alt=”” width=”200″ height=”200″ class=”alignnone size-full wp-image-4127″ /＞

■枠（classに wakuと指定します。）

＜img src=”https://mesiopress.com/wp-content/uploads/2014/01/03logo200.png” alt=”” width=”200″ height=”200″ class=”alignnone size-full wp-image-4127 waku” /＞

■網掛け枠（classに waku_amiと指定します。）

＜img src=”https://mesiopress.com/wp-content/uploads/2014/01/03logo200.png” alt=”” width=”200″ height=”200″ class=”alignnone size-full wp-image-4127 waku_ami” /＞

※スマホで見た場合について

スマホサイトではディスプレイの幅に合わせて画像幅は自動的に調整されるのですが、枠線は画像では無いので計算に含まれません。その分、右にずれて表示されてしまいます。これはCSSの仕様なので対応は難しいです。

ですので、中央寄せの枠付き画像をスマホで見ると「枠」の右端が途切れてしまいます（画面を横に倒した時は右側も途切れずに表示されます）。これが気になる場合は、2014年8月に追加した「影（ドロップシャドウ）」を利用してください。

■影（ドロップシャドウ）（classに kageと指定します。）

＜img src=”https://mesiopress.com/wp-content/uploads/2014/01/03logo200.png” alt=”” width=”200″ height=”200″ class=”alignnone size-full wp-image-4127 kage” /＞