フラットデザイン対応WordPressテーマ「メシオプレス03」の設定方法

フラットデザイン対応のWordPressテーマ「メシオプレス03」の設定方法を解説していきます。この記事ではメシオプレス03の「インストール方法」と、専用管理画面「メシオプレス設定」、「固定ページの機能・使い方」を解説しています。

メシオプレス03のインストール方法

■1. テーマのアップロード＆有効化


「外観」→「テーマ」→「新規追加」→「アップロード」より、メシオプレス03のzipファイルを選択して「いますぐインストール」をクリックして「有効化」してください。

■2. 正常にインストールできたか確認

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

メシオプレス設定

「外観」→「メシオプレス設定」から下記10項目の設定ができます。

1. カラー
2. ヘッダー画像
3. 背景
4. 外観
5. 記事
6. Googleカスタム検索
7. SNS
8. アドセンス
9. サイト管理
10. その他

たくさんありますが、直感操作で設定できるものがほとんどで難しくはありませんので、ひとつずつ設定していってください。タブ形式になっていますので、クリックで移動して設定していきます。最後に「変更を保存」ボタンで保存してください。

カラー設定

• ベースカラー（ライン・サイドバーの見出しなど）
• 見出し（h2タグ）
• 見出し（h3タグ）
• パンくずのカラー

を設定できます。

カラー変更はリアルタイムプレビューで確認しながら、カラーピッカーで変更します。特定の色のコードがわかっている場合は、コードを直接入力することも可能です。

●ベースカラー（ライン・サイドバーの見出し）

ベースカラーを白系や、薄い色を使用する場合は、「見出しに枠をつける」のボックスにチェックを入れてください。

●見出し（h2タグ）

●見出し（h3タグ）

●パンくずのカラー

背景色を黒や青系統の色にすると、パンくず部分が背景色と同化して見えなくなってしまうため、パンくずのカラーも変更できるようになっています。

ヘッダー画像設定

• 表示する画像のURL
• 画像の説明（ここに記入した内容がh1になります）
• ヘッダーに表示するコンテンツ
• サイト概要【（ロゴ画像（250px）とサイト概要）を選択した時に表示します】

を設定できます。ヘッダー部分は下記の4パターンの中から選択できます。

1. ヘッダー画像（幅1000pxまで、高さ自由）

ヘッダー部分でインパクトのある訴求ができます。アフィリエイター向け。

2. ロゴ画像（幅250px、高さ自由）とアドセンス

アドセンス広告（ビッグバナー）をロゴ画像の横に設置できます。ブロガー向け。

3. ロゴ画像（幅250px、高さ自由）とソーシャルボタン

ソーシャルボタンをロゴ画像の横に設置できます。ソーシャルメディアでのシェアを重視したい人向け。検索ボックスも付いてきます。

ロゴ画像サイズは、横のソーシャルボタンのバランスを見て、250px以上のサイズを設定することもできます。通常検索ボックスの幅に収まっているようでしたら650px、Googleカスタム検索の幅に収まっているようでしたら550pxくらいまでの画像が設定できます。それ以上のサイズにすると、横に収まらずに下にずれてしまいますので注意してください。

4. ロゴ画像（幅250px、高さ自由）とサイト概要

サイト概要をロゴ画像横に表示できます。検索ボックスも付いてきます。サイト概要はWordPressの「キャッチフレーズ（Description）」とは別のオリジナル概要を掲載可能です。

背景の設定

ヘッダー部分とページ全体部分の背景色を別々に設定できます。

●ヘッダー部分

●ページ全体部分

なお、メシオプレス03では「フラットデザイン」に対応していますので、ヘッダー背景を塗りつぶすとモダンな感じになります。フラットデザインの配色は下記のサイトなどを参考にしてください。
Paletta – HSV Color palette for every Programmer
Flat UI Colors
今年流行のフラットデザインで使われているカラーコード – W3Q

背景はカラーピッカーだけでなく、画像も設定できます。背景画像に使えるテクスチャ素材は下記のサイトが便利です。
Subtle Patterns | Free textures for your next web project.

外観

●favicon（ファビコン）の設定

ブラウザのタブやお気に入りにアイコンを表示させる画像を設定できます。正方形の画像をアップロードすると綺麗に表示されます。

●パンくずの設定

パンくずの先頭を任意の名称（「ホーム」「HOME」「トップ」など）に変えることができます。ブログ名や記事タイトルが長くて、パンくずが2行に折り返されるのが気になる人向けのカスタマイズ機能です。気にならない場合は無記入のままでOKです。

●上へ戻るボタンの設定

右下に表示される「上へ戻る」ボタンをオリジナル画像に変更したい場合は、画像をアップロードするだけで差し替えることができます。画像の透明度もお好みで設定してください。

●レイアウトの設定
トップページのレイアウト（3カラムか2カラムか、サイドバーは右か左か）を設定します。投稿ページは2カラムで固定です。3カラムの場合は、サイドバーを片側にまとめることができます。

2カラム（サイドバー左）

3カラム（サイドバーを左右にレイアウト）

3カラム（サイドバーを右にまとめる）

3カラム（サイドバーを左にまとめる）

●トップ記事一覧の見出し

トップページ記事一覧の見出し文言を変更することができます。

●コピーライトの設定

●YARPPのサムネイル

関連記事表示プラグイン「YARPP」でカスタムテンプレートを適用した際の、見出しとアイキャッチサイズを変更できます。

記事の設定

●記事冒頭のソーシャルボタンの表示

ソーシャルメディア上で全く共有されないようなジャンルの場合は、ソーシャルボタンは非表示にすると良いと思います。※表示するには推奨プラグイン「WP Social Bookmarking Light」を有効化している必要があります。
参考：メニュー機能、プラグインの設定方法、装飾機能の使い方（メシオプレス03）

2カラム固定ページの時の表示・非表示の選択もできます。

●記事下ソーシャルボタンの誘導文

記事下のソーシャルボタンの上に表示させる文言を設定できます。

●ブログランキングボタン＆誘導文

●固定ページ下のウィジェット

2カラム固定ページの下にウィジェットを使いたい場合は、「ウィジェットを使う（ウィジェットに固定ページ下が追加されます）」を選択すると、ウィジェットページに「固定ページ下」が出現します。

●アイキャッチの表示

「アイキャッチを表示しない」を選択すると、アイキャッチが非表示になります。なお、この場合、

• カテゴリー別人気記事ウィジェット
• アイキャッチ付き最近の投稿ウィジェット
• 指定した記事の表示ウィジェット
• 前後の記事

のアイキャッチもすべて非表示になります。アイキャッチ嫌いの人向け機能です。

●日付の表示、非表示

7. Googleカスタム検索の設定

ヘッダー画像を、

• ロゴ画像（250px、高さ自由）とソーシャルボタン
• ロゴ画像（250px、高さ自由）とサイト概要

にを選択した際に、ロゴ画像横に表示される検索ボックスを「Googleカスタム検索」に変更できます。設定方法は「メシオプレス02」 と同じですので、下記のメシオプレス02の解説記事を参照してください。
Googleカスタム検索の設置方法（ メシオプレス02サンプルサイト ）

SNSの設定

FacebookやTwitter、Googleプラスなどソーシャルメディア上で、ブログトップページのURLがシェアされた際に表示されるOGP（記事タイトル、説明文、画像）を設定できます。設定を反映させるには、このあとの「Facebookページ」や「Twitterカード」を設定する必要があります。

投稿記事、固定ページも編集画面の下から設定できます。

●Facebook用の設定

IDの取得方法はメシオプレス02と同じですので、下記を参照してください。
OGP設定機能（メシオプレス02サンプルサイト）

●Twitter用の設定

1.Card Validatorにアクセス
2.Card URLにドメインURLを入力し「Preview card」をクリック
3.「*.ドメイン名 is whitelisted for summary card」と表示されればTwitterへの登録完了

twitterカードタイプは、3つのカードタイプを選択できます。Sumallyカードにすると、タイムラインに「概要を表示」を表示できるのでおすすめです。

アドセンスの設置

アドセンスタグの設定では、読み込み速度の向上に有効な「非同期タグ」を使えます。PCとスマホ別々のタグを設定できますので、より正確な効果測定が可能です。アドセンスを表示させたくない場合は、空欄のままにしてください。

●記事の最初のh2タグ上

記事に登場する最初の見出し（h2タグ）の上にアドセンス広告を表示できます。

●記事の下

【NEW！】バージョンアップにより、縦並び2個（左揃え）、 縦並び2個（中央揃え）、1個（左揃え）、1個（中央揃え）が選択できるようになりました。

●ロゴ画像横

●トップ記事一覧内

●アドセンス広告ラベル
デフォルトは「スポンサーリンク」です。

※特定の記事のみアドセンス広告を非表示にしたい場合は、非表示にしたい記事の編集画面より「アドセンスを表示しない」にチェックを入れて、「公開」または「更新」ボタンを押してください。

サイト管理（アクセス解析の設定）

使用したいアクセス解析のコードを貼り付けてください。「ログインしているユーザーが閲覧している時はアクセス解析を外す。」にチェックを入れると、自分がWordPress管理画面にログインしている時は、自分のアクセス記録だけ除外することができます。より正確にアクセス解析をしたい場合はチェックを入れて、自分のブログを見る時はログインした状態で見るのがおすすめです。

その他：「個別記事の下共通部ウィジェット」の表示・非表示の設定

今まで記事下にウィジェットスペースのない他社テンプレートを使っていて、記事の最下部に共通パーツ（メルマガ登録フォーム、ソーシャルボタンなど）を直接設置していた人向けの機能です。

この機能は、下記の利用状況の場合はスルーでOKです。

• 新規ブログにメシオプレス03を使用する場合
• 記事下にウィジェットスペースがあったテンプレートから乗り換えた場合
• 記事内に共通パーツを直接記述していなかった場合

メシオプレス03では基本的に、共通パーツはウィジェットなどの専用スペースに設置するため、今まで記事内に共通パーツを直接記述していた場合、過去記事にパーツがダブって表示されてしまいます。

ですので、メシオプレス03に切り替える前の記事には「個別記事の下共通部ウィジェット」を表示させないで、切り替えたあとの記事のみ「個別記事の下共通部ウィジェット」を表示させるようにすることができます。

ちなみに、記事下ウィジェットエリアに長文テキストを盛り込みすぎると、重複コンテンツ扱いになる可能性も考えられます。重複扱いを避けるためには、ウィジェットでは軽い説明に留めて詳細ページにリンクするような使い方がおすすめです。

固定ページの使い方

メシオプレス01・02同様に、ロゴ画像、グローバルメニュー、パンくずリスト、サイドバー、フッターを排除した1カラムページを固定ページを使って作成できます。余計な情報を排除して成約率や精読率を高めたいランディングページや、キラーページ用です。

■専用ヘッダー画像の設定方法

固定ページ専用のヘッダー画像をPC用とスマホ用で別々に設定できますので、ファーストビューで強力に訴求することが可能です。固定ページ編集画面下から画像をアップロードできます。PC版の横幅は800pxか、横幅いっぱいに広げるかを選択できます（高さは自由）。スマホ版は、

・iPhone5に最適化→640px推奨
・iPhone6に最適化→750px推奨
・iPhone6 pluse に最適化→1242px推奨

となります。推奨幅より小さい画像を使うと少しぼやけた感じになります。アンドロイドも含めてどんなスマホでもクッキリ見せたい！場合は、1200px以上の画像を用意する必要があります。あまり気にしない場合は、上記のサイズの半分のサイズでOKです。

■ヘッダー背景画像

ヘッダー画像の左右に背景カラーや背景画像を固定ページごとに設定できます。

■背景画像

コンテンツ部分の左右に背景カラーや背景画像を、固定ページごとに設定できます。設定したい場合は「個別指定の切り替え」にチェックを入れてください。

■h2タグのカスタマイズ

h2タグのデザインカラーを固定ページごとに設定できます。ワイドタイプを選択した場合は、記事幅いっぱいに広がり、縦ライン色が無効化されます。テキストの開始位置を左寄せか、中央寄せか選択することもできます。

■2カラムも選択可能


固定ページは1カラムがデフォルトですが、編集画面右下より「2カラム」を選択することも可能です。固定ページの2カラムは、通常「投稿」記事下にあるウィジェットパーツ、ソーシャルボタンエリア、前後の記事を排除してあります。
固定ページの2カラム実例 メルマガ配信履歴

■パンくずの有無も選択可能

1カラムページのヘッダー画像の下にパンくずを表示することもできます。成約率よりもSEOを重視したい人向けの機能です。実際のところ、パンくず付きの1カラムページのほうが上がりやすいという結果は得られなかったのですが、メシオプレス01＆02ユーザーさんから要望があったため対応しておきました。

■カテゴリーページへの割り当ても可能
カテゴリーページを固定ページで作り込むことも可能です。固定ページをカテゴリーページに適用する場合は、レイアウトは「2カラムのみ」となります。

固定ページでカテゴリーページとなるページを作ったあとに、管理画面の「投稿」→「カテゴリー」→該当のカテゴリーの「編集」→「固定ページのID」に適用したい固定ページのIDを入力してください。

固定ページのIDは、固定ページ一覧の記事タイトルにマウスカーソルを合わせたときに、左下に表示される数字です。

なお、重複コンテンツを避けるために、カテゴリーページに適用した固定ページは、固定ページの編集画面下のAll in One SEO Packでnoindexにしてください。

メシオプレス03設定一覧