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

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

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

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

Bones

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

bonesのインストール

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

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

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

Bones(Rename Me!)

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

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

/******************************************************************
Theme Name: Bones (Rename Me!)

とある所を

/******************************************************************
Theme Name: Bones-ryus

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

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

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

表画面で見てみました。

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

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

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

少し幅を狭めた状態

もう少し幅を狭めた状態（iPad等の縦？）

さらにもう少し幅を狭めた状態（iPhone表示とか？）

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

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

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

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

背景色を変えたり

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

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

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

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

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

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

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

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

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

/*********************
GENERAL STYLES
*********************/
body {
  font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;

を、

/*********************
GENERAL STYLES
*********************/
body {
  font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;

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

すると変更前は

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

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

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

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

header.phpの、

                    <?php // to use a image just replace the bloginfo('name') with your img src and remove the surrounding <p> ?>
                    <p id="logo" class="h1" itemscope itemtype="http://schema.org/Organization"><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></p>

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

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

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

                    <div id="logo" class="h1" itemscope itemtype="http://schema.org/Organization" style="float:left;"><a href="<?php echo home_url(); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></div>
                    <div style="float:right;align:right;"><a href="<?php echo home_url(); ?>" rel="nofollow">
                    <image src="<?php echo home_url(); ?>/wp-content/themes/bones-ryus/library/images/logo_name.jpg" style="padding-top:5px;width:200px"></a></div>
                    <div style="clear:both"></div>

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

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

まとめ：とても手を入れやすい。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行目あたり）

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