オリジナルテーマを作るための Bonesはスグに使えるレスポンシブテーマ!

Image [18]

先日書いたようにtwentyfifteenを使ってこのサイトのテーマをリニューアルしようと思いましたが、いろいろあって断念しました。しかし、そのうちテーマも変えてみたいということで「可能性として」オリジナルテーマを作る、っていうことについて考えてみました。

HTML5でレスポンシブデザインの評判のいいテーマ Bones

色々検索してみて「HTML5である」「レスポンシブデザインである」「評判がいい」ということで、

Image

Bones

というテーマを使って作ってみようと思います。

bonesのインストール

Image [1]

このページの Download for Free というボタンをクリックするとzipファイルをダウンロードすることができます。

zipを解凍すると私の場合、 eddiemachado-bones-a2dd69b というようなフォルダができました。このままではわかりにくいので、フォルダ名bones-ryusという名前に変更して、使ってるWordPressの wp-content\themes の下に置きました。

この状態で、ダッシュボードを見ると

Image [2]

Bones(Rename Me!)

リネームしろ!的に書いてあります。

bones-ryusフォルダの中にある style.css を開いて、

とある所を

と書き換えて保存。再表示すると、

Image [3]

このように名前が変わりました。このテーマを 有効化 します。

bonesの表示確認 レスポンシブデザインもバッチリ!

表画面で見てみました。

Image [4]

お!思っていたよりちゃんとしてる!もっとスケルトンっぽいのかと思った。。なんだったらこのままでも良さそうな感じです(^^)/<この人プログラマでデザインはうとい。。

気になってる、レスポンシブデザインを確認してみます。

上の画面が一番大きい状態でした。

Image [5]

少し幅を狭めた状態

Image [6]

もう少し幅を狭めた状態(iPad等の縦?)

Image [7]

さらにもう少し幅を狭めた状態(iPhone表示とか?)

Image [8]

さらにもっと幅を狭めた状態(ガラケー?とか表示出来るんでしょうか?)

5段階の大きさに対応しているようです。このぐらいあればバッチリですね。

管理画面からテーマのカスタマイズをしてみる

Image [11]

ダッシュボード 外観>カスタマイズ をクリックすると、bonesのカスタマイズ画面になります。

Image [12]

背景色を変えたり

Image [13]

背景画像を指定したりできます。

Image [14]

オリジナルメインメニューで固定メニューを選んだら

Image [16]

twentyfourteenと同じように上に出たのでこれもこのまま使えそうです!

styleをちょっとだけいじくってみる

テーマフォルダのルートにあるstyle.css にはほとんどCSSが定義されていません。

コメントでこのテーマについて色々書いてありました。読んでみるとsass(サス)を使ってるようです。これからsassをちょっと勉強したいと思っていたのでこれはラッキーでした(^^)/。

実際に使われているCSSは、

wp-content\themes\bones-ryus\library\css\style.css

これのようです。例えばここに書いてある

を、

今使ってるテーマで指定しているfont-familyに置き換えてみます。

すると変更前は

Image [9]

こんな感じですこし文字がギザってる感じがしますが、

Image [10]

変更後はこのように丸っこいいつものフォントになりました。

header.phpをいじってロゴ画像を表示してみる

タイトル部分がちょっと寂しいのでロゴ画像を入れてみたいと思います。

header.phpの、

このあたりを変更すれば良さそうです。親切にも、

to use a image just replace the bloginfo(‘name’) with your img src and remove the surrounding <p>
イメージを使うには使いたい img src を bloginfo(‘name’) と置き換えるだけです。そして周りの<p>を削除します。

みたいに書いてあります。このBonesというテーマはカスタマイズしやすいように随所にこういうコメントが書いてあるので安心して手を入れることができます。

wp-content\themes\bones-ryus\library\images

に使いたい画像を置いて、

このように書いてみました。そして表示すると、

Image [17]

こんな感じに、ロゴが表示されました(^^)/

まとめ:とても手を入れやすい。sassでCSSをさわってみよう

このようにダウンロードしてスグに手を入れて思ったようにカスタマイズを変更することがえきました。とても手を入れやすいです(^^)/。

sass(サス)もやってみたかったので、ちょうどよい機会なのでこのBonesテーマをいじるために環境を整えて挑戦してみようと思います。

補足:ます。 が (升の絵)。 に。 謎の怪現象の解決方法

実際にこのbonesを使ってオリジナルテーマを作り始めたのですが 日本語が変な風に文字化けする という現象に遭遇しました(^_^;。

それは 株式会社 が1文字の機種依存文字になったり、 ます。 が (升の絵)。 になったりするといった現象です(^^;(^^;。

困ってググったら、

超倍速でWordPressオリジナルテーマ作成!骨だけ「Bones」の使い方をザックリと

日本語、文字化ける に解決方法がありました。

日本語、文字化ける

最後にちょっとご注意を。今使ってるバージョン(Version: 1.7)だと、変なふうに日本語が文字化けします。解消するには下記の部分を削除します。

-webkit-font-feature-settings: “liga”, “dlig”;
-moz-font-feature-settings: “liga=1, dlig=1”;
-ms-font-feature-settings: “liga”, “dlig”;
-o-font-feature-settings: “liga”, “dlig”;
font-feature-settings: “liga”, “dlig”;
この記述の在処は「libraryフォルダ」の中、以下のファイルにあります。

|– css
| `– style.css ←CSSならここ(523行目あたり)

これでようやく、謎の怪現象から脱出できました(^^)/。ありがとうございます。

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告

コメント

  1. […] 参考にさせていただいたサイトさん RYUS blog ウェブさえ 一部内容が重複しますが自分なりに書いてみます。 […]

トップへ戻る