オリジナルのテーマ作ろうと思っているけど骨組みのHTMLだけ誰か作ってくんないかな？

投稿用キャラクタ

こんな要望に答えられるのがブランクテーマのbonesです。

この記事ではWordPressでオリジナルテーマを作るときに使いたいブランクテーマbonesをご紹介します。bonesはその名の通り骨組みだけのテンプレートです。1からテンプレートファイルを全て自分で作るのもいいですが一部のページを作り忘れてしまったり命名を間違えてしまうと動かない場合もあります。

なのでbonesを活用すればそういったミスもなくなり時短もできるので一石二鳥に加え無料なので一石三鳥の利点があるのでまだ使ったことがない方はぜひダウンロードしてみてください！

bonesの特徴

bonesの特徴として大きく分けて3つあります。

3つの特徴

  • レスポンシブに対応
  • HTML5対応
  • SCSS対応

こういった特徴があります。CSSを1から書きたい人は削除して1から記述してもいいですし、レイアウトだけbonesのCSSを使うといったカスタムでもできるので作りたいものによって合わせられるのでとても使いやすいテンプレートになっています。

ちなみにレイアウトに関して、ブレイクポイントは481px以上、768px以上、1030px以上、1240px以上の４つで5段階に切り分けられています。

bonesをダウンロードする方法

WordPressにテンプレートを適用するためにはまずはテンプレートファイルをダウンロードしなければなりません。早速ダウンロードしていきましょう！

bones

bonesがダウンロードできない…

いきなり驚かせてしまって申し訳ないですが、実はbonesの公式サイトのダウンロードボタンのリンクが古いURLの為、アクセスしても404ページが表示されてしまいます。

bonesがダウンロードできない…

ダウンロードボタンの少し上のテキストリンクが正しいリンクなのでそちらからダウンロードしましょう。

ダウンロードボタンの少し上のテキストリンクが正しいリンクなのでそちらからダウンロードしましょう

こちらが正しいリンクです。

squibbleFish/theme-bones

githubからダウンロードする方法

新しいリンクをクリックするとgithubのページが表示されます。WordPressのテーマは.zipファイルをそのままテーマとしてアップロードできるので.zip形式でダウンロードします。

1右側に表示されている「Clone or download」をクリックします。

右側に表示されている「Clone or download」をクリックします

2「download ZIP」をクリックします。

「download ZIP」をクリックします

これでテーマのダウンロードが完了しました。ダウンロードフォルダに「theme-bones-master.zip」というフォルダがダウンロードされているはずなので確認しておきましょう。

WordPressにbonesのテンプレートを適用する

ダウンロードが終わったら早速bonesを適用してみましょう。ここからはWordPressの管理画面で操作を行うので開いておきます。

1左のサイドバーより「外観」→「テーマ」をクリックします。

左のサイドバーより「外観」→「テーマ」をクリックします

1「新しいテーマを追加」をクリックします。

「新しいテーマを追加」をクリックします

1「テーマのアップロード」をクリックします。

「テーマのアップロード」をクリックします

1「ファイルを選択」をクリックします。

ファイルを選択」をクリックします

1先ほどダウンロードしたtheme-bones-master.zipを指定し「開く」をクリックします。

先ほどダウンロードしたtheme-bones-master.zipを指定し「開く」をクリックします

1「今すぐインストール」をクリックします。

「今すぐインストール」をクリックします

1「有効化」をクリックします。

「有効化」をクリックします

こんな感じに表示されたらテーマの有効化が完了です。

こんな感じに表示されたらテーマの有効化が完了です

テーマを確認してみる

テーマが適用できたら早速どんな表示になるのか確認してみましょう。bonesはテンプレートの土台に使うものなので装飾は最低限のものだけになっています。

テーマを確認してみる

上の画像はトップページを表示させた時の画像です。

最低限必要な変更

確認が終わったら簡単にできる最低限の設定を2つご紹介していきますのでこちらもどうぞ！

テーマ情報の変更

WordPressはstyle.cssにテーマ情報を書き込みます。デフォルトのままだと以下のような英語になっているので変更しておきましょう。

デフォルトのままだと以下のような英語になっているので変更しておきましょう

style.cssの場所は「⁨wp-content⁩ ▸ ⁨themes⁩ ▸ ⁨theme-bones-master」の直下にあります！テキストエディターで開いくと2行目以降に下記の記述があるのでそれぞれを編集しましょう。⁩

Theme Name: Bones (Rename Me!) //テーマの名前
Theme URI: http://www.themble.com/bones //テーマのURL
Description: This site was built using the Bones Development Theme. For more information about Bones or to view documentation, you can visit the <a href="https://github.com/eddiemachado/bones/issues" title="Bones Issues">Bones Issues</a> page on Github. You'll want to customize this for your clients with your own information. //テーマの説明文
Author: Your Name Here //作者の名前
Author URI: http://www.yoururlhere.com //作者のURL
Version: 1.7 //開発バージョン
Tags: fluid-layout, responsive-layout, accessibility-ready, translation-ready, microformats, rtl-language-support //タグ

スクリーンショットを変更する

上記と合わせて行いたいのがテーマ表示時の画像の変更です。デフォルトだと骸骨の船長の画像が設定されていますが、これを任意のものに変更します。

推奨サイズと拡張子

WordPress codexで推奨されているサイズは880px x 660pxです。拡張子は.pngが推奨されています。これらに合わせた画像を用意し名前は「screenshot.png」としておきましょう。

スクリーンショットの場所はstyle.cssと同じ場所の「⁨wp-content⁩ ▸ ⁨themes⁩ ▸ ⁨theme-bones-master」の直下にあります。既に画像があるかと思いますので上書きして配置しましょう。

テーマの作成

変更後

cssとスクリーンショットをそれぞれ変更すると以下のように表示されます。

cssとスクリーンショットをそれぞれ変更すると以下のように表示されます

まとめ

ブランクテーマのbonesをご紹介しました。これから自作テンプレートを開発する予定の人はとても使いやすいテンプレートなのでぜひ使ってみてください。