Gutenberg設定[Readable] - [WordPressテーマ/おすすめ]かっこいい日本語レスポンシブ有料テーマisotype

Readable設定マニュアル目次

ページのデザインやレイアウトを設定を行うには、記事投稿及び固定ページで、WordPress標準のブロックと同じように、テーマ固有のカスタムブロックを用意しています。

テキスト
段落
見出し
見出し（isotype）
デザイン
ふきだし
アコーディオン
キャプション付きブロック
目次ブロック
ステップブロック
カスタムリスト
メモブロック
Q&Aブロック
アフィリエイト
ランキング
広告タグ
CTRブロック
ABテスト
イベントカウントダウン

テキスト

段落

表示例

設定方法

段落ブロックの導入

WordPress で利用可能な「段落」ブロックの使い方を説明します。
「段落」ブロックは一般ブロックの中に含まれており、本文内にテキストを追加する際に使用します。「段落」ブロックは追加した際は空白のブロックとなっています。
この状態から段落ブロックとして使用する場合はテキストを入力してください。

段落ブロックのツールバー

段落ブロックにはツールバーが用意されています。
ツールバーには次の使い方があります。

ブロックタイプやスタイルを変更

ツールバーの左側のボタンから他のブロックやスタイルへ変更が可能となっています。

段落の配置をドラッグで移動させる

段落ブロックをドラッグした状態で、上下に移動させる事が可能です。

段落の上下配置変更

ツールバーの上下矢印のボタンをクリックする事で段落の配置を上下方向に切り替える事が可能です。

テキストの左右中央配置変更

ツールバーの上下矢印のボタンをクリックし配置方向を選択する事で位置の変更が可能となります。
「左寄せ」「中央寄せ」「右寄せ」に変更することができます。

テキストのマーカー・背景スタイルを変更

各マーカーを選択する事でテキストの背景スタイルを変更する事ができます。
蛍光ペン風にテキストの下半分に限定してスタイルを適用する事も可能です。

テキストの下線設定

テキストに下線、二重線などの設定が可能です。

テキストを太字に変更

テキストを太字に変更できます。

テキストを斜め文字に変更

テキストを斜め文字・イタリック形式に変更できます。

テキストにリンクを設定

テキストにURLリンクの設定が可能です。
リンク先のURLを入力し、[Enter] キーを押す事で設定できます。

テキスト色の変更

任意の文字色へ変更する事が可能です。

文章中の改行

[Shift]+[Enter]キーを使用する事で改行が可能です。

文字サイズの変更

任意の文字サイズへ変更する事が可能です。編集画面右側の歯車ボタンをクリックし、「ブロック」タブ、そこから下に
「タイポグラフィ」内の「プリセットサイズ」からサイズの変更が可能となっています。

その他の設定

その他に、インラインコード、インライン画像、取り消し線、上付き、下付きの設定が可能となっています。

見出し

見出しブロックでは、簡単な操作で、見出しを設定する事ができます。設定できる見出しは、
「h1」「h2」「h3」「h4」「h5」「h6」
の上記となっており、数字が小さいほど、主要なコンテンツを意味するものとなっています。

表示例

※ブロックエディター画面上の表示となります。

設定方法

見出しブロックの導入

通常のブロックを追加すると同じ様に、「＋・プラス」ボタンから「見出し」と記載のアイコンをクリックする事で導入ができます。
操作は動画上での方法でh1~h6への見出しの切り替えが可能となっています。

文字サイズ設定

文字サイズの設定には、「タイポグラフィ」>「プリセットサイズ」より、
・デフォルト
・小
・通常
・大
・特大
・カスタム
より任意の項目を設定する事で、文字サイズの変更が可能となります。

文字色・背景色設定

文字色の設定には、「色設定」>「文字色」より任意の色を設定する事ができます。
背景色は「色設定」>「背景色」より設定可能です。

見出し（isotype）

表示例

設定方法

見出し（isotype）ブロックの導入

通常のブロックを追加すると同じ様に、「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「見出し」と記載のアイコンをクリックする事で導入ができます。
操作は動画上での方法でh1~h6への見出しの切り替えが可能となっています。

スタイルの設定

スタイルの変更は「スタイル」のエリアより、任意のスタイルの設定が可能です。
・装飾なし
・左線
・左下線
・上下線
・実下線
・実破線
上記のスタイルが用意されており、用途に合わせてお選びいただけます。

カラー設定

文字色の変更には「色設定」機能により、「文字色」や「背景色」が変更可能となっています。

デザイン

ふきだし

表示例

設定方法

ふきだしブロックの導入

通常のブロックを追加すると同じ様に、「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「ふきだし」と記載のアイコンをクリックする事で導入ができます。

ふきだしの形

ふきだしの形を変更できます。ふきだしの設定を行いたい段落を選択状態から、右上の歯車アイコンをクリックし、
「ふきだし設定」>「ふきだしの形」内の種類として「角丸・直角・泡」から選択し、変更する事が可能です。

ふきだしの方向

「ふきだし設定」>「ふきだしの方向」から配置を左右のどちらかに変更が可能となります。

ふきだしの線

「ふきだし設定」>「ふきだしの線」からふきだしを囲う線の有無を切り替え可能です。

ふきだしカラー（背景色）

「ふきだし設定」>「ふきだしカラー（背景色）」からふきだしの背景色の変更が可能です。
用意された数種類の色から選択できる他、「カスタムカラー」から任意の色を指定する事ができます。

ふきだしカラー（線色）

「ふきだし設定」>「ふきだしカラー（線色）」からふきだしを囲う線色の変更が可能です。

並び形式

「ふきだし設定」>「並び形式の設定」からふきだしの並び形式の変更が可能となります。
主に「横」に表示するか「下」に表示するかの違いがあります。

アイコン画像設定

「アイコン設定」>「アイコン画像設定」から任意の画像をふきだしのアイコンに設定する事が可能です。

アイコンの形

「アイコン設定」>「アイコンの形」からアイコンの形を変更する事ができます。
「正方形」「丸」から選択可能です。

アイコンの下に名前を設定

「アイコン設定」>「アイコンの下に名前を設定できます」の箇所からアイコンの下に表示する名前を設定する事ができます。

アコーディオン

表示例

設定方法

アコーディオンブロックの導入

通常のブロックを追加すると同じ様に、「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「アコーディオン」と記載のアイコンをクリックする事で導入ができます。

アコーディオンのタイトルを設定

アコーディオンのタイトルの設定には、アコーディオンブロックを新規で追加した際に、
上部にタイトル入力欄がありますので、その中を選択する事で、タイトルの入力が可能となります。

アコーディオンの内容を設定

タイトル入力箇所の下に、アコーディオンの中に格納する要素（子要素）があり、その中にテキストやコンテンツの設定が可能となっています。

親要素のカラーを変更

アコーディオンの親要素（タイトル箇所）のカラー形を変更できます。アコーディオンブロックを選択状態から、右上の歯車アイコンをクリックし、
「親要素のカラーを変更」内のカラーピッカーから任意の色へ設定が可能です。

親要素のテキストカラーを変更

「親要素のテキストカラーを変更」内のカラーピッカーから任意の色へ親要素のテキストの色設定が可能です。

子要素のカラーを変更

「子要素のカラーを変更」内のカラーピッカーから子要素の背景色を任意の色へ変更可能です。

子要素のテキストカラーを変更

「子要素のテキストカラーを変更」内のカラーピッカーから子要素のタイトル色を設定できます。

スタイルを変更

アコーディオンブロックには3種類の基本スタイルが用意されており、任意のスタイルの変更が可能となっています。
・デフォルト
・シンプルアコーディオン
・破線アコーディオン

アイコンセットを変更

アコーディオンの開閉時に表示させるアイコンの変更が可能となっています。

キャプション付きブロック

表示例

設定方法

キャプション付きブロックの導入

通常のブロックを追加すると同じ様に、「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「キャプション付きブロック」と記載のアイコンをクリックする事で導入ができます。

スタイルを設定

キャプション付きブロックではいくつかの専用スタイル項目を用意しています。
・デフォルト（後述のデフォルに設定したスタイルを適用します）
・浮き出し
・枠外左
・枠外右
・枠上左
・枠上右
・枠外左2
・枠外右2
・枠内左
・枠内右用途に合わせてスタイルをお選びいただけます。

デフォルトスタイルを設定

デフォルトスタイルの項目では、よく使うスタイルについては、デフォルト項目に事前に適用させる事で、より早くお使いになるスタイルにアクセスできるように利便性を高める機能となっています。

タイトル背景色を選択

「タイトル背景色を選択」の設定箇所より、タイトルの背景色の変更が可能です。

コンテンツ背景色を選択

「コンテンツ背景色を選択」の設定箇所より、コンテンツの背景色の変更が可能です。

アイコン設定

「アイコン設定」の設定箇所より、Font Awesome 5のアイコンが利用可能となっています。
タイトルに特徴を付けたい場合に使用をおすすめできる機能です。
「アイコンのクラスを設定」の箇所には、その他に未登録のFont Awesome 5のアイコンを設定する事が可能となっています。
このクラスの設定には、のFont Awesome 5サイトにてクラス情報を得る必要があり、中~上級者向けの設定となっています。

目次ブロック

表示例

設定方法

目次ブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「目次ブロック」と記載のアイコンをクリックする事で導入ができます。

スタイルの設定

目次ブロックを選択状態から編集画面右上の歯車をクリック、ブロックタブへアクセスする事で「スタイル」の項目が設定可能となります。
目次ブロックのスタイルは、
・二重囲み
・付箋風
・タグ風
が存在し、お好きな目次スタイルの適用が可能となっています。
「デフォルトスタイル」箇所には、よく使う目次スタイルを適用する事ができます。

実際のページでの目次表示

実際のページへ目次を表示するには、そのページの中に、h1、h2、h3タグが存在した場合に、自動で目次を表示する形となっています。
その為、h1、h2、h3タグがページ内に存在しない場合は、目次ブロックを設定したとしても表示される事はありません。

ステップブロック

表示例

設定方法

ステップブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「ステップブロック」と記載のアイコンをクリックする事で導入ができます。

スタイルの変更

isotypeステップブロックには2種類のスタイルが用意されています。
・デフォルト
・シンプル
上記からお好みのスタイルを適用する事ができます。
「デフォルトスタイル」にはよく使うスタイルを設定する事で、よりブロックの利便性を向上できます。

ステップ数の設定

ステップ数の変更には、「ステップ設定」>「総ステップ数」から任意のステップ数へ変更可能となっています。

カスタムリスト

表示例

設定方法

カスタムリストブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「カスタムリスト」ブロックと記載のアイコンをクリックする事で導入ができます。

アイコンの設定

アイコンの変更には「スタイル設定」>「アイコン」より任意のアイコンへ変更が可能です。

アイコン色の設定

アイコン色の変更には「色設定」>「アイコン色」より任意のアイコン色へ変更が可能です。

メモブロック

表示例

設定方法

メモブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「メモブロック」と記載のアイコンをクリックする事で導入ができます。

メモブロックの色設定

メモブロックの色を変更するには「スタイル」> 各色（灰色、黒色、黄色、橙色、赤色、紫色、青色、水色、緑色）
より、任意の色を選択し、保存する事で反映する事ができます。

メモブロックの特徴

メモブロックは、管理画面にログインしている場合に限定してページ上に表示させる事ができるブロックです。ログインしていない場合は表示されません。
その為、気ままに記しておきたい事をページ上にメモしていく事が可能となっています。思考の整理に役立つブロックとなっています。

表示される例（ログインしている場合）：

表示されない例（ログインしていない場合）：

Q&Aブロック

表示例

設定方法

Q&Aブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「Q&A」と記載のアイコンをクリックする事で導入ができます。

スタイルの設定

Q&Aブロックのスタイルを変更するには「スタイル」より、任意のスタイル（シンプル、ボーダーライン、ストライプ）を選択し、保存する事で反映する事ができます。

アフィリエイト

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「広告タグ」と記載のアイコンをクリックする事で導入ができます。

表示したい広告タグを選択

広告タグの表示には、広告タグブロックを設定した際に、選択形式で事前に登録した広告タグの記事を選択する事ができます。
事前に登録済みの記事が有る場合、任意の記事を選択し保存する事で、実際のページに広告が表示される形となります。
事前に登録済みの記事が無い場合、次のステップへお進みください。

広告タグに設定する為の記事を作成する

広告タグブロックに記事を表示させるには、事前に記事を作成する必要があります。
作成場所について、「管理画面」>「isotype」>「広告タグ」へアクセスします。そこから「新規作成」を選択し、その中の「広告タグ」欄へ広告コードを設定し保存します。
これによりisotype広告タグブロックにて認識する様になります。

広告コードの他にも、通常のテキストの入力も可能ですので、試験動作の際は、その様なテキストを保存する事でも動作を確認いただけます。

CTRブロック

表示例

CTRブロックでは主に「CTR（クリック率）」「CT（クリック数）」「PV（PV数）」「imps（表示回数）」を計測可能なブロックとなっています。
CTR情報からそのタグやボタンの運用状況の見極めや、目的のリンクへ効率良くクリックされているかを数値から判断でき、改善点を得る為の役立つ機能となっています。

設定方法

CTRブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「CTRブロック」と記載のアイコンをクリックする事で導入ができます。

表示したいCTRを選択

CTRの表示には、CTRブロックを設定した際に、選択形式で事前に登録したCTRの記事を選択する事ができます。
事前に登録済みの記事が有る場合、任意の記事を選択し保存する事で、実際のページにCTRが表示される形となります。
表示ページには管理者にログインしている場合は、クリック率等のCTR情報が表示されますが、ログインしていない場合はCTR情報は表示されない仕組みとなっています。事前に登録済みのCTR記事が無い場合、次のステップへお進みください。

CTRブロックに設定する為の記事を作成する

CTRブロックに記事を表示させるには、事前に記事を作成する必要があります。
作成場所について、「管理画面」>「isotype」>「CTRタグ」へアクセスします。そこから「新規作成」を選択し、その中の各項目を設定する事で、CTRブロックと連携される仕組みとなっています。

記事タイトルの設定

CTR記事のタイトルを設定します。このタイトル欄の名称がCTRブロック連携の際に表示されます。

タグ入力

「タグ入力」の箇所には

の「a href=""」リンクにて要素を囲む事で、そのリンクをクリックした際にCTR（クリック率など情報）の計測が可能となります。

ボタン設定

「ボタン設定」のエリアでは、事前に用意されたツール（ボタンの色や形の変更機能等）を使い、CTR専用のボタンを作成する事ができます。
「ボタンリンク先」と「ボタンテキスト」に値が保存されている場合、「タグ入力」欄に設定した内容は表示せず、
「ボタン設定」を優先して表示します。
「ボタンリンク先」にはボタンのリンクを設定します。
「ボタンテキスト」にはボタンのテキスト・文字列を設定します。

ボタンの主要な色設定

「ボタンテキスト色」ではボタンの文字色を設定できます。
「ボタン背景色」ではボタンの背景色を設定します。
「ボタン背景色グラデーション（開始）」と「ボタン背景色グラデーション（終了）」では、
グラデーションを作成します。開始と終了の色を設定する事でグラデーションの反映が可能となります。

リンク先の表示形式設定

リンク先の表示形式設定では、リンクをクリックした際に、ブラウザで同一タブで開く（現在のウィンドウに表示）か別タブで開く（新規のウィンドウに表示）かの設定が可能です。

ボタンの角丸サイズ設定

ボタンを角丸へ変更できます。数値には角丸の半径サイズを登録する事で、そのサイズへボタンが変化します。

ボタンのボーダー関連設定

ボタンにボーダー・線を設定する事ができます。
「ボタンのボーダー幅設定」では線の幅を設定します。
「ボタンのボーダー色設定」ではボーダー・線の色を設定します。

ボタンの余白関連設定

ボタンの余白を設定する事ができます。
「ボタン内側の余白」では上下中央の内側の余白を設定し、
「ボタン外側の余白」では上下中央の外側の余白を設定出来ます。

ボタン幅関連設定

「ボタン幅設定」「ボタン最大幅設定」

フォント関連設定

ボタンにフォント設定の変更が出来ます。
「フォント設定」では主に明朝体かゴシック体への選択が可能です。
「フォントのサイズ設定」でも文字サイズの設定が出来、
「フォントの太さ設定」では文字の太さの設定が可能です。

ボタン横に矢印設定

「ボタン横に矢印設定」ではボタンに矢印の設定が可能となります。

マウスオーバー時のボタン不透明度設定

「マウスオーバー時のボタン不透明度設定」ではボタンをマウスのポインターで触れた際（マウスホバー時）に不透明度を変化させる設定が可能です。
1が100%であり、0.5の場合50%の不透明度となります。

ボタンのCSS設定（上級者向け）

このエリアでは作成したボタン専用のCSSを設定する事が可能です。
この箇所はCSSに関して独自にカスタマイズしたい場合におすすめできる設定欄となります。

CTR記事一覧画面

「管理画面」>「isotype」>「CTRタグ」よりCTR記事の一覧画面にアクセスできます。
CTR記事一覧画面では、
「ショートコード」「クリック数 / 表示回数」「表示回数 / PV数」「計測リセット」の項目が存在します。
「ショートコード」では、任意の場所に、ショートコードを設定する事で、ブロックを作らずにCTRタグとして表示させる事ができます。

「クリック数 / 表示回数」「表示回数 / PV数」の項目ではその名称の通りのデータを表示させています。

「計測リセット」の箇所では「 Reset」ボタンをクリックする事で、その記事のCTR情報を初期化し無くする事が可能です。
最初から改めて計測したい場合などにおすすめの機能です。

CTR情報テーブル画面

作成した記事とCTRブロック表示との連携後、正常な計測が行われた場合、各項目に数値が保存されて行きます。
項目には主に「CTR（クリック率）」「CT（クリック数）」「PV（PV数）」「imps（表示回数）」となります。
「CTR（クリック率）」ではそのCTRタグをクリックした際の確率を表します。
「CT（クリック数」ではそのボタンのクリック数を表示します。
「PV（PV数）」ではそのボタンが存在したページにおいて何回アクセスがあったかを集計し表示しています。
「imps（表示回数）」ではタグが表示された回数を表します。同じidのボタンが複数存在する場合に数値も比例して変化します。

ABテスト

表示例

※ページを更新する度に、AブロックまたはBブロック入力エリアの内容を規則性無くランダムでどちらか一方（AまたはB）を表示します。

設定方法

ABテストブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「ABテスト」と記載のアイコンをクリックする事で導入ができます。

AまたはBブロック内へ記述

表示の為にはAまたはBブロックへ内容を記述する事で、AとBどちらか一方をランダムで表示させる事ができます。
ページの更新毎にどちらかに切り替わります。

イベントカウントダウン

表示例

設定方法

イベントカウントダウンブロックの導入

編集画面の「＋・プラス」ボタンから「ISOTYPE」カテゴリー内の「イベントカウントダウン」と記載のアイコンをクリックする事で導入ができます。

イベントカウントダウンの初期設定

カウントダウンの初期設定には各項目へ値を設定します。
「タイトル」「カウントダウン前テキスト」「カウントダウン後テキスト」「日付」の項目があり、
「タイトル」はイベントのタイトル名を入力します。
「カウントダウン前テキスト」「カウントダウン後テキスト」はカウントダウンの前後に文字列を表示したい場合に入力します。
「日付」にはカウントダウンの終了日時を設定します。

カウントダウン外観の設定

カウントダウンの外観の変更が可能です。
「外観」の項目に「デフォルト」「デジタル」「フリップ式」の3種が存在し、お好みの外観に設定が可能となります。

「前後テキスト位置」の項目は時間の前後に表示するテキストの位置の設定が可能です。上下、左右への変更ができます。

「タイトル位置」の項目はイベントタイトルの位置を上か下に変更ができます。

「時間表示単位」の項目は和文か英文の変更ができます。

「時間の改行設定」の項目はスマートフォンサイズの際に時間を改行するか選択する事ができます。

その他、カウントダウンの背景色や文字色の設定も可能であり、設定の組み合わせ次第で、ご希望のカウントダウンのデザイン設定が可能となっています。

カウントダウン終了時の設定

カウントダウン終了の際の効果を「終了後の動作」から設定する事ができます。
「テキスト表示」「リダイレクト」があり、この2つからの選択が可能です。

「テキスト表示」を設定した場合、「表示テキスト」で設定した文字列を終了時に表示します。
「リダイレクト」を設定した場合、「リダイレクト先」に設定したURLリンクへリダイレクトさせます。