実際に使って感じたブランクテーマBonesの良い点と気になる点まとめ

アイキャッチ画像(wordpress-theme-bones)

WorePressのテーマって、有料無料を問わずおしゃれなものが沢山ありますよね。このサイトではBones(公式サイト)という無料テーマをカスタマイズして使っています。Bonesというのはブランクテーマ(カスタマイズを前提にシンプルに作られたテーマ)の1つで、CSSやPHPをほぼまっさらな状態から組み上げていくことで自分だけのテーマを創ることができます。インストールしたままの状態でも使えないことはないのですが、21世紀前半のネットのような見た目になっています笑

この記事では私が実際にBonesを使って感じた良い点、気になる点をご紹介します。

※デザインに自信がないという方はこちらの記事をどうぞ。


ブランクテーマの選び方

ブランクテーマにはBonesの他にもUnderscoreやRootsなど、様々な有名どころが存在します。その中から自分に最も適したブランクテーマを選ぶためには、テーマを骨組み装飾の2つの面から見るのが重要です。

骨組みというのは、要はサイトの見た目の作りです。世の中のブログサイトのほとんどは、以下のような作りになっています。この骨組みはブランクテーマ毎にある程度決まっているため、自分が作りたいサイトにあった形のものを選びます。モバイルファーストの観点から言うと、レスポンシブ対応であるかは要チェックですね。

ブログの一般的な骨組み

装飾というのは、色やアクションのことです。世の中のウェブサイトが多種多様に見えるのは決して骨組みのおかげではなく、装飾が多様であるからこそと言えます。装飾に関してブランクテーマでは、まっさらであることが多いです。しかしCSSファイルの切り分けにテーマの個性が現れています。

サイトデザイン=個性

これらを踏まえた上で、全く新しい骨組みを創りたい、骨組みは普通でいいけど装飾は個性的にしたいといった自分の希望と、CSSの切り分けは使いやすいかなどテーマの使いやすさを総合すると、選ぶべきブランクテーマがある程度絞れます。

骨組みで選ぶブランクテーマ

私はヘッダー・コンテンツ・サイドバー・フッターという基本的な骨組みで装飾だけに手を入れたいと思っていたことと、後述するSCSSの切り分けが気に入ったことからBonesを選択しました。

Bonesの良い点

Bones

好んでBonesを使っている以上、私が良いと思う点は非常に多いです。そこで大まかに3つ、誰にでも胸を張って良いと言える点だけピックアップしてご紹介します。

(1)最低限の機能は備わっている

ブランクテーマを使うのは、当然自由なカスタマイズがしたいからです。でも自由すぎるのは面倒で困ってしまう……という私には、最低限の骨組みが備わっているのは本当にありがたいです。料理で例えると、私は外食ではなく自炊がしたいだけで、何も食材を1から育て収穫するところまではさすがに手を出したくはないのです!

先ほど述べた通りヘッダー・コンテンツ・サイドバー・フッターがデフォルトでついているため、ウィジェットやメニューの追加などはWordPressの管理画面からコードをいじることなく行えます。そのため普通のテーマと同じ感覚でプラグインをどんどん追加していくことができます。

そもそもサイトの全てをコード直打ちで作るのであれば、テーマを0から自分で作り上げるのと変わらないので、ブランクテーマすら使う必要はないんですよね。がちがちのDIYではなく、GUIでカスタマイズが可能な要素も多く残してくれている「ゆるさ」はとても心地よいです。

また最初からレスポンシブ(デフォルトで5サイズ)に対応している点も便利です。

(2)SCSSの切り分けが便利

Bonesでは直接CSSを記述する必要はありません。代わりにSCSSという「CSSを書き出すためのメタ言語」を用いてデザインを記述していきます。詳細は省きますが、CSSをより使いやすく改良したもの(しかもファイルサイズを軽くできる)とお考え下さい。

CSSであれSCSSであれ、記述する際はファイルを分割するのが基本です。ただファイルの分割の仕方を具体的にどうすれば良いのか、というのは初心者にとっては大きな問題です。その点Bonesは変数宣言用のvariable.scssやフォント用のtypography.scss、そしてボタンデザイン用の_buttons.scssなど、分かりやすい名前と共にあらかじめSCSSファイルを分割してくれているのです。これを見れば初心者の方でも、どこに何の設定を書けば良いのかが一目でわかります。

(3)ユーモア(説明)が豊富

Bonesはファイル名だけでなく、ファイルの中でも分かりやすさに配慮してくれています。例えば一見名前だけでは良く分からない_2x.scssの冒頭にはこのようにコメントがかかれています。

Stylesheet: Retina Screens & Devices Stylesheet

When handling retina screens you need to make adjustments, especially if you're not using font icons. Here you can add them in one neat place.

_2x.scss

このようにコメントを見ると、_2x.scssにはRetinaディスプレイ用の設定を記述すればよいことが分かります。

他にもテーマの作者が随所随所に注意点を残してくれているのですが、その口調というのが説明調というより会話調で、読んでいるだけでも楽しめます。例えばBonesのstyle.cssというファイル(通常はWordPressで構築したサイトでデザインの大本となるCSSファイル)のコメントはこのような感じです。

You may be thinking…

WHOA, WHOA, WHOA…WHAT HAPPENED HERE?

style.css

実はこのstyle.cssには何も中身がないのです! 上の英文は「あんた…『ここ、こ、こ…このファイルどうしちゃったんだ?』と思っているだろう?」と言っています。他にもコメントを良く見てみると、構文の説明があるのかと思いきや「左の記述はいらない。」とか「ここを有効化してもいいけど、サイトは使いにくくなるぞ。ちなみに私はそういうサイトの作り方をする奴は嫌いだ。」とか、ちょくちょく謎のユーモアを挟んできます笑

このようにBonesという素っ気ない名前とは裏腹に、人間味豊かなテーマとなっております。


Bonesの気になる点

私自身はBonesを気に入っているので、気に入らない点というのは特にありません。しかし「少し使いづらいかもしれない…」という点がなくはないというのが本音です。ここでは2つほどご紹介しますね。

(1)管理画面からインストールできない

これは大した問題ではないのですが、Bonesは管理画面から追加することができません。私が初めてWordPressをいじったとき、てっきりBonesも他のテーマと同じように追加できるかと思っていたのですが、公式サイトからダウンロードしなければならなかったようです。

公式サイトからダウンロードした後は、FTPクライアントで他のテーマと同じ場所にファイル毎アップロードするだけでOKです。手順としては全く手間ではありませんが、盲点としてお伝えしておきます。

(2)Breakpointの表記がわかりづらい

Breakpointとは、適用されるCSSが変更される画面サイズ(横幅)のことです。画面サイズに応じて適用するCSSを変更することで、端末に合わせた画面表示が(つまりレスポンシブ)可能になります。

BonesではBreakpointとして、481px・768px・1030px・1240pxがデフォルトで設けられています。特定の画面サイズでのみ適用したいCSSがある場合、適切なファイルにSCSSを記述する必要があるのですが……初めてだと少し分かりにくいかもしれないです。図でお示ししますね。

Breakpointsとscssファイル

このように_base.scss(画面サイズが0px以上)が最初に読み込まれ、画面サイズが大きくなるにつれて追加のSCSSに記載された内容で上書きしていくという仕組みになっています。

レスポンシブデザインに慣れていないと最初にパソコン用の画面(1030px以上)を作ってしまいがちですが、画面サイズに関わらず機能させたいデザインについてまで_1030up.scssに記述してしまうと、後で_base.scssに転記する手間が生じますし、余計なコードが残留してしまうかもしれません。実際にBonesを使う際は、必ず_base.scssでスマホ用のデザインから作るようにして下さい。

まとめ

以上、ブランクテーマBonesの私が思う良い点、気になる点をご紹介しました! 下に書いた内容に当てはまる方はぜひBonesを試してみてください。

こんな人におすすめ!

ブランクテーマを試したいけど、面倒なのは嫌だ!

カスタマイズする時に説明が欲しい!

いざBonesを使う場合はWordPressのテーマエディタからファイルを1つ1つ編集しても良いのですが、私はAtomというテキストエディタでリモートのファイルを直接編集しています。後日Atomの設定についての記事も書こうと思っているので、またお読みくださると幸いです。

ここまでお読みくださりまして、ありがとうございました。