WordPressでオリジナルテーマを作ってみようという方に、是非とも試してもらいたい「Bones」という無料のテーマがあります。
デフォルトでレスポンシブ対応にもなっており、名前の通りにほとんどその骨組みだけの構造になっているので、余計な要素がなく、カスタマイズしやすいのが特徴。
今回は、その「Bones」の導入方法を簡単にご紹介します。
それではまず、公式サイトからファイルをダウンロードしてください。
Bonesをダウンロード
緑のボタン「Download for Free」からダウンロードできます。
zipファイルを解凍してみると、「eddiemachado-bones-9db85e4」という名前のフォルダがあります。この名前は、もしかしたら別の名前になっているかもしれませんが、同じような別名になっていると思いますので確認してみてください。
そしてこのままだとよくわからない名前になってしまうので、わかりやすい名前に変更してしまいましょう。今回は「originaltheme」という名前に変更したと仮定して進めていきます。
テーマフォルダをアップロード
名前を変更した「originaltheme」というフォルダを[wp-content]→[themes]フォルダの中にアプロードしてください。
するとWordPressのダッシュボードから[外観]→[テーマ]を開くと、一覧の中に「Bones(Rename Me!)」という新しいテーマが追加されていますので「有効化」しましょう。
テーマのCSSを書き換える
アップロードしたフォルダが「originaltheme」であるのに、管理画面上では「Bones(Rename Me!)」になってしまっているので、先ほどアップロードした「originaltheme」の中にある「style.css」を修正します。
style.css
style.cssの先頭に記述されている「Theme Name:～」を自分で付けた名前に変更します。
|
1 |
Theme Name: Bones (Rename Me!) |
この後ろの部分を、
|
1 |
Theme Name: originaltheme |
このように変更すればOKです。
そして、もう一度[テーマ]の一覧を確認してみると、きちんと名前が変更されているのが確認できると思います。
表示を確認する
それでは実際にどのようにページが表示されているのかを確認してみましょう。
PCなどのウィンドウサイズでは上画像のような表示なっています。
少しウィンドウサイズを小さくすると、
サイドカラムが縦に並ぶのがわかります。
さらに、ウィンドウサイズを小さくすると、
こんな感じになります。
このようにデフォルトでレスポンシブ対応になっているのがありがたいですね。
デフォルト機能のカスタマイズをいじってみる
[外観]→「カスタマイズ」をクリックすると、「背景色」を選べるカラーピッカーが付いています。
他にも「背景画像」を登録できたりします。
基本的な骨組みが出来上がっているので、ここからカスタマイズしてオリジナルのテーマを作りやすいですね。是非、一度お試しください。