Webデザインをしている知人から「最近Habakiri試してるんだけど、Bootstrapベースだしなかなか良いよ」という噂を聞きました。
なかなか良いよ、というのはデザインや機能が豊富ということだそうでまずはやってみないとわからないということで試してみました。
Bootstrapベースの高機能なテーマ Habakiri とは？
聞いただけでよくわからないのでまずはHabakiriのサイトを見てみました
このページを見てわかったことは
・開発者が日本人かな？
・デザインかっこいい
・トップページにBizVectorのような横に３つ並んだブロックがある
・マニュアルやアドオンがある！
・フォーラムがあってわからないことも聞けそう？
かなということです。なんか期待できそうです。
HabakiriをWebサイトに適用してみる
ローカルPCで動かしているテスト用のサイトにインストールして見た目がどうかわるのか、試してみました。
よく使うSimplicity2のテーマを適用するとこういう感じの表示になります。
Habakiriをインストールします。
ダッシュボード 外観＞テーマ をクリック
新規追加 をクリック
テキストボックスに habakiri と入力してリターン
このテーマが見つかるので インストール をクリック
有効化 をクリック。これで、インストールが終わって Habakiri がテーマとして指定されました。
Webサイトを見てみます
う…ん…、そうですよね。どんなに高機能のテーマでも自分でカスタマイズしないと、あまり見た目も変わることはないみたいです(^_^;
Habakiriのトップページを編集する トップページを固定ページに
まずはちょっとトップページをカスタマイズしたいと思います。どうしたらかっこよくなるの？と聞いたところ
トップページを固定ページに設定して、固定ページ編集画面のテンプレートをrich front なんたらってやつに入れてもらえたらテーマの画像の形に近づくよ
というアドバイスをもらいました。ということで
トップページ用の固定ページをとりあえず作って、
ページ属性のテンプレート をRich Front Page としました。
外観＞カスタマイズ で、
固定フロントページ をクリックして、
このようにさっき作った固定ページをフロントページにしました。保存して公開 をクリック
表ページを見ると、
いきなり、こんな感じのかっこいい風になっていました(^_^;。写真入ってたんですね…
ということでトップページにスライダーを入れるには、トップを固定ページにする、その固定ページのテンプレートは Rich Front Page を使う、ということがわかりました。
スライダーをカスタマイズする
スライダーをカスタマイズしてみたいと思います。
外観＞カスタマイズ＞フロントページスライダー をクリック。このように複数の画像を編集できるようになっています。色々試してみて気づきましたが、まだ何も指定していない状態だとテーマに含まれている画像でスライダーとして動いていますが、1つでも自分で画像をアップすると、アップしたものしか表示されないのでスライダーにしようと思ったら複数の画像をアップする必要があります。
画像(1) をクリック
このように入力項目があるので、
このように変更して 保存して公開 をクリック。こういう感じで画像(1)～画像(3)まで画像を入れたり文章をいれたりしました。
表画面を確認すると
このようにスライダー部分がサイトに合わせたものになりました(^^)/
Webサイトのタイトルをカスタマイズしてみる
トップページのWebサイトタイトルですが
なんかちょっと違和感があります。ロゴなどを作ればかっこいいと思うんですが、テストサイトなのでロゴもありません(^_^;。
そこでちょっと簡単に変えてみました。
外観＞カスタマイズ＞レイアウト をクリック。
ヘッダー をクリック
ヘッダー を 透明 に指定して、保存して公開 をクリック
こんな風に画像の中にWebサイトのタイトルが表示されるようになり、スッキリしました。
トップページの文字の部分のcssをカスタマイズする
スライダーなど結構、かっこよくなってきたと思うのですが最初から気になっていたのは
この文字部分です。上下左右の空がまったくないしなんだかちょっと…っていう気がします。
検索したところ、ちょうどぴったりのやりとりがありました。
[解決済み] Habakiri トップページのスライドショーより下の編集可能領域
というものです。ここでは質問に対して、Habakiriの作者の方からお返事があり、
「Rich Front Page」では、HTML と CSS で自由にレイアウトができるように、本文欄ではあえて幅の設定をしていません。幅を固定するのは、Bootstrap の CSS を使うことで簡単に行うことができます。例えば、以下の様な感じです。
という、聞けば納得的なお答えがありました。なるほど、Bootstrapで自分で組める人には何もない方がデザインしやすいんですね。サンプルコードもあったのでついでにあこがれのBizVector風3カラム分割にしてみたいと思います。
マルベリーITサービスでは八王子市での小規模な事業を行っている皆様にITの支援をするサービスを行っています。ITやWebに関するご相談ITやWebに関するご相談は、コワーキングスペース八王子8Beatで行います。気持ちのよいスペースでご相談ください。無料勉強会、子供のプログラム道場などWordPressもくもく会や子供がプログラムを学ぶ道場CoderDojoの開催もしています。お気軽にご参加ください。制作もご依頼ください相談だけでなく、制作も行っています。まずはご相談ください(^^)/
サンプルにあったBootstrapのclassを使い、カラムの間が空いてないなどちょっと変えたいところがあったのでその部分はインラインcssで変更しました。画像フォントのfontawesome がこのテーマには入っているので、3カラムのタイトルに利用しました。
これでトップページを表示すると、
こんな感じに3カラムの表示になりました(^^)/。
まとめ：HabakiriはBootstrapを使って自由にレイアウトしたい人向け、と思いました
思ったよりはちょっと手間がかかりましたが「トップページにいい感じのスライダー」が入り「3カラムで表示」することができました。
このテーマではBootstrapが利用でき、トップページなどあまりcssをデフォルト指定していないのでBootstrapを使って自由にレイアウトしたい人には向いていると思いました！
Habakiriは他にも機能があるようなので、トップページ以外のカスタマイズをしながらその機能を確認していきたいと思っています。
[amazon_searchlink search=”WordPress デザイン”]
コメント