Readable(リーダブル)の始め方【isotypeテーマ】

※この記事は「2022年7月21日」に更新しました。

Readable(リーダブル)の始め方について。

  • Readable で WordPressブログを始めたい
  • インターネット上の情報が少なくて悩んでいる

上記のような方に向けて、解説します。

Readable は、着眼点(フォントにこだわりがある点)が素晴らしく、デザイン性に優れたテーマです。

しかし、ユーザー数がまだそこまで多くないです(新しいテーマ)。

ネット上に情報がほとんどありませんでした。

そこで、WordPress歴 10年の管理人が Readable を使って、ブログを始める方法を解説します。

タカフミ
記事を書いている管理人の経歴は、以下の通りです。
  • 基本情報技術者資格所有者(ソフト開発の国家資格)
  • WordPress歴、約10年
  • パソコン販売歴、約5年

Readable(リーダブル)とは

Readable(リーダブル) とは、isotype が提供する WordPress(ワードプレス)テーマです。

日本語タイポグラフィにこだわっているのが最大の特徴。

タイポグラフィとは、文字をデザインすること。

ブログの情報がほとんど文字であることから、この考え方は納得させられます。

  • 軽量化された 33種類の Webフォントが使える
  • 文字同士の行間、余白が簡単に設定できる
  • 主張しすぎないデザイン

上記の点が優れています。

タカフミ
Readable は、ブログに特化して開発されたテーマです。

Gutenberg エディタ(ブロックエディタ)にも完全対応しているので、WordPress初心者も使える有料テーマです。

Readable の始め方

Readable(リーダブル)で WordPressブログを始める方法です。

WordPress をインストールしていないという方は、下記記事をご参照下さい。

WordPressブログの始め方

WordPressブログの始め方【初心者向け】

2020年2月16日

インストールが終わって、初期設定が終わっている方は、以下の手順でテーマ(Readable)を使えるようにします。

  1. 親テーマをインストールする
  2. 子テーマをインストールする(カスタムする場合)
  3. 必要なプラグインをインストールする
  4. 推奨プラグインをインストールする
タカフミ
順番に解説していきます。

親テーマをインストールする

isotype公式サイト で購入したテーマファイル(zipファイル)をインストールします。

外観 → テーマ → 新規追加

テーマのアップロード をクリックします。

テーマのアップロード

公式サイトからダウンロードした zipファイルをアップロードして、インストールを完了させます。

インストールが終わったら、有効化 をクリックします。

子テーマをインストールする(カスタムする場合)

もし、テーマファイルをカスタムしたい人は、子テーマをインストールすることをおすすめします。

WordPress が公式で推奨しているカスタマイズ方法です。

詳しく知りたい方は、以下の記事をご参照下さい。

WordPress で子テーマを作成する方法

WordPress で子テーマを作成する方法【カスタム】

2021年11月24日

必要なプラグインをインストールする

必要なプラグインをインストールします。

  • all in one seo pack
  • wordpress popular posts

all in one seo pack は、記事ごとにタイトルやメタディスクリプションを設定できるようになる、SEO対策系プラグインです。

wordpress popular posts は、人気記事をランキング形式で表示できるプラグインです。

推奨プラグインをインストールする

タカフミ
推奨プラグインをインストールします。
  • Contact Form 7
  • amp
  • autoptimize
  • ewww image optimizer
  • rocket lazy load
  • sns count cache
  • www xml sitemap generator org

一見多いとおもうかもしれませんが、必要ない場合はインストールしなくても問題ありません。

個人的には、www xml sitemap generator org と Contact Form 7(お問い合わせフォームが必要ない方は不要)だけでも良いと思いました。

表示速度が気になる方は、autoptimize、ewww image optimizer、rocket lazy load も検討しましょう(Webフォントにこだわったテーマなので、インストールした方が良いかも)。

Readable のデザインを完成させる

Readable(リーダブル)のデザイン完成を目指します。

isotype公式サイト にアクセスします。

設定マニュアル → デモサイト再現設定

上記のような項目があるので、下の方にある Readable 01 のデモサイト再現設定を参考にしました。

タカフミ
先にどんな感じのサイトが仕上がるか紹介しておきます。
Readable(リーダブル)デモサイト

余談ですが、私は、デフォルトであった固定ページ(会社概要、問い合わせなど)を全てゴミ箱へ移動してから作業しました。

バージョンによって異なるかもしれませんが、必要なければ削除しましょう。

  • サイト基本情報の設定
  • Webフォント設定
  • プロフィール設定
  • メニュー設定
  • ウィジェット設定
  • 記事スライダーの表示設定
  • ヘッダー下帯エリアの設定
  • SNS設定

それぞれ解説していきます。

サイト基本情報の設定

isotypeデザイン → デザイン設定 → サイト基本情報

サイトのタイトル、キャッチフレーズを設定します。

Webフォント設定

Readable 最大のこだわりである、Webフォント設定です。

isotypeデザイン → デザイン設定 → フォント設定 → Webフォント設定

軽量化された 33種類の Webフォントが使えるので、迷う方も多いかと思います。

デモサイト再現設定を参考に設定しました。

Webフォント設定

プロフィール設定

プロフィールを作成します。

ユーザー → プロフィール

設定する項目は、以下の通りです。

  • プロフィール情報
  • プロフィール画像URL

プロフィール画像は、メディア → 新規追加 から画像をアップロードして、画像の URL をコピーして設定します。

推奨サイズは、240px × 240px です。

メニュー設定

メニューを作成します。

デフォルトとして設定されているものは削除します。

グローバルメニューとフッターメニューを違う内容にしたい方は、それぞれメニューを作成します。

ウィジェット設定

ウィジェットを設定します。

デフォルトとして設定されているものは削除します。

記事スライダーの表示設定

記事スライダーの表示設定をします。

記事スライダーの表示設定
isotypeデザイン → デザイン設定 → ファーストビュー設定 → 記事スライダー設定

記事スライダーの表示設定 にチェックを入れ、記事スライダーのデザインを設定の項目は、スライダー小 を選択します。

記事数があまりにも少ないと見た目がスカスカになるので、記事数が増えてから設定しても問題ありません。

ヘッダー下帯エリアの設定

ヘッダー下帯エリアに表示させる、お知らせ内容を設定します。

ヘッダー下帯エリアの設定
isotypeデザイン → デザイン設定 → ヘッダー

ヘッダー下帯エリア入力欄、ヘッダー下帯エリア内のテキスト、ヘッダー下帯エリア内ボタンのリンク先などを設定します。

ヘッダー下帯エリアの設定

注目して欲しいページがまだない場合は設定しなくても問題ありません。

SNS設定

Twitter など、SNS の設定をやっていきます。

isotypeデザイン → デザイン設定 → SNS設定 → アカウントURL

自分が利用している SNS の URL を入力すると、ブログ内の SNS アイコンに反映されます。

続いて、フォローカードの設定です。

フォローカードの設定
isotypeデザイン → デザイン設定 → SNS設定 → フォローカード

フォローカードのメインテキスト、ボタン上のテキスト を入力します。

Readable その他設定

Readable のデザインが完成したら、メタタグ、Googleアナリティクス、OGP などの設定をします。

isotypeデザイン → その他設定

メタタグ(トップページタイトル、トップディスクリプション)が設定されていない場合は、入力します。

Googleアナリティクスは、無料で使えるアクセス解析ツールです。

まだ使っていないという方は、下記の公式サイトでアカウントを作成することをおすすめします(Googleアカウントが必要)。

Googleアナリティクス
https://marketingplatform.google.com/about/analytics/

OGP設定は、Twitter でブログ記事を紹介するときに表示されるサムネイル画像などの設定を行うところです。

こちらも設定しておくことをおすすめします。

最後に

Readable(リーダブル)の始め方について、解説しました。

よくある声でプラグインが多いという意見があるのですが、推奨プラグインは強制ではありません。

SEO対策系プラグインが必要ではありますが、設定はそこまで難しくはありません。

今回は、最低限しか設定していないので、フォント関連(記事の行間、文字間隔、フォントサイズなど)にこだわれば、さらにデザイン性の高いブログに仕上がります。

デザインは、他の有名テーマと差別化できるので、これからブログを始める方は検討することをおすすめします。

\ 日本語タイポグラフィーにこだわった、国産テーマ! /