WordPressテーマ「SIMPLE」を作りました。
シンプルかつ多彩なデザインを兼ね備えた無料テーマです。
サイトとしての基本的な構造を保ちつつ、それでいて美しく多彩なデザインにできるように設計しました。
主な特徴を紹介していきます。
シンプルかつ多彩なデザイン
テーマの構造はシンプルに
サイト全体が見やすい、記事が読みやすい、構造がわかりやすいといった点を重視して制作したため、テーマの構造はシンプルなものになっています。
- ヘッダー
- 記事エリア
- サイドバー
- フッター
大まかな括りで分けると、テーマを構成するエリアはこの4つになります。
デザインは多彩に
構造はシンプルですが、デザインはカスタマイザーから変更できるよう多くの機能を盛り込みました。
これにより、読みやすさ、見やすさはそのままに、多彩で美しいデザインに仕上げることができます。
あらゆるデザインをカスタマイザーから変更可能
テーマ「SIMPLE」では、あらゆるデザインをカスタマイザーからワンクリックで変更できます。
- 背景色 → 39項目
- 文字色 → 37項目
- 余白 → 27項目
- ボーダースタイル → 33項目
- 各コンテンツの角丸め → 22項目
- 文字の配置 → 10項目
- ボックスシャドウ → 21項目
- アニメーション → 11項目
- 見出しデザイン → 18項目
- リストデザイン → 8項目
- ボックスデザイン → 17項目
- アイコンボックスデザイン → 29項目
- 見出しボックスデザイン → 23項目
- ボタンデザイン → 16項目
- 各コンテンツの表示非表示切り替え → 25項目
ここに関しては、かなり細かく設定できるようにしたので、変更できる項目はかなり多いです。
これは、実際にこのテーマを使う人が、自分の手で細部までデザインをカスタマイズできるようにしたいと考えたためです。
これだけ変更できる項目があれば、プログラミングの知識がなくても自分の手でサイトをカスタマイズしていくことができると思います。
また、上記以外にも
- 記事一覧ページのカラム変更
- ハンバーガーメニューのアイコンの追尾設定
- サイトロゴ画像の設定
- ヘッダーに画像を設定
- 背景に画像を設定
- フォントの変更
- アニメーションon/off切り替え
など、さまざまな機能を用意しています。
記事一覧ページのカラム変更
スマートフォン、PCの両方で記事一覧ページの表示を変更できます。
ヘッダーに画像を設定
ヘッダーに画像を設定できます。
背景に画像を設定
サイト全体の背景に画像を設定できます。
フォントの変更
サイト全体のフォントと、記事内文字のフォントを以下から選択できます。
- ヒラギノ角ゴ ProN
- ヒラギノ 明朝 ProN
- ヒラギノ角ゴ
- ヒラギノ角ゴ StdN
- ヒラギノ丸ゴ ProN
- メイリオ
- Meiryo UI
- 游ゴシック
- 游明朝体
- Yu Gothic UI
- MS ゴシック
- MS Pゴシック
- MS UIゴシック
- MS明朝
- MS P明朝
記事を彩るパーツを多数用意
記事を読みやすくするパーツを多数用意しました。
- 見出しデザイン → 5種
- リストデザイン → 4種
- ボックス → 6種
- アイコンボックス → 6種
- 見出しボックス → 6種
- ボタン → 6種
これ以外にも使えるパーツがいろいろあるので、紹介します。
吹き出し
ショートコードの挿入で、以下のような吹き出しを簡単につくれます。
内部リンク用ブログカード
ショートコードの挿入で、ブログカード型の内部リンクを簡単に設置できます。
マーカー(下部)
このように、文字の下部だけにマーカーを引くことができます。
自動生成される目次
見出しを配置した状態で目次のボタンを押すと、自動で目次が生成されます。スタイルもデフォルトで設定されており、カスタマイザーからデザインを変更できます。
見やすく、書きやすいエディター
テーマ「SIMPLE」では、デザインだけでなくエディターにも手を加え、より使いやすいものになるよう作り込みました。
グーテンベルク、クラシックの両方に対応
グーテンベルク、クラシックエディターの両方に対応しているので、どちらを使っても快適に記事の作成ができると思います。
グーテンベルクではオリジナルブロックを使用可能
ブロック選択から、ボックス、アイコンボックス、見出しボックス、ボタンを挿入できます。
クラシックエディターでは、よく使うパーツを編集メニューに登録済み
各種見出しやリスト、ショートコードやボックスなど、よく使うものを簡単に挿入できます。
各記事ごとにコンテンツの表示非表示を切り替えられる
各記事ごとに、コメントフォームや関連記事などのコンテンツの表示非表示を切り替えることができます。
切り替えできる項目は、以下の11項目です。
- カテゴリー
- 投稿日
- アイキャッチ画像
- タグ
- 上部SNSシェアボタン
- 下部SNSシェアボタン
- ぱんくずリスト
- コメント一覧&コメントフォーム
- 次の記事
- 前の記事
- 関連記事
例えば、
といった場合には、チェックボックスにチェックを入れるだけで簡単に非表示にできます。
再表示したい場合には、チェックボックスのチェックを外せば表示されます。
ビジュアルエディターにスタイルが設定されている
当テーマでは、ビジュアルエディター内の見出しやリストに、実際にサイト上に表示されるものと同じデザインが設定されているので、より直感的に記事の作成が行えます。
これにより、記事を編集するたびに毎回プレビューで表示を確認する必要がなくなるので、時間の節約にもつながると思います。
収益化を後押し
サイトやブログを運営する際、収益化についてはかなり悩むところだと思います。
そこで、当テーマではそんな悩みどころである収益化を強力にサポートする機能を盛り込んでおきました。
サイト内のあらゆる場所に広告を設置できる
h2見出しの上や、サイドバーの下など、サイト内のあらゆる場所に広告を表示することができます。
- サイドバー下
- サイドバー下PC用追尾広告
- ハンバーガーメニュー最上部
- ハンバーガーメニュー最下部
- 記事アイキャッチ下
- h2見出しの上
- 記事下
- 関連記事下
テキストウィジェットで広告を簡単設置
広告は、ウィジェットの編集画面で広告を表示したいウィジェットエリアにテキストウィジェットを追加し、広告のコードを貼り付けるだけでサイト上に表示されます。
アドセンス、アフィリエイトサイトから取得したコードなど、どんな広告でも一瞬で設定できます。
カエレバ・ヨメレバ・アプリーチはコードを貼り付けるだけ
Amazon・楽天の商品リンクや、アプリのリンクはそれぞれ、ヨメレバ・カエレバ、アプリーチで取得したコードを貼り付けるだけで簡単にリンクを作成できます。
アプリーチの表示例
ヨメレバの表示例
カエレバの表示例
SEOに配慮した設計
最近ではSEOよりもコンテンツの質が重要になってきていますが、当テーマではできる限りSEOを意識して設計し、上位表示の後押しができるように作り込みました。
モバイルファーストで作成
今後はスマートフォンからのアクセスがさらに加速するのは確実なので、当テーマはなるべくモバイルファーストを意識して作りました。
レスポンシブ対応
スマートフォン・タブレット・PCなど、どんな端末からアクセスしてもレイアウトが崩れることなく最適化されて表示されます。
構造化マークアップ実装済
構造化データも実装済みです。
最後に
ここまで読んでくださった方、ありがとうございます。
まだまだ経験、知識ともに不足しているところはありますが、これからもテーマ作りを続けてより使いやすいテーマにしていきたいと思います。
もし不具合、要望等ありましたらTwitterでもお問い合わせページでもコメントでもいいので、ご一報いただけると幸いです。
WordPressテーマは使う人と作る人が意見を共有して出来上がっていくものだと思うので、皆さんと一緒により良いテーマを作っていきたいなと考えています。
以上、ありがとうございました。
WordPressテーマ「SIMPLE」
「SIMPLE」は、シンプルなデザインと多彩な機能を兼ね備えたオリジナルWordPressテーマです。
