本記事では、WordPressの無料テンプレート「Habakiri」の使い方について解説します。
Habakiriは、Bootstrap ベースのシンプルで使いやすい WordPress テーマです。
おすすめWordPressテーマの紹介記事などでよく見かけるので知っている人も多いかと思います。
今回は、そのHabakiriのテーマで試しにデモサイトを作成したので、どのようなサイトが作成できるかを説明していきます。
Habakiriのデモサイトを紹介します。
![WordPressテーマ「habakiri」デモサイト画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」デモサイト-1024x460.png)
はじめに今回作成したデモサイト紹介します。
ここをクリックするとデモサイトを閲覧できます。
公式サイトで「シンプルなWordPressテーマ」と書いているだけあって、余計なものが入っていないのでくせが無く、使いやすいテーマとなっています。
また、メニューやフロントページのスライドショーはボタンでのカスタマイズだけで簡単に作成できる点もHabakiriの長所であります。
誰でも簡単に作成できるよう、この記事ではマウス操作でできる設定について紹介していこうと思います。
まずはHabakiriを インストール & 有効化!
Habakiri等のWordPressテーマを利用するためにはHabkiriをインストールして有効化する必要があります。
テーマのインストール、有効化の方法が分からない人は以下の記事を参考にして、WordPressテーマをHabakiriに変更して下さい。
また、公式ではHabakiriを利用する際に、子シーンを利用することを推奨しています。
Habakiriを使って長期的にサイト運営をすることを考えている人は子シーンを設定するようにしましょう。
子シーンの設定方法が分からない人は以下の記事を参考にして設定してみて下さい。
ホームページを作成しよう!
Habakiriのテーマをインストールしたての状態では投稿用ページがホームページとして設定されています。
投稿用ページではスライドショーなどの設定ができないので、サイトとしての印象が薄くなります。
そこで、固定ページを作成し、それをホームページとして設定していこうと思います。
1. 左側のメニューバーから固定ページをクリック
![WordPressテーマ「habakiri」_ホームページ設定1画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定1-1024x347.png)
2. 「新規追加」をクリックします。
![WordPressテーマ「habakiri」_ホームページ設定2解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定2-1024x260.png)
3. ホームページ用のタイトルと本文を設定し、できたら「公開」します。
![WordPressテーマ「habakiri」_ホームページ設定3解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定3-1024x434.png)
下の画像のように、ここに設定した内容はスライドショーの下に表示されます。ホームページに表示したい文章やテーブルを書くようにしましょう。
![WordPressテーマ「habakiri」_ホームページ設定3_1解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定3_1-1024x471.png)
4. 同様にして「投稿用サイト」も作成して公開します。
固定ページをホームページとして設定する場合、同時に投稿用ページも設定する必要があります。
作成すると固定ページの欄が下の写真のようになります。「Habakiriデモサイトブログ」が投稿用ページのための固定ページとなります。
![WordPressテーマ「habakiri」_ホームページ設定3-2解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定3-2-1024x347.png)
5. 左側のメニューバーから「外観」→「カスタマイズ」をクリックします。
![WordPressテーマ「habakiri」_ホームページ設定4解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定4-1024x434.png)
6. 左側のメニュー欄から「ホームページ設定」をクリックします。
![WordPressテーマ「habakiri」_ホームページ設定5解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定5-1024x475.png)
7. ホームページの表示のところで「最新の投稿」の方にチェックを入れます。
![WordPressテーマ「habakiri」_ホームページ設定6解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定6-1024x519.png)
8. 「ホームページ」と「投稿ページ」の欄に先程作成した二つのページをそれぞれ設定します。
左側に出てくる、 「ホームページ」と「投稿ページ」の欄に、手順2~4で作成した作成した固定ページをそれぞれ選択します。
![WordPressテーマ「habakiri」_ホームページ設定7解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定7-1024x519.png)
9. 設定ができたら画面上部にある「公開ボタン」をクリックします。
![WordPressテーマ「habakiri」_ホームページ設定8解説画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」_ホームページ設定8-1024x385.png)
以上で固定ページによるホームページの設定は完了です。
実際にホームページにアクセスしてみて、レイアウトが変更されているか確認してみるようにしましょう。
見やすいメニューを作成してみよう!
次にホームページ上部に表示されるメニューを作成していきます。
下の画像のように、メニューを作成してもデフォルトでは黒文字で右上に表示されるだけなので分かりづらいデザインになっています。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説1画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説1-1024x386.png)
そこで、この記事では下の画像のように見やすくデザインのよいメニューを作成していきます。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説2画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説2-1024x257.png)
まずはメニューを作成&表示しよう!
1. メニューに載せたいページを固定ページで作成します。
メニューの各項目には他のページのリンクを設定する必要があります。
ホームページを固定ページで作成したように、メニューに載せる他のページも固定ページで作成するのが一般的ですので、メニューに載せたい固定ページをいくつか作成しましょう。
なお、私は下の画像のようにホームページ、投稿用ページに加え、お問い合わせページとサイトの説明の仮ページを作成しました。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説3画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説3-1024x361.png)
2. 左側のメニューバーから「外観」→「メニュー」をクリックします。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説4画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説4-1024x343.png)
3. 画面左側にある「全て表示」をクリックします。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説5画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説5-1024x471.png)
4. メニューに追加したいページにチェックをいれ、その下にある「メニューに追加」をクリックします。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説6画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説6-1024x514.png)
5. 各メニュー項目のナビゲーションラベルを変更します。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説7画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説7-1024x557.png)
ナビゲーションラベルとはメニュー欄に表示される名前のことです。
文字が長いとメニューバー見えづらくなるので「HOME」や「BLOG」の用に単語で設定するようにしましょう。
私は各固定ページについて下の画像のようにナビゲーションラベルを設定しました。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説7_2画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説7_2-1024x514.png)
6. メニューの位置の「グローバルナビゲーション」にチェックをいれ、右下にある「メニューを保存」をクリックします。
メニューを表示したい位置にチェックを入れます。
グローバルナビゲーションにチェックを入れるとページの上部にメニューバーが表示されるようになります。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説8画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説8-1024x512.png)
下の画像のように「メニューを更新しました。」という表示が出ればメニューの作成は完了です。
![WordPressテーマ「habakiri」メニューカスタマイズ_解説8_2画像](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説8_2-1024x71.png)
メニューのレイアウト設定しよう!
次にメニューのレイアウトを変更していきます。
1. 左側のメニューバーから「外観」→「カスタマイズ」をクリックします。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説9-1024x342.png)
2. 「レイアウト」をクリックします。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説10-1024x512.png)
3. 「ヘッダー」をクリックします。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説11-1024x384.png)
4. ヘッダーの設定のところで「2行」にチェックをいれます。
「2行」にチェックをいれることでヘッダ-が2行に分かれます。
ヘッダーが2行になるとメニューバーが下の段に移動するので、1行のときに比べて見えやすくなります。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説12-1024x343.png)
5. カスタマイズページのはじめに戻り、「色」をクリックします。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説13-1024x473.png)
6. 「グローバルナビゲーション」をクリックします。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説14-1024x384.png)
7. 好みに合わせて背景色や文字色を変更します。
ここでグローバルナビゲーション(メニューバーがある行)の背景色や文字色、サブラベルなどの色を変更することができます。
また、ホバー時(マウスカーソルがのっているとき)は別の色に設定できるので、サイト閲覧者にとって使いやすいサイト作成も可能です。
色を変更すると右側のデモ表示が変化するので、自分の好みに合わせて自由に色を変更していきましょう。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説15-1024x427.png)
8. 設定が終わったら「公開」ボタンをクリックします。
![](https://itech-semi.com/wp-content/uploads/2021/10/WordPressテーマ「habakiri」メニューカスタマイズ_解説16-1024x300.png)
これでメニューバーの 作成は完了です!!
実際にホームページにアクセスしてみて、メニューバーが表示されているか確認してみるようにしましょう。
まとめ
ホームページやメニューの作成はうまくできたでしょうか?
このようにHabakiriでは簡単にシンプルで見た目の良いサイトを作成することが可能です。
また、学習が必要となりますがBootstrapを利用すればもっと見た目の良いサイトを作成することもできます。
もし、Habakiriでホームページを作成していこうと思った人はBootstrapについても調べて利用していきましょう。