メシオプレス02初期設定

1. メシオプレス02のインストール

「外観」→「テーマ」→「新規追加」をクリック


「テーマのアップロード」をクリック


「テーマを追加」からメシオプレス02のzipファイルを選択してインストール＆有効化してください。


まだ何も記事を書いていない初期状態では、サイトは上記のように表示されますが、これで正常です。これから記事を入れたり、各種パーツを設定して整えていきます。

2. トップページ（フロントページ）の作成・設定

常にトップページに表示させる記事（フロントページ）を固定ページで作成してください。記事の中身は、サイトの紹介文を書いても良いですし、メシオプレス02の機能を使ってランキング表、特集枠、人気記事ランキングなどを表示させるのも良いです。


右側「ページ属性」の「テンプレート」はデフォルトテンプレートだと2カラムです。トップページをランディングページのように1カラムにして使いたい場合は「1カラム」を選択してください。



トップページ記事作成後、「設定」→「表示設定」→「固定ページ」にチェックを入れて、「フロントページ」より作成した記事タイトルを選択して、「変更を保存」を押してください。

3. ウィジェットの設定

WordPressの初期状態ですでにサイドバーにいくつか入っていますが、不要なものは「外観」→「ウィジェット」より削除して、表示させたいウィジェットをドラック＆ドロップして設定してください。

メシオプレス02ではウィジェットエリアを16箇所ご用意しています。

サイドバー

サイドバーに表示するウィジェットです。

サイドバー（追尾）

ページをスクロールしてサイドバーの表示項目が表示し切った段階で、スクロールしても常に表示させたいコンテンツを設定できます。サイト内容にもよると思いますが、追尾式サイドバーは結構クリックされます。
※アドセンス広告を追尾式で表示させるのは規約違反ですので、お気をつけ下さい。また、「Easy Smooth Scroll Links」などスクロール系プラグインと併用すると、動作がおかしくなりますので注意してください。

サイドバー（カテゴリ）

カテゴリーページのサイドバー（上部）に表示するウィジェットです。

サイドバー（カテゴリ追尾）

カテゴリーページのサイドバー下部に追尾させるコンテンツを表示するウィジェットです。

フッター

「【MP】フッターの列区切りタグ」ウィジェットを使って、2列～4列のフッターを設定できます。列を区切りたい場所で「【MP】フッターの列区切りタグ」を挿入してください。

フッター（3列）の設定例

固定ページ下部

固定ページ（2カラム）下に、通常の投稿記事とは別のウィジェットを設定することができます。

トップページ上部

トップページの上部に表示するウィジェットです。

トップページ下部

トップページの下部に表示するウィジェットです。

投稿・カテゴリー下部

投稿、カテゴリーページの下部に表示するウィジェットです。

スライドメニュー（スマホ用）

スマホサイトのスライドメニュー内に表示するウィジェットです。

スライドメニュー（スマホ用、カテゴリー）

スマホサイトのカテゴリーページのスライドメニュー内に表示するウィジェットです。

フッター（スマホ用）

スマホサイトのフッターに表示するウィジェットです。1カラムのみです。

トップページ上部（スマホ用）

スマホサイトのトップページの上部に表示するウィジェットです。

トップページ下部（スマホ用）

スマホサイトのトップページの下部に表示するウィジェットです。

投稿・カテゴリー下部（スマホ用）

スマホサイトの投稿、カテゴリーページの下部に表示するウィジェットです。

固定ページ下部（スマホ用）

スマホサイトの固定ページ（2カラム）の下部に表示するウィジェットです。1カラムで作成したページには表示されません。

4. グローバルナビ・プライマリーナビの設定方法

■設定方法

「外観」→「メニュー」→「メニューを編集」より「新規メニューを作成」して、わかりやすいメニューの名前を付けて、左側の「固定ページ」「投稿」「リンク」「カテゴリー」から、グローバルナビに表示させたい記事を「メニューに追加」してください。メニューの順番はドラッグ＆ドロップで並び替えて「メニューを保存」してください。プライマリーナビも同様の手順で設定してください。

■左側に項目が表示されない場合は？


■説明文の設定方法



追加後、メニューを開いて「説明」欄に記入した文字がメニュー名の下段に表示されます。

■作成したメニューの適用方法

メニューを作成・保存しましたら、「位置の管理」タブから作成したメニュー名を「グローバルナビ」「プライマリーナビ」のそれぞれで選択して、「変更を保存」してください。

※ファインダビリティを考慮して、ドロップダウンメニューには対応していません。グローバルナビを使わない場合は、何も設定しなければナビは表示されません。

メシオプレス設定

「外観」→「メシオプレス設定」から設定できます。カラー設定はカラーピッカーでリアルタイムでプレビュー表示を見ながら設定できます。

h1タグ

ロゴ画像の左上に表示されるh1タグの内容とカラーを設定できます。

カラー

・ベースカラー（サイドバー見出し、プライマリーナビのライン、グローバルナビの反転色）
・大見出し（h2タグ＝記事タイトル）
・小見出し（h3タグ）
・パンくずのカラー（文字色やリンク色）

を設定できます。なお、メシオプレス02では「フラットデザイン」に対応していますので、下記のサイトなどでフラットデザインの配色を参考にすると良いです。
Paletta – HSV Color palette for every Programmer
Flat UI Colors
今年流行のフラットデザインで使われているカラーコード – W3Q

ロゴ

ロゴ画像をアップロードできます。ロゴ画像の幅が550px以下の場合は右側に検索ボックスが表示されます。アドセンス（728×90）を表示させたい場合は260px以下に設定してください。ロゴ画像を使わない場合はテキストでタイトルが表示されます。キャッチフレーズを表示する場合は「設定」→「一般設定」にて表示内容を設定してください。

ヘッダー

ヘッダー画像を設定します。幅1000px、高さは自由です。ヘッダー画像をスライドショーにしたい場合は「スライドショーを使う」にチェックを入れて、別途「スライドショー設定」にて設定してください。

背景

背景色を設定します。スライドショー（ヘッダー画像）部分と、ページ全体で背景色を分けて設定できます。「背景のレイアウト」で全体と同じにするか、分けるかを選択してください。

外観

・favicon（ファビコン）
・上へ戻るボタン（オリジナル）
・レイアウト設定（サイドバーの左右切り替え）
・コピーライト表記
・YARPP（関連記事表示）の見出しとサムネイルサイズ

の設定ができます。

Googleカスタム検索

検索ボックスをGoogleカスタム検索に切り替えることができます。

OGP

OGPを設定します。（詳しい設定方法はこちら）

アドセンス

アドセンスタグの設定やができます。

・h3タグの上
・記事の下
・ロゴ画像横

の3箇所です。横2個、縦2個、1個、中央寄せ、左寄せなど表示方法の切り替えや、PCとスマホで別々に簡単に設定できます。

サイト管理

ウェブマスターツールに登録する際やアクセス解析を設定します。

スマホ用設定

スマホサイトの設定をします。PCとは別々の設定をして「スマホ専用サイト」を作ります。

ロゴ

ロゴ画像を設定します。綺麗にくっきり見せたい場合は倍のサイズの画像を用意して、「Retina対応」にチェックを入れてください。多少ボヤケても気にならない場合はそのままのサイズで「非対応」を選択でOKです。

ヘッダー

ロゴ画像の下に表示されます。トップページのみに表示するか、個別ページにも表示するかの選択も可能です。

背景

背景色の設定をします。スマホの場合、コンテンツ部分の背景は表示されませんので、あまり意味のない設定かも知れません。

ホームアイコン

ホーム画面に登録された時に表示するアイコンを設定できます。

記事

文節での改行、画像の左右寄せを無効化できます。

テーブル

「コンパクト表示」か「スクロール表示」を選択できます。スクロール表示にする場合は、案内文を変更することをおすすめします。変更しないと、「表は左右にスクロールできます」で検索した時にサイトばれしてしまうからです。気にならない場合はそのままでOKです。

スライドショー設定

ヘッダー画像部分をスライドショーに変更できます。（PCサイトのみ）

画像の管理

先ほどのメシオプレス設定画面で「スライドショーを使う」にチェックを入れてから、「外観」→「スライドショー設定」で表示させたい画像（5枚まで設定可能）と、画像の説明（altタグ）、画像のリンク（飛び先URL、任意）、画像のラベル（任意）を設定し、「画像情報を保存」ボタンで保存してください。

ちなみに「画像のラベル」とは、画像の下に表示されるテキストのことです。ラベルをクリックすると該当の画像に切り替わります。ユーザーが次の画像を見たくなるようなテキストを設定するのがおすすめです。何も設定しない場合は「1番目の画像」「2番目の画像」と表示されます。

1000pxバージョン

660pxバージョン（2カラム表示）

動作設定

そのあとに、「動作設定」タブで「スライドショーの横幅」を設定します。「1000px」か「660px」を選択してください。

なお、950pxのスライドを設定できますが、これは旧バージョンのデフォルトサイズです。メシオプレスver.1.4からデフォルトサイズを1000pxにしたため、旧バージョン利用者でもそのまま使えるように950px選択を残してあります。これから新規でインストールする場合は1000pxを使ってみてください。

スライド効果、スライド間隔、アニメーション速度はお好みに設定してください。

カテゴリーラベルの設定

Image may be NSFW.
Clik here to view.
更新履歴ウィジェットや、記事下ソーシャルボタンエリアに表示されるカテゴリーラベルの背景色、文字色を変更できます。「カテゴリー」→カテゴリーの「編集」→「カテゴリーカラー」より設定してください。（カテゴリーを新規登録する時の画面では色を指定できません。カテゴリーをあらかじめ登録しておく必要があります。）

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

●All in One SEO Pack（必須）
Canonical設定、記事ごとのメタディスクリプション設定、カテゴリー、アーカイブ、タグのnoindex設定などのSEO対策に使用します。テンプレート自体にこの機能を持たせることもできたのですが、All in One SEO Packは更新頻度も高く、便利な機能も次々に搭載されるので、基本的なSEO対策はAll in One SEO Packにて行ってください。



●WP Social Bookmarking Light（推奨）
トップページのロゴ画像横、記事下にソーシャルボタンを表示します。バージョンが古いとエラーになることがありますので、最新版をお使いください。

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

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

これを解消するには「iframe」を選択すれば良いのですが、iframeにするとはてぶボタンやいいねボタンが表示されなくなります。どちらの表示を優先するかになりますが、「html5」にしておいたほうが無難かと思います。

●AddQuicktag（推奨）
よく使うショートコードなどを登録しておくと非常に便利です。あらかじめよく使うショートコードをプリセットしたファイルはこちらからご自由にダウンロードしてください。

●Yet Another Related Posts Plugin (YARPP)（推奨）
記事下に関連記事を表示させるプラグインです。ブログの場合はよく見かけますが、サイトの場合でも内部リンクの充実（SEO）目的で入れたほうが良いと個人的に感じています。余計な動線が発生するというデメリットもあるのですが、補って余りある価値はあると思います。


上記「表示設定」のチェックは外して、ウィジェットを使って記事の下部ウィジェットエリアに挿入してください。


スマホ用ウィジェットで使う場合は「カスタム」を選択することをおすすめします。アイキャッチ付きのリスト型で良い感じに表示されるように調整してあります。


見出しタイトルやサムネイル画像サイズは、「メシオプレス設定」→「外観」から変更可能です。

PCでのサムネイル表示のカスタマイズ方法は下記の記事を参考にしてください。
参考：関連記事プラグイン「YARPP」のサムネイル表示をカスタマイズする方法

●WordPress Popular Posts（任意）
「カテゴリー別人気ランキング」ウィジェットを使う場合は、WordPress Popular Postsをインストールしてください。

よくある質問

以上で初期設定は完了です。お疲れ様でした。あとは「ショートコード」「便利機能」をご用意していますので、サイト運営に合わせてご利用ください。設定方法に関してご不明な点がありましたら、こちらのコメント欄よりお寄せください。

メシオプレス02初期設定 is a post from: メシオプレス02サンプルサイト