Simplicityの特徴

WordPressテーマ「Simplicity」を作成しました。

Simplicityには主に、以下の7つの特徴があります。

  1. シンプル
  2. 内部SEO施策済み
  3. 拡散のための仕掛けが施されている
  4. 端末に合わせた4つのレスポンシブスタイル
  5. 手軽に収益化
  6. ブログの主役はあくまで本文
  7. カスタマイズがしやすい

以下で詳しく説明します。

シンプル

Simplicityは、とにかくシンプルなWordpressテーマを作ろうという考えの下作成しました。

テーマの名前「Simplicity」には以下の意味があります。

  • 単純
  • 簡単
  • 容易
  • 簡素
  • 質素
  • 飾り気のない

よく言えばシンプル、悪く言えば地味なテーマです。

余分な飾り気をすべて取り除き、ユーザーが自ら自由なスタイルで後からカスタマイズしやすい土台となるように考えて作りました。

もちろんそのままでも十分使用できます。

検索エンジンへの最適化(SEO)

最高のSEOはコンテンツの充実です。そして、自然な被リンクをもらうこと。これにはどんなSEO施策もかないません。

ただ、同じ質のコンテンツなら多少なりとも、内部SEOによって検索エンジン上位表示されるようにSimplicityを作成しました。

主に以下のような内部SEOをしています。

  • デフォルト状態でW3CのHTML5バリデーションのエラー0
  • タイトルや見出しなど適切なHTML構造に
  • 分割ページにrel=”next”/”prev”タグの追加して順番を伝える
  • リッチスニペットを用いたパンくずリストによりサイト構造を適切に伝える
  • TIMEタグを用いて記事の更新時間を検索エンジンに正確に伝える
  • メタディスクリプション記入欄(抜粋)の設置 
  • テーマに使っている画像などはできる限り圧縮して転送サイズを減らす
  • hentryのマークアップに対応
  • ウェブマスターツールの構造化エラー0
  • Googleのモバイルフレンドリーテストに合格
  • PageSpeed Insightsのモバイルユーザエクスペリエンスが100点

実際に行っている事のいくつかは、以前詳しく記事に書きました。

Simplicityが内部SEO施策で行っている7つのこと
Simplicityは、SEO(検索エンジン最適化)を常に考えながら作成しています。 SEOに関しては独学ではあるものの、自分のサイトでも...

拡散のための仕掛けが施されている

今や、ブログには必要不可欠となったSNSのための設定が施されています。

SNSボタンとSNSページボタン

拡散用のボタンがデフォルトで設置されています。

また、Wordpress管理画面上のから簡単な設定を行えば、SNSページ用のボタンも簡単に設定できます。

SNSシェアボタンソーシャル独自ボタン
SNSシェアボタンソーシャル独自ボタン

シェアカウントをJavaScriptで非同期で取得するため、ページ表示スピードがアップする独自シェアボタンも2種類用意してあります。

SNSシェアボタンテーマカラータイプ
SNSシェアボタンテーマカラータイプ

SNSシェアボタンTwitterタイプ
SNSシェアボタンTwitterタイプ

また、非同期で取得するバイラルタイプのシェアボタンも2種類用意してあります。

バイラルシェアボタンテーマカラータイプ
バイラルシェアボタンテーマカラータイプ

バイラルシェアボタン白タイプ
バイラルシェアボタン白タイプ

スマホデフォルトでは以下のように表示されるようになっています。

スマホ用シェアボタン
スマホ用シェアボタン

Facebook OGPのタグがデフォルトで挿入

ブログの記事をソーシャルグラフに流すための規格のOGP情報が、プラグインを必要とせずデフォルトで挿入されます。

Facebook OGP情報
Facebook OGP情報

Twitter Cardsのタグがデフォルトで挿入

Twitterのつぶやきに、ページ説明が付加されるTwitter Cards情報をプラグインを必要とせずデフォルトで挿入されます。

Twitter Cards情報
Twitter Cards情報

どのようなタグが挿入されるかは、当サイトのソースをご覧ください。

「SNSの設定」カスタマイズについての解説
Simplicityでは、テーマをインストールしたその瞬間からSNS拡散ボタンが設置されています。 そしてWordpress管理画面の...

PCとスマホ合わせて4つのスタイル

Simplicityは、パソコンとモバイル(スマホ、タブレット端末)に対応しています。

そして、パソコンとモバイルそれぞれに2つのレスポンシブスタイルがあり計4つのスタイルがあります。(広告が極力訪問者の邪魔にならないようにしつつも、高パフォーマンスを目指すSimplicityの広告配置では、完全なレスポンシブにすると、広告の表示が最適化されないので、広告の見せ方に合わせた4つのスタイルになっています。)

完全レスポンシブ機能追加により、完全なレスポンシブデザインで利用することもできます。

それぞれについて説明すると以下のようになります。

パソコン(高解像度)

解像度の高いデスクトップPCやノートで適用されるスタイルです。解像度の幅は、1150px以上を想定してスタイルしてあります。

パソコン(低解像度)

解像度のの低いノートパソコンなどで適用されるスタイルです。解像度の幅は、680~1150pxを想定してスタイルしてあります。

モバイル(高解像度:タブレットなど)

比較的解像度の高いスマホやタブレットで適用されるスタイルです。解像度の幅、640px以上を想定してスタイルしてあります。

モバイル(低解像度:スマホなど)

縦向き。

横向き。

解像度の低い旧スマホなどで適用されるスタイルです。解像度の幅は、320~640px未満を想定してスタイルしてあります。

Simplicityは、これからさらに増えるであろうスマホユーザーにも読みやすいように、スマホなどでの使いやすさも考えて作成しました。その結果デフォルトの状態で、Googleサイト診断ツール「PageSpeed Insights」のモバイルサイトのユーザーエクスペリエンス診断(簡単に説明するとモバイルでの使い勝手診断)結果が100点満点中100点になっています。

ユーザーエクスペリエンスについての詳細は、海外SEO情報ブログ記事に詳しく書かれています。

簡単に収益化

AdSense広告のレクタングル大(336×280px)とレクタングル中(300×250px)2つのタグを広告用ウイジェットに貼り付ければ、収益性の高い位置に広告が表示されます。

デフォルトの広告位置は、パソコンだと記事下×2、関連記事下×1になります。

デフォルトのパソコン広告配置
デフォルトのパソコン広告配置

モバイルだと、記事下×1、関連記事下×1になります。

デフォルトのスマホ広告配置
デフォルトのスマホ広告配置

Simplicityでは、Wordpress管理画面の「テーマカスタマイズ」からさらに収益性の高い広告位置を選択することもできます。

テーマカスタマイズ画面から本文中広告を選択すれば、パソコンだと次のような広告位置になります。本文中(最初のH2見出し前)×1、記事下×2になります。

パソコン本文中広告の配置
パソコン本文中広告の配置

モバイルだと、本文中(最初のH2見出し前)×1、記事下×1、関連記事下×1になります。

スマホ本文中広告の配置
スマホ本文中広告の配置

僕自身が自分のブログで実践した広告テスト結果だと、本文中に広告を掲載する方がパフォーマンスは上がります。けれど、本文中広告に抵抗のある方もおられると思うので、デフォルトでは本文中に広告を掲載しない設定になっています。(パフォーマンスが悪かった時も管理画面から簡単に戻せます。)

追記(2014/8/5):広告位置を「サイドバートップ」にする機能も追加しました。

Simplicityの広告位置(サイドバートップ)
Simplicityの広告位置(サイドバートップ)

※設定画面からさらにパフォーマンスを追求した広告表示にすることもできます。

Simplicityテーマ内にGoogle AdSense広告を貼り付ける方法
Simplicityでは、Google AdSenseの「レクタングル(大)」と「レクタングル(中)」の二つの広告を貼り付けるだけで、パソ...
「広告の設定」カスタマイズについての解説
Simplicityでは、広告の表示や位置などの設定を行うことができます。 広告の貼り付け方の設定は以下の記事を参照してください。 ...

ブログの主役は本文記事

ブログの主役は本文記事です。

ですので、本文記事が読みやすいよう、記事中の画像が読者に見やすいように作りました。

具体的には、以下のようなデザインになっています。

  • 訪問者が文章を読みやすいように、余裕を持った余白
  • テーマより主役のコンテンツが目立つように
  • ビッグイメージイズベター

最後の「ビッグイメージイズベター」というのは、適度な大きさの画像がデフォルトで表示されていた方が、訪問者に優しいという個人的な考えからです。訪問者が、わざわざ「クリックして拡大」などの動作をしなくても、スクロールするだけで中身が理解できる、大きな画像が表示出来た方が、訪問者にとって使い勝手が良いと思います。

そのためにメインカラムの幅を大きく取ってあります。(広告を2つ並べるためでもある)

画像を大きく見せるためにお勧めな画像のサイズ設定は以下を参照してください。

Simplicityでお勧めなメディアのサムネイルサイズ設定
Simplicityをインストールしたデフォルトの状態でお勧めなメディアの画像(サムネイル)サイズです。 僕は、以下のように設定してい...

(※画像を大きくすると、もちろん転送サイズは多少増えますが、それを超える利点が訪問者にあると思います。)

他の記事を紹介しやすいようにブログカード機能なんてのもあります。

Simplicityのブログカードの使い方と注意点
Simplicityには、サイト内にある投稿・固定ページへのリンクをブログカード化できる機能が標準で備わっています。 ただ、フォーラムで使...

↑これがブログカードです。

また、デフォルトで文章の装飾でよく利用するスタイルが用意されています。

Simplicityの基本的な文章装飾スタイルを使う方法まとめ
Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。 以下では、それら拡張...

カスタマイズがしやすい

冒頭にも書きましたが、Simplicityは後からスタイルシートで自由にカスタマイズできるように作成しました。

なるべく余計な装飾は省いてスタイルしてあるので、後からユーザー好みの色をつけていくなんてこともできると思います。

ですので、ダウンロードでは、すぐにスタイルシートでカスタマイズできるように子テーマも配布しています。テーマ改造では、テーマファイルのカスタマイズに役立つ情報も紹介しています。

Simplicityの子テーマをインストールする方法
Simplicityは、そのままでも利用できますが、カスタマイズを念頭に置いて作成したWordpressテーマです。 子テーマを作成してス...

管理画面からカスタマイズ

スタイルシートを編集ができない方のためにも、Wordpress管理画面からヘッダー画像を設定してブログのシンボルとできるようにもしてあります。

また、Wordpressに慣れてない人でも簡単にできるよう、Wordpressの管理仮面から、広告やSNS拡散ボタン、SNSページボタン、Google Analytics、ウェブマスターツールタグの設置ができるようになっています。

これまでは、テーマファイルの編集やプラグインを導入しなければならなかった設定も手軽に行うことができます。

ですので、ぜひ初めてWordpressを使うという方にも使っていただきたいテーマです。

スキン機能でスタイル変更

管理画面からカスタマイズせずとも、Wordpress初心者が手軽にデザインを変更できるように、スキン機能も実装されています。

スキンを選択するだけで、以下のように手軽に外観を変更することができます。

深紅きなり
深紅きなり
淡桜
淡桜

瑠璃紺きなり
瑠璃紺きなり
シック
シック

スキンは今後も増やしていければと思います。

スキンの詳しい仕様は以下になります。

Simplicityのスキン機能の仕様
Simplicity20140907からスキン機能を追加しました。 テーマ、子テーマ自体がスキン機能みたいなもんなのですが、ウイジェットや...

テーマファイルをカスタマイズ

もちろん、バリバリカスタマイズする人のためにソースコードもなるべくシンプルにしたつもりです。Ruby on RailsのDRY「Don’t repeat yourself(同じ記述を繰り返さない)」とまでにはいかないのですが、なるべく重複するコードを1ヶ所にまとめてテンプレート化しています。

テンプレート構造については以下。

Simplicityテーマのファイル構造について説明
Simplicityのファイル構造について説明します。 僕は、Ruby on Railsの設計理念の1つDRY(Don’t Repeat ...

ダウンロード

Simplicityは、ダウンロードページからダウンロードできます。

Simplicity2のダウンロード
無料WordpressテーマSimplicity2のダウンロードはこちらです。 テーマのアップデート方法は、以下を参照してください。 S...