シンプル(地味)なWordPress無料テーマ「Simplicity」を作ってみました

Simplicity

無料のWordpressテーマを作ってみました。

僕は、今年の1月からこのブログをしています。Wordpress歴は半年ちょっとですけど、Wordpressの使い勝手のよさに、ついつい楽しくなってしまいました。

で、まだまだ経験も浅い駆け出しのWordpressユーザーなりに、欲しいと思った機能なども盛り込んでテーマを作ってみたくなりました。

それで作ったテーマが「Simplicity」です。

スポンサーリンク
レクタングル(大)広告

無料WordpressテーマSimplicityとは

Simplicityは名前の通り、とてもシンプルなテーマです。このブログも現在、Simplicityで運営しています。

Simplicity SEO最適化済みの無料Wordpressテーマ

とにかく飾り気がほとんどありません。そのままでも使えますが、ユーザーが思い通りにカスタマイズ出来るようにと作ったらこんな感じになりました。

Simplicityを作るにあたって

Simplicityを作る際に、設計思想というほどの大げさなものではないですが、以下のことを考慮しながら作りました。

  1. とにかくシンプルに
  2. パソコンでもスマホでもタブレットでも快適に閲覧できるように
  3. 内部SEOで少しでも有利になるように
  4. 手軽に拡散してもらえるように
  5. 手軽に収益化できるように
  6. 主役の本文が見やすいように
  7. カスタマイズしやすいように

以下でそれぞれについて詳しく説明します。

とにかくシンプルに

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

これは、自分がシンプルなものが好きというのが大きいですが、ユーザーがカスタマイズすることを念頭に置いて作ったということもあります。あと、デザイン能力がないともいいます。

様々な端末で快適に閲覧できるように

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

そして、パソコンとモバイルそれぞれに2つのレスポンシブスタイルがあり計4つのスタイルがあります。

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

パソコン(高解像度)

PC

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

パソコン(低解像度)

PC min

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

モバイル(高解像度:新しいスマホ、タブレットなど)

タブレット

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

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

スマホ

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

デフォルトの状態で、Googleサイト診断ツール「PageSpeed Insights」のモバイルサイトのユーザーエクスペリエンス診断(簡単に説明するとモバイルでの使い勝手診断)結果が100点満点中100点になっています。

PageSpeed Insightsユーザーエクスペリエンス

内部SEOで少しでも有利になるように

ブログなどにとって最大のSEO対策はコンテンツの充実です。

どんなにSEO対策しようとも、コンテンツのよさにはかないません。

けれど、同質のコンテンツであれば少しでもSEO的に有利になるように以下のようなSEO対策を施しました。

  • タイトルや見出しなど適切なHTML構造に
  • アーカイブ、タグ、検索結果ページなどはNOINDEXに
  • リッチスニペットを用いたパンくずリストにより検索エンジンとサイト構造を適切に伝える
  • HTML5のTIMEタグを用いて記事の更新時間を検索エンジンに正確に伝える
  • テーマに使っているJPEG、PNG画像は品質を維持しつつ圧縮(ロスレス圧縮)して転送サイズを減らす

手軽に拡散してもらえるように

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

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

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

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

SNSボタン

吹き出しつきの拡散ボタンは、スマホでは表示が崩れることがあります。なのでスマホで見ればスマホ用のボタンスタイルが表示されるようになっています。

SNSモバイルボタン

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

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

Facebook-OGP

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

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

Twitter-Cards

詳しくは以下に書いてあります。

「SNSの設定」カスタマイズについての解説

手軽に収益化できるように

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

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

パソコンの広告位置

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

モバイルの広告位置

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

詳しくは以下に書いてあります。

「広告の設定」カスタマイズについての解説

主役の本文が見やすいように

ブログの主役は本文という事で、なるべく記事本文が目立つように作りました。

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

  • 高解像度でも読みやすいように本分中文字サイズは少し大きめ
  • 訪問者が読みやすいように、余裕を持った余白
  • テーマは目立たず本文中コンテンツが目立つように
  • なにもしなくても画像が見やすいようにメインカラムの幅を大きく
    (広告を2つ並べるためでもある)

カスタマイズしやすいように

冒頭にも書きましたが、Simplicityは後からスタイルシートで自由にカスタマイズすることを念頭において作成しました。

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

Simplicityで子テーマをインストールする方法

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

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

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

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

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

こうすることで、どのファイルに何が書かれているか明確になり、コードの可読性も上がっているのではないかと思います。ファイル数は増えたけど。(※PHPプログラムは、ほとんどしたことがないので変な記述とかあるかも…。変なところがあったら直します。)

それぞれのファイルについては以下の記事に書いてあります。

Simplicityテーマのファイル構造について説明

まとめ

ちょっと長くなりましたが、こんな感じのテーマです。

ダウンロードページにファイルがあるのでよろしかったら試してみてください。

最後になりましたが、このテーマはWEBデザインレシピのテーマ作成記事で配布されている、「Simple Simple」というサンプルテーマを雛形として使用させていただきました。記事、サンプルテーマともども、とても参考にさせていただきました。

その他にSimplicityが参考にさせていただいた情報は、参考・技術情報に載っています。

『シンプル(地味)なWordPress無料テーマ「Simplicity」を作ってみました』へのコメント

  1. 名前:yu- 投稿日:2016/02/19(金) 22:32:32 ID:e952b2f47

    なにかシンプルはないかとテーマを探していたところ、Simplicityにたどり着きました。
    とにかくシンプルで使いやすい。それでいて、豊富なカスタマイズの方法を寝ログで紹介されている。
    よほどのことがなければ、コメントはしないのですが、この気持ちを伝えたくて書き込みしました。
    わいひらさんありがとう。

  2. アバター画像 名前:わいひら 投稿日:2016/02/20(土) 12:43:09 ID:2bc261813

    とにかくシンプルになるよう、なるべく余計な装飾は付けない(後からCSSで変更するのに邪魔なスタイルはつけない)ように作ったので、そう言っていただけると嬉しいです。

    寝ログでの、カスタマイズは、既にSimplicityで実装済みのものもあるので、カスタマイズをしたら、関数の重複などでエラーが出るものがあるかもしれません。
    そういった場合は、カスタマイズを元に戻して、Simplicity機能などを探してみてください。

    書き込みありがとうございます。