テキスト(見出し説明)
ノーマル幅

※「MesioPress XS」の発売は未定です。このサイトはメシオプレス04の機能を紹介(全部載せして表示確認)するためのデモサイトです。

テキスト(見出し説明)
1カラムワイド(720px)

※「MesioPress XS」の発売は未定です。このサイトはメシオプレス04の機能を紹介(全部載せして表示確認)するためのデモサイトです。

テキスト(見出し説明)
1カラムノーマル(620px)

※「MesioPress XS」の発売は未定です。このサイトはメシオプレス04の機能を紹介(全部載せして表示確認)するためのデモサイトです。

カラムショートコード拡張(画像を横並びにする)
スマホでも列数キープできるボタン型メニュー(最大4列)

転職したい職業を選択してください。

目次を表示1
「2列表示」+カテゴリーカラー反映→1カラム向き

  1. メシオプレス01!
    メシオプレス01の見出し説明文!
    一覧ページの誘導文も変更OK!
  2. メシオプレス02(親)
    メシオプレス02の見出し説明文
    メシオプレス02(親)の記事をもっと見る
  3. メシオプレス03
    メシオプレス03の見出し説明文
    メシオプレス03の記事をもっと見る
  4. メシオプレス04
    メシオプレス04の見出し説明文
    メシオプレス04の記事をもっと見る

目次を表示2
1列表示+カテゴリーカラー反映

  1. メシオプレス01!
    メシオプレス01の見出し説明文!
    一覧ページの誘導文も変更OK!
  2. メシオプレス02(親)
    メシオプレス02の見出し説明文
    メシオプレス02(親)の記事をもっと見る
  3. メシオプレス03
    メシオプレス03の見出し説明文
    メシオプレス03の記事をもっと見る
  4. メシオプレス04
    メシオプレス04の見出し説明文
    メシオプレス04の記事をもっと見る

目次を表示3
1列表示(カラー反映なし)

  1. メシオプレス01!
    メシオプレス01の見出し説明文!
    一覧ページの誘導文も変更OK!
  2. メシオプレス02(親)
    メシオプレス02の見出し説明文
    メシオプレス02(親)の記事をもっと見る
  3. メシオプレス03
    メシオプレス03の見出し説明文
    メシオプレス03の記事をもっと見る
  4. メシオプレス04
    メシオプレス04の見出し説明文
    メシオプレス04の記事をもっと見る

目次を表示4
「カード表示+テキスト(カラー反映なし)」→2カラム向き

  1. メシオプレス01!
    メシオプレス01の見出し説明文!
    メシオプレス01!
    一覧ページの誘導文も変更OK!
  2. メシオプレス02(親)
    メシオプレス02の見出し説明文
    メシオプレス02(親)
    メシオプレス02(親)の記事をもっと見る
  3. メシオプレス03
    メシオプレス03の見出し説明文
    メシオプレス03
    メシオプレス03の記事をもっと見る
  4. メシオプレス04
    メシオプレス04の見出し説明文
    メシオプレス04
    メシオプレス04の記事をもっと見る

目次を表示5
「カード表示+テキスト」+カテゴリーカラー反映→2カラム向き

  1. メシオプレス01!
    メシオプレス01の見出し説明文!
    メシオプレス01!
    一覧ページの誘導文も変更OK!
  2. メシオプレス02(親)
    メシオプレス02の見出し説明文
    メシオプレス02(親)
    メシオプレス02(親)の記事をもっと見る
  3. メシオプレス03
    メシオプレス03の見出し説明文
    メシオプレス03
    メシオプレス03の記事をもっと見る
  4. メシオプレス04
    メシオプレス04の見出し説明文
    メシオプレス04
    メシオプレス04の記事をもっと見る

目次を表示6
固定ページで作成

  1. りんごの記事!
    説明
    一覧ページの誘導文も変更OK
  2. いちごの記事一覧
    説明
    いちごの記事一覧の記事をもっと見る

メシオプレス04機能実装サイトTOP

これはトップページ用の記事。この記事だけでトップページを構成することもできますし、このデモサイトのようにウィジェットパーツを上下に使って、目次型のトップページを構成することもできます。

ランキング

ノーマル幅(620px)に合わせたランキング。画像と説明は縦並び

1位の商品説明1位の商品説明1位の商品説明1位の商品説明1位の商品説明

2位の商品説明2位の商品説明2位の商品説明2位の商品説明2位の商品説明

3位の商品説明3位の商品説明3位の商品説明3位の商品説明3位の商品説明

4
4位の商品名

4位の商品説明。ボタンの非表示も可能。

構造化マークアップ

メシオプレス02や03の構造化マークアップは、

  1. トップページ:WebPage
  2. 記事ページ:Article
  3. パンくず:BreadcrumbList

の3つだけの実装だったのですが、2018年4月にGoogleのゲイリーが「可能な限り多くの構造化データをマークアップするといい」と発言したようなので、メシオプレス04では可能な限り対応しました。

ただし、構造化マークアップは調べれば調べるほど難しくて、何が正解かわからないものも多いです。そこで、現段階ではGoogle推奨のもの+確実に正しいと思われる下記の9個をマークアップしています。

UserComments
記事のコメントと、アイキャッチ付き投稿ウィジェットに実装

BreadcrumbList
パンくずリストに実装

WPAdBlock
記事前半、記事最後に表示する広告表示に実装

Organization
検索結果に組織(サイト)のロゴが表示される(可能性が出てくる)ための設定。

Article、NewsArticle 、BlogPosting
記事orページ全体に実装。02、03の「WebPage」もここに含まれる書き方に変更。Googleはこれらを見て検索のスニペットを作る。

ちなみに、記事下のアイキャッチはこのマークアップでエラーが出ないようにするために必要。

CreativeWork
記事に実装。CreativeWorkより細かい上記のArticleだけでも足りる気もするけど、念のため実装。

SiteNavigationElement
グローバルメニュー、フッターメニューに実装。

実装を見送ったもの
WPHeader、WPSideBar、WPFooter、hcard、hentyなど(調べると、これらを実装しているWordPressテーマもあるようですが、メシオプレス04では実装する意味なしと判断して除外しました)

参考)
schema 2.0 の WPHeader や WPSideBar の使い道がない
ttp://xn--lcki7of.jp/747/

※hcard、hentyは古いフォーマットで、他のもので代用できているので指定は不要です。

ランキング2
テキスト(見出し説明)720px、ボタン薄緑ピンク

1位の商品名

1位の商品説明1位の商品説明1位の商品説明1位の商品説明1位の商品説明

2位の商品名

2位の商品説明2位の商品説明2位の商品説明2位の商品説明2位の商品説明

3位の商品名

3位の商品説明3位の商品説明3位の商品説明3位の商品説明3位の商品説明

4
4位の商品名
4位の商品名

4位の商品説明。ボタンの非表示も可能。

ランキング3
テキスト(見出し説明)ノーマル、ボタン緑赤横並び

1位の商品名

1位の商品説明1位の商品説明1位の商品説明1位の商品説明1位の商品説明

2位の商品名

2位の商品説明2位の商品説明2位の商品説明2位の商品説明2位の商品説明

3位の商品名

3位の商品説明3位の商品説明3位の商品説明3位の商品説明3位の商品説明

4
4位の商品名
4位の商品名

4位の商品説明。ボタンの非表示も可能。

わしのプロフィール
プロフィール(1カラム)

大神様
大神様
WordPressの大神様

わしの説明文。とんでもねぇ。あたしゃ神様だよ。

アイキャッチ付きメニュー
カテゴリー+2段組み

  1. メシオプレス01
  2. ゴリラ02
    mesiopress02(親)
  3. メシオプレス03
  4. メシオプレス04
  5. 池袋のラーメン

特集コーナー(特集枠)
タイトル説明

特集コーナー(特集枠)
PC4列×2

横並びランキング(ランキング横)
見出し説明

人気記事ランキング(手動)
ノーマル

人気記事ランキング(手動)
720px

人気記事ランキング(手動)
620px

新着記事(更新履歴)
新しく公開した記事

  1. 2019年10月19日
    タグクラウドのカラー変更機能 」を投稿しました
  2. 2019年6月29日
    改訂履歴(dlタグを使った記述・説明リスト) 」を投稿しました
  3. 2019年6月29日
    段落調整クラス(段落間を狭くしたり、広くしたりする) 」を投稿しました

このサイトの制作陣
す、すごい人たちが集まっています……!ゴイゴイスー!スーススー!スーを差し上げます!