0

WordPressの無料テーマBonesの導入方法

WordPressの無料テーマBonesの導入方法

WordPressでオリジナルテーマを作ってみようという方に、是非とも試してもらいたい「Bones」という無料のテーマがあります。

デフォルトでレスポンシブ対応にもなっており、名前の通りにほとんどその骨組みだけの構造になっているので、余計な要素がなく、カスタマイズしやすいのが特徴。




今回は、その「Bones」の導入方法を簡単にご紹介します。
それではまず、公式サイトからファイルをダウンロードしてください。

Bonesをダウンロード

Bones

緑のボタン「Download for Free」からダウンロードできます。

bones-img2

zipファイルを解凍してみると、「eddiemachado-bones-9db85e4」という名前のフォルダがあります。この名前は、もしかしたら別の名前になっているかもしれませんが、同じような別名になっていると思いますので確認してみてください。

bones-img3

そしてこのままだとよくわからない名前になってしまうので、わかりやすい名前に変更してしまいましょう。今回は「originaltheme」という名前に変更したと仮定して進めていきます。

bones-img4

 

テーマフォルダをアップロード

名前を変更した「originaltheme」というフォルダを[wp-content]→[themes]フォルダの中にアプロードしてください。

bones-img5

するとWordPressのダッシュボードから[外観]→[テーマ]を開くと、一覧の中に「Bones(Rename Me!)」という新しいテーマが追加されていますので「有効化」しましょう。

 

テーマのCSSを書き換える

アップロードしたフォルダが「originaltheme」であるのに、管理画面上では「Bones(Rename Me!)」になってしまっているので、先ほどアップロードした「originaltheme」の中にある「style.css」を修正します。

style.css

style.cssの先頭に記述されている「Theme Name:~」を自分で付けた名前に変更します。

この後ろの部分を、

このように変更すればOKです。

 

そして、もう一度[テーマ]の一覧を確認してみると、きちんと名前が変更されているのが確認できると思います。

bones-img7

 

表示を確認する

それでは実際にどのようにページが表示されているのかを確認してみましょう。

bones-img8

PCなどのウィンドウサイズでは上画像のような表示なっています。

少しウィンドウサイズを小さくすると、

bones-img10

サイドカラムが縦に並ぶのがわかります。

さらに、ウィンドウサイズを小さくすると、

bones-img11

こんな感じになります。

このようにデフォルトでレスポンシブ対応になっているのがありがたいですね。

 

デフォルト機能のカスタマイズをいじってみる

[外観]→「カスタマイズ」をクリックすると、「背景色」を選べるカラーピッカーが付いています。

bones-img12

他にも「背景画像」を登録できたりします。

bones-img13

 

基本的な骨組みが出来上がっているので、ここからカスタマイズしてオリジナルのテーマを作りやすいですね。是非、一度お試しください。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > WordPress > WordPressの無料テーマBonesの導入方法