無料のWordpressテーマを作ってみました。
僕は、今年の1月からこのブログをしています。Wordpress歴は半年ちょっとですけど、Wordpressの使い勝手のよさに、ついつい楽しくなってしまいました。
で、まだまだ経験も浅い駆け出しのWordpressユーザーなりに、欲しいと思った機能なども盛り込んでテーマを作ってみたくなりました。
それで作ったテーマが「Simplicity」です。
目次
無料WordpressテーマSimplicityとは
Simplicityは名前の通り、とてもシンプルなテーマです。このブログも現在、Simplicityで運営しています。
とにかく飾り気がほとんどありません。そのままでも使えますが、ユーザーが思い通りにカスタマイズ出来るようにと作ったらこんな感じになりました。
Simplicityを作るにあたって
Simplicityを作る際に、設計思想というほどの大げさなものではないですが、以下のことを考慮しながら作りました。
- とにかくシンプルに
- パソコンでもスマホでもタブレットでも快適に閲覧できるように
- 内部SEOで少しでも有利になるように
- 手軽に拡散してもらえるように
- 手軽に収益化できるように
- 主役の本文が見やすいように
- カスタマイズしやすいように
以下でそれぞれについて詳しく説明します。
とにかくシンプルに
Simplicityは、よく言えばシンプル、悪く言えば地味なテーマです。
これは、自分がシンプルなものが好きというのが大きいですが、ユーザーがカスタマイズすることを念頭に置いて作ったということもあります。あと、デザイン能力がないともいいます。
様々な端末で快適に閲覧できるように
Simplicityは、パソコンとモバイル（スマホ、タブレット端末）に対応しています。
そして、パソコンとモバイルそれぞれに2つのレスポンシブスタイルがあり計4つのスタイルがあります。
それぞれについて説明すると以下のようになります。
パソコン（高解像度）
解像度の高いデスクトップPCやノートで適用されるスタイルです。解像度の幅は、1100px以上を想定してスタイルしてあります。
パソコン（低解像度）
解像度の低いノートパソコンなどで適用されるスタイルです。解像度の幅は、680～1100pxを想定してスタイルしてあります。
モバイル（高解像度：新しいスマホ、タブレットなど）
比較的解像度の高いスマホやタブレットで適用されるスタイルです。解像度の幅、640px以上を想定してスタイルしてあります。
モバイル（低解像度：旧スマホなど）
解像度の低い旧スマホなどで適用されるスタイルです。解像度の幅は、320～640px未満を想定してスタイルしてあります。
デフォルトの状態で、Googleサイト診断ツール「PageSpeed Insights」のモバイルサイトのユーザーエクスペリエンス診断（簡単に説明するとモバイルでの使い勝手診断）結果が100点満点中100点になっています。
内部SEOで少しでも有利になるように
ブログなどにとって最大のSEO対策はコンテンツの充実です。
どんなにSEO対策しようとも、コンテンツのよさにはかないません。
けれど、同質のコンテンツであれば少しでもSEO的に有利になるように以下のようなSEO対策を施しました。
- タイトルや見出しなど適切なHTML構造に
- アーカイブ、タグ、検索結果ページなどはNOINDEXに
- リッチスニペットを用いたパンくずリストにより検索エンジンとサイト構造を適切に伝える
- HTML5のTIMEタグを用いて記事の更新時間を検索エンジンに正確に伝える
- テーマに使っているJPEG、PNG画像は品質を維持しつつ圧縮（ロスレス圧縮）して転送サイズを減らす
手軽に拡散してもらえるように
今や、ブログのには必要不可欠となったSNSのための設定が施されています。
SNSボタンとSNSページボタン
拡散用のボタンがデフォルトで設置されています。
また、Wordpress管理画面上から簡単な設定を行えば、SNSページ用のボタンも簡単に設定できます。
吹き出しつきの拡散ボタンは、スマホでは表示が崩れることがあります。なのでスマホで見ればスマホ用のボタンスタイルが表示されるようになっています。
Facebook OGPのタグがデフォルトで挿入
ブログの記事をソーシャルメディアに流すための規格のOGP情報がプラグインを必要とせずデフォルトで挿入されます。
Twitter Cardsのタグがデフォルトで挿入
Twitterのつぶやきに、分りやすいページ説明が付加されるTwitter Cards情報をプラグインを必要とせずデフォルトで挿入されます。
詳しくは以下に書いてあります。
手軽に収益化できるように
AdSense広告のレクタングル大（336×280px）とレクタングル中（300×250px）2つのタグを広告用ウィジェットに貼り付ければ、収益性の高い位置に広告が表示されます。
デフォルトの広告位置は、パソコンだと記事下×2、関連記事下×1になります。
モバイルだと、記事下×1、関連記事下×1になります。
Simplicityでは、Wordpress管理画面の「テーマカスタマイズ」からさらに収益性の高い（とされる）広告位置を選択することもできます。
詳しくは以下に書いてあります。
主役の本文が見やすいように
ブログの主役は本文という事で、なるべく記事本文が目立つように作りました。
具体的には、以下のようなデザインになっています。
- 高解像度でも読みやすいように本分中文字サイズは少し大きめ
- 訪問者が読みやすいように、余裕を持った余白
- テーマは目立たず本文中コンテンツが目立つように
- なにもしなくても画像が見やすいようにメインカラムの幅を大きく
（広告を2つ並べるためでもある）
カスタマイズしやすいように
冒頭にも書きましたが、Simplicityは後からスタイルシートで自由にカスタマイズすることを念頭において作成しました。
ですので、ダウンロードでは、すぐにスタイルシートでカスタマイズできるように子テーマも配布しています。テーマ改造では、テーマファイルのカスタマイズに役立つ情報も紹介しています。
管理画面からカスタマイズ
スタイルシートを編集ができない方のためにも、Wordpress管理画面からヘッダー画像を設定してブログのシンボルとできるようにもしてあります。
また、Wordpressに慣れてない人でも簡単にできるよう、Wordpressの管理画面から、広告やSNS拡散ボタン、SNSページボタン、Google Analytics、ウェブマスターツールタグの設置ができるようになっています。
- Simplicityにヘッダー画像を追加・変更をする方法
- 「SNSの設定」カスタマイズについての解説
- Simplicityテーマ内にGoogle AdSense広告を貼り付ける方法
- 「広告の設定」カスタマイズについての解説
- 「アクセス解析」カスタマイズについての解説
- SimplicityカスタマイズメニューからGoogleウェブマスターツールの所有者確認をする方法
テーマファイルをカスタマイズ
もちろん、バリバリカスタマイズする人のためにソースコードもなるべくシンプルにしたつもりです。Ruby on RailsのDRY「Don’t repeat yourself（同じ記述を繰り返さない）」とまでにはいかないのですが、なるべく重複するコードを1ヶ所にまとめてテンプレート化しています。
こうすることで、どのファイルに何が書かれているか明確になり、コードの可読性も上がっているのではないかと思います。ファイル数は増えたけど。（※PHPプログラムは、ほとんどしたことがないので変な記述とかあるかも…。変なところがあったら直します。）
それぞれのファイルについては以下の記事に書いてあります。
まとめ
ちょっと長くなりましたが、こんな感じのテーマです。
ダウンロードページにファイルがあるのでよろしかったら試してみてください。
最後になりましたが、このテーマはWEBデザインレシピのテーマ作成記事で配布されている、「Simple Simple」というサンプルテーマを雛形として使用させていただきました。記事、サンプルテーマともども、とても参考にさせていただきました。
その他にSimplicityが参考にさせていただいた情報は、参考・技術情報に載っています。
なにかシンプルはないかとテーマを探していたところ、Simplicityにたどり着きました。
とにかくシンプルで使いやすい。それでいて、豊富なカスタマイズの方法を寝ログで紹介されている。
よほどのことがなければ、コメントはしないのですが、この気持ちを伝えたくて書き込みしました。
わいひらさんありがとう。