【日本語WordPressテーマ】isotype

Readable

Readableはブロックエディター（Gutenberg）完全対応のテーマで、”記事の読みやすさ”と”収益化しやすさ”を追求したブログに特化したテーマなってます。

サイトデザイン

ファーストビュー

ページを開いて最初に表示されるエリアが「ファーストビュー」。

Readableではこのファーストビューをさまざまな演出で表示させることができます。

たとえばデモサイト2のような全画面スライダー形式にする場合、以下のように細かい設定が用意されてます。

操作は至って簡単。

用意された項目を埋めたり選択するだけ。

[bln_left color=”pink-waku” img=”01″ name=”管理人”]

スライダーなしももちろんOKです。

[/bln_left]

記事スライダー

ファーストビューの下には記事スライダーを表示させることもできます。

こちらはデモサイト1の記事スライダー。

デモサイト1（のファーストビュー）は記事スライダー（大）の設定で表示されてます。

デモサイト2と3には記事スライダー（小）が設定されてます。

記事一覧表示

PC表示時4パターン、スマホ表示時2パターンのレイアウトデザインが用意されています。

記事一覧ページの上部には「おすすめ記事」も表示可。

オリジナル機能

33種類のWebフォント

記事の読みやすさを追求する上でReadableが最重要視しているのが”文字”。

Readableでは33種類のWebフォントが標準搭載されています。

これならわざわざきれいなフォントを埋め込んだ画像を用意する必要はなく、テキストベースでおしゃれな見出しやかっこいいバナーなんかもすぐに作れちゃいます。

日本語フォントも明朝体・ゴシック体・デザイン書体など17種類が用意されてるんですから驚きです。

しかもテキストなので、どんな環境でもぼけずに常にきれいに表示されます。

なおReadableでは（文字間の）カーニング設定を見出し・説明文・日付などに対して個別の設定が可能。

まさに紙媒体のように文字の読みやすさにこだわり抜いてるのがReadableと言えます。

ランキング機能

HTMLといったWeb固有の知識がなくても、商品情報の入力だけで簡単におすすめ商品のランキング表が作れます。

作成したランキングはテンプレートとして保存可能なので、記事内の任意の場所にいつでも挿入可能。

Gutenbergグーテンベルグ対応ブロック

Readableはブロックエディター（Gutenberg）に完全対応し、多数のオリジナルブロックが搭載されてます。

全部は紹介しきれないのでここではオリジナルブロックの一部をご紹介します。

見出しのレベル（h1,h2…）、装飾、カラーなどが簡単に設定できます。

会話形式で話が進む吹き出しブロック。

会話（テキスト）を入力したらあとは色やアイコン、キャラクター名などを設定するだけ。

質問と回答を入力するだけのQ&A形式のFAQを簡単に挿入できます。

強調したい部分にはキャプション付きブロックが効果的かもしれません。

タイトルと文章を入力するだけ。

キャプションのレイアウトや色は自由自在。

キャプションタイトル部分の冒頭にはアイコンを設定することもできます。

こちらは各種解説ページなどで「ステップ１」「ステップ２」といった手順の説明用に使えるステップブロック。

ステップ数は最大10個まで設定可。

作成済みのランキング表を記事内の任意の位置に挿入できます。

期間限定で表示させたいモノに関してはカウントダウンタイマーを表示させることができます。

カウントダウン終了後は任意のテキストを表示させたり特定のページへ飛ばすことも可能。

他にもまだまだあります。

（※一部を抜粋）

目次機能

Readableには目次機能がデフォルトで標準搭載されてます。

デザインも複数から選択できるほか、サイドバーにウィジェットとして表示させることも可。

プロフィール表示機能

複数人で記事を書いているサイトでは記事を書いた人を自動的に判別し、記事作成者個別のプロフィールを表示させるウィジェットが搭載されています。

なお固有の記事作成者が存在しないトップページやアーカイブページなどでは、サイト管理人（代表者）のプロフィール情報を表示する仕様にもなっています。

サイト管理人のプロフィール情報はWordPress管理画面の「プロフィール」で設定したものが表示されます。

固定フォローボタン

SNSへの導線を確実にするため、ReadableではフォローボタンやSNSアカウントへのリンクアイコンなどを、スクロールしても常に表示される追随ボタンとして表示できます。

広告・収益化

広告用テンプレート

サイト内に掲載する広告タグはテンプレートとして一元管理できます。

それゆえどんな広告を設置してたのか、期限が終了している広告はないかなどの心配は（ほぼ）なくなります。

またいつでもどこでも簡単に一括で差し替えることが可能。

広告はウィジェットエリアや記事内、ヘッダー・フッターなどいろんなところに設置できます。

CTA機能

Readableでは記事の任意の場所にCTAが設置できます。

項目を埋めていくだけのカンタン作業で、PCとスマホで表示画像を変えたりレイアウトを変更することも可。

CTR計測機能

Readableにはプラグイン無しでCTR（クリック率）が計測可能な機能がデフォルトで搭載されてます。

CTR計測用のタグはASP提供の広告タグをそのまま使ってもいいし、自分で独自LPへのリンクを設定することも可能。

作成したCTRタグは記事のCTRブロックとして任意の場所に簡単に設置することができます。

（記事内にCTRタグを貼り付けると管理画面にログインしている状態でのみCTRデータが表示される）

またReadableのボタン機能はCT（クリック数）・PV（PV数）・IMPRESSIONS（表示回数）も計測可能。

ABテスト機能

Readableには（ブロック単位での）ABテスト機能がデフォルトで搭載されてます。

どんな方におススメ？

• ブロック（Gutenberg）エディター対応のテーマが欲しい
• 収益化機能の充実したテーマを探してる
• 読みやすい日本語フォント表示可能なテーマでブログを運営したい

タブ選択まで戻る

MAJESTIC＋（プラス）

こちらは人気を博したテーマ『MAJESTIC』の機能拡張版テーマ。

「インパクト・美しさ・ミニマル」を突き詰めたフルスクリーン表示デザインが特長です。

主なターゲットはビジネスサイト。

スマホユーザーを意識した新たな機能も盛り込まれてます。

ざっくり言うなら『よりかゆいところに手が届く設定が追加され、サイト読み込みスピードの短縮も図ったバージョン』みたいなものでしょうか。

ファーストビュー

迫力あるフルスクリーンのスライダーで出迎えてくれるファーストビューは、画像以外にMP4動画・YouTube動画なんかも設置できます。

動画の場合は動画が表示されたタイミングで再生が開始され、次のスライドへ移行するか動画が再生終了すると自動で停止する仕様なので、読み込み負荷の軽減にも役立ってます。

スライダーは非表示ももちろん可能。

そのほかかなり細かく設定できます。

2タイプのアイキャッチ画像表示

メインコンテンツへの重要な動線とも言えるアイキャッチ画像ですが、MAJESTIC＋ではアイキャッチ画像と見出し・説明文・ボタンを2種類のレイアウトスタイルで表示できます。

2～4列のカラム形式と左右交互に表示する2パターンから選択可。

美しい日本語タイポグラフィー

サイトの印象付けに大きくかかわってくるのがフォント。

MAJESTIC＋ではフォントタイプをGoogle NotoSans・游ゴシック・游明朝から選択可。

見出しと本文別々に設定できます。

さらに要素別に、フォントサイズ・色・行間・文字間などの細かい設定も可。

パララックスコンテンツ

Webデザインの知識を必要とすることなく簡単にパララックスコンテンツをいくつも作ることができます。

画像のアップローダー・見出し・説明文・アニメーション効果なんかも設定可。

しかも画像をフルスクリーンで表示させることも画面の表示領域の◯◯%に表示させるというような設定も可能です。

画像のピンチアウト

インスタグラムに搭載されてるズーム機能のように、スマホでの閲覧時のみですが画像だけをピンチアウトでピンポイントで拡大できる機能が搭載されてます。

指を離せば元のサイズに戻ります。

（iOS・Android対応）

個別記事

フル幅アイキャッチ画像：個別記事のヘッダーに限り、アイキャッチ画像やキャプションテキストをフル幅で表示可。

相対日付：記事の日付表示を「◯日前の投稿」といった相対的日付での表示も可。

投稿者情報：記事下部に投稿者の情報が表示可。

関連記事表示設定：「カテゴリー」選択で同一カテゴリーの記事からランダムで関連記事を出力。

「タグ」選択で同一タグの記事からランダムで関連記事を出力。

アニメーション設定

HTMLタグに特定の記述を追加することで様々なアニメーション効果を付けられます。

たとえば表示内容をフェードイン効果で表示させたいなら、

<div class="wow fadeIn">ここにアニメーションさせたい内容</div>

上記赤字の部分を変更するだけでおよそ80種類弱のアニメーションが設定できます。

（アニメーションの動作はAnimate.cssで確認可）

その他の搭載機能

• ランキング機能つきタブウィジェット

  

• 記事表示設定

  

• Facebookページプラグインウィジェット

  

• contact infoウィジェット

  

• カルーセルスライダーウィジェット

  （※デモサイトフッター前あたりに表示）

  

• フッター設定：分割表示やフリースペースあり

  

• 動画ウィジェット

  

• Google Mapas

  

どんな方におススメ？

• スマホユーザーが多いのでスマホユーザーを意識した作りのテーマを探してる
• 読みやすい日本語フォントで表示可能なテーマを探してる

タブ選択まで戻る

MARBLE

ついつい搭載しがちな”余計な”機能や”華やかな”デザインを引いて引いてミニマルに徹したベーシックなサイトデザインのテーマがMARBLEです。

TOPページは（ウィジェットを使って）ブロックを好きなように積み重ねていく感じでいろいろなスタイルのコンテンツを自在に作成することができます。

それゆえベーシックデザインでありながらも飽きの来ないテーマに仕上げることができ、ブログ運営からビジネスサイトまで幅広く利用することができるというわけです。

 

ちなみにコチラ↓がデモサイトのページ構成。（※テキストクリックでジャンプします）

（※一部割愛）

ヘッダー

ヘッダーは2タイプの表示スタイル。

ロゴの上下余白やテキスト色なども変更可。

スタイル2であればページスクロール時にページ上部へのヘッダー固定表示も選択できます。

スライダー

ヘッダー下部にはスライダーを表示できます。

（スライダー無しもOK）

デフォルト設定ではスライダーは横幅フル表示ですが、設定OFFにて（設定済みの）ページ最大幅でのスライダー表示にも変更可。

必要に応じてタイトル・説明テキスト・リンクなども入力可。

他の主な設定項目

• スライダーの切り替え方法：フェード or スライド
• アニメーションの種類：6種類のスタイルから選択可
• スライド切り替わり時のアニメーションスピードの調整可
• スライド間隔：スライドの表示時間
• スワイプ動作：指でのタッチ操作の許可・不許可
• スライダーページ送り：表示/非表示
• スライド左右のナビゲーション：表示/非表示
• オーバーレイ：スライダー画像上にオーバーレイ効果の設定可
• オーバーレイ透明度：透明度の変更可
• スライダーの高さ：PC・タブレット・スマホで別設定可

アイキャッチブロック

特定の固定ページへのリンクをアイキャッチ画像付きで表示できます。

（ブロック自体の表示/非表示も可）

設定はアイキャッチブロックにリンク表示させたい固定ページを選択するだけ。

チェックボックスで複数選択可。

他の主な設定項目

• 見出し：見出し用のテキスト
• カラム（列）数：3カラム or 4カラムから選択可・3カラムで6つ選択時は3列2段での表示
• 並び順1：固定ページのタイトル・日付・ランダムなど数種類から選択可
• 並び順2：昇順・降順の設定可

• 角丸設定：アイキャッチ画像の角丸化

  

コンテンツブロック

コンテンツブロックというのは、自由に作成した固定ページの内容をトップページに複数配置（表示）できるウィジェットです。

これを使えばさまざまなレイアウトが可能なランディングページ（LP）なども簡単に作成できます。

カルーセルスライダー

トップページ以外の投稿ページや固定ページもに指定可能。

フッター

フッターには最大3列のウィジェットエリアが設定可。

読みやすさ重視・日本語タイポグラフィー

サイトの印象付けに大きくかかわってくるのがフォント。

MARBLEではフォントタイプをGoogle NotoSans・游ゴシック・游明朝から選択可。

見出しと本文別々に設定できます。

さらに要素別に、フォントサイズ・色・行間・文字間などの細かい設定も可。

個別記事

フル幅アイキャッチ画像：個別記事のヘッダーに限り、アイキャッチ画像やキャプションテキストをフル幅で表示可。

相対日付：記事の日付表示を「◯日前の投稿」といった相対的日付での表示も可。

投稿者情報：記事下部に投稿者の情報が表示可。

アニメーション設定

HTMLタグに特定の記述を追加することで様々なアニメーション効果を付けられます。

たとえば表示内容をフェードイン効果で表示させたいなら、

<div class="wow fadeIn">ここにアニメーションさせたい内容</div>

上記赤字の部分を変更するだけでおよそ80種類弱のアニメーションが設定できます。

（アニメーションの動作はAnimate.cssで確認可）

Google Maps表示

設定を有効化するとトップページ下部にGoogle Mapsが表示されます。

マーカーアイコンや吹き出しなどの挿入、地図の色味・明るさ・高さなどの調整も可。

またGoogle Maps設置用のショートコードを使って任意のウィジェットエリアに地図を表示させることもできます。

その他の搭載機能

• ランキング機能つきタブウィジェット：ランキング記事・新着記事・タグの3種類をタブ切り替えで表示可

  

• Facebookページプラグインウィジェット：Facebookの公開ページをサイトに埋め込み表示

  

• contact infoウィジェット：問合せ先情報を表示

  

• 動画ウィジェット：Youtube動画の埋め込み表示用

  

どんな方におススメ？

• ベーシックなサイトデザインが好み
• ジャンルにとらわれることなくどんなサイトでも使い回せるテーマが欲しい
• 読みやすい日本語フォントで表示可能なテーマを探してる

タブ選択まで戻る

MAJESTIC

MAJESTICというのは”雄大な、壮大な”という意味で、その名にふさわしく余分な装飾を削ぎ落としたミニマルなデザインかつインパクトあるフルスクリーン表示が特長。

その雰囲気からビジネス向けサイトがメインのターゲットとなってます。

特にスッキリとしたデザインでスマートな印象を与えるサイト作りにおススメです。

ファーストビュー

PCだろうがタブレットであろうがスマホであろうが、MAJESTICのファーストビューは画面サイズに合わせて適切な表示領域でフルスクリーン表示されるよう制御されてます。

これは動画もフルスクリーン表示可能なのでインパクトあるファーストビューで利用者を迎えることができますね。

ファーストビューのスライダーに関しては細かい設定が用意されてます。

2タイプのアイキャッチ画像表示

メインコンテンツへの重要な動線とも言えるアイキャッチ画像ですが、MAJESTICではアイキャッチ画像と見出し・説明文・ボタンを2種類のレイアウトスタイルで表示できます。

2～4列のカラム形式と左右交互に表示する2パターンから選択可。

美しい日本語タイポグラフィー

サイトの印象付けに大きくかかわってくるのがフォント。

MAJESTICではフォントタイプをGoogle NotoSans・游ゴシック・游明朝から選択可。

見出しと本文別々に設定できます。

さらに要素別に、フォントサイズ・色・行間・文字間などの細かい設定も可。

パララックスコンテンツ

Webデザインの知識を必要とすることなく簡単にパララックスコンテンツをいくつも作ることができます。

画像のアップローダー・見出し・説明文・アニメーション効果なんかも設定可。

しかも画像をフルスクリーンで表示させることも画面の表示領域の◯◯%に表示させるというような設定も可能です。

個別記事

フル幅アイキャッチ画像：個別記事のヘッダーに限り、アイキャッチ画像やキャプションテキストをフル幅で表示可。

相対日付：記事の日付表示を「◯日前の投稿」といった相対的日付での表示も可。

投稿者情報：記事下部に投稿者の情報が表示可。

関連記事表示設定：「カテゴリー」選択で同一カテゴリーの記事からランダムで関連記事を出力。

「タグ」選択で同一タグの記事からランダムで関連記事を出力。

アニメーション設定

HTMLタグに特定の記述を追加することで様々なアニメーション効果を付けられます。

たとえば表示内容をフェードイン効果で表示させたいなら、

<div class="wow fadeIn">ここにアニメーションさせたい内容</div>

上記赤字の部分を変更するだけでおよそ80種類弱のアニメーションが設定できます。

（アニメーションの動作はAnimate.cssで確認可）

その他の搭載機能

• ランキング機能つきタブウィジェット

  

• 記事表示設定

  

• Facebookページプラグインウィジェット

  

• contact infoウィジェット

  

• カルーセルスライダーウィジェット

  （※デモサイトフッター前あたりに表示）

  

• フッター設定：分割表示やフリースペースあり

  

• 動画ウィジェット

  

• Google Mapas

  

どんな方におススメ？

• ジャンルにとらわれることなくどんなサイトでも使い回せるテーマが欲しい
• ごちゃごちゃせず、スマートな印象を与えるサイトを作りたい
• 読みやすい日本語フォントで表示可能なテーマを探してる

タブ選択まで戻る

MOMENTUM

MOMENTUM（モメンタム）はショップサイトや飲食店サイトによく合うグリッドレイアウトが得意な、ちょっとオシャレな雰囲気のWordpressテーマです。

グリッド（格子状）デザインって、構築するのがけっこう難しいんです。

でもMOMENTUMなら専用のウィジェットを使っての設定なので、かなり複雑なデザインでも簡単に作れるのが特長。

ファーストビュー

サイトを訪れて最初に目にするファーストビュー。

ここでのスライダーは動画のアップロードにも対応。

多彩な設定オプションにより各種アニメーションの設定やゴーストボタン、スライダー上の画像やテキストも表示することができます。

※デモサイトファーストビューの構成

企業やショップ向け用に住所や営業時間・電話番号を入力することもできます。

（非表示も可）

ゴーストボタンについてはその設定オプションにより、自由な設定でオリジナルのボタンデザインを設定することができます。

グリッドブロック

最大4列のグリッドに、グリッドブロックのウィジェットを無制限に設定できます。

1つ1つのブロックは、高さも画像も個数もどう重ねるかも自由。

パズル感覚で自由にグリッドレイアウトを組むことができます。

（スマホでは1列表示）

マウスホバー時のアニメーション効果、オーバーレイヤー、キャプション、ゴーストボタンまで設定可能。

日本語タイポグラフィー

サイトの印象付けに大きくかかわってくるのがフォント。

MOMENTUMではフォントタイプをGoogle NotoSans・游ゴシック・游明朝から選択可。

見出しと本文別々に設定できます。

さらに要素別に、フォントサイズ・色・行間・文字間などの細かい設定も可。

高機能カルーセルスライダー

投稿ページだけでなく固定ページも指定可能なカルーセルスライダーは、対象カテゴリーの指定・期間・並び順などを指定できます。

個別記事

相対日付：記事の日付表示を「◯◯日前の投稿」といった相対的日付での表示も可。

関連記事表示設定：「カテゴリー」選択で同一カテゴリーの記事からランダムで関連記事を出力。

「タグ」選択で同一タグの記事からランダムで関連記事を出力。

その他の搭載機能

• Google Maps
• ランキング機能つきタブウィジェット
• Facebookページプラグインウィジェット
• contact infoウィジェット
• 動画ウィジェット

どんな方におススメ？

• 複雑なグリッドレイアウトが簡単に構築できるテーマがほしい
• 読みやすい日本語フォントで表示可能なテーマを探してる

タブ選択まで戻る