高機能でかっこいいという噂の Habakiri を試してみるートップページカスタマイズ編

Webデザインをしている知人から「最近Habakiri試してるんだけど、Bootstrapベースだしなかなか良いよ」という噂を聞きました。
なかなか良いよ、というのはデザインや機能が豊富ということだそうでまずはやってみないとわからないということで試してみました。

Bootstrapベースの高機能なテーマ Habakiri とは?

聞いただけでよくわからないのでまずはHabakiriのサイトを見てみました

http://habakiri.2inc.org/

このページを見てわかったことは

・開発者が日本人かな?
・デザインかっこいい
・トップページにBizVectorのような横に3つ並んだブロックがある
・マニュアルやアドオンがある!
・フォーラムがあってわからないことも聞けそう?

かなということです。なんか期待できそうです。

HabakiriをWebサイトに適用してみる

ローカルPCで動かしているテスト用のサイトにインストールして見た目がどうかわるのか、試してみました。

よく使うSimplicity2のテーマを適用するとこういう感じの表示になります。

Habakiriをインストールします。

ダッシュボード 外観>テーマ をクリック

新規追加 をクリック

テキストボックスに habakiri と入力してリターン

このテーマが見つかるので インストール をクリック



有効化
をクリック。これで、インストールが終わって Habakiri がテーマとして指定されました。

Webサイトを見てみます

う…ん…、そうですよね。どんなに高機能のテーマでも自分でカスタマイズしないと、あまり見た目も変わることはないみたいです(^_^;

Habakiriのトップページを編集する トップページを固定ページに

まずはちょっとトップページをカスタマイズしたいと思います。どうしたらかっこよくなるの?と聞いたところ

トップページを固定ページに設定して、固定ページ編集画面のテンプレートをrich front なんたらってやつに入れてもらえたらテーマの画像の形に近づくよ

というアドバイスをもらいました。ということで

トップページ用の固定ページをとりあえず作って、

ページ属性テンプレートRich Front Page としました。



外観>カスタマイズ
で、



固定フロントページ
をクリックして、

このようにさっき作った固定ページをフロントページにしました。保存して公開 をクリック
表ページを見ると、

いきなり、こんな感じのかっこいい風になっていました(^_^;。写真入ってたんですね…

ということでトップページにスライダーを入れるには、トップを固定ページにする、その固定ページのテンプレートは Rich Front Page を使う、ということがわかりました。

スライダーをカスタマイズする

スライダーをカスタマイズしてみたいと思います。

外観>カスタマイズ>フロントページスライダー をクリック。このように複数の画像を編集できるようになっています。色々試してみて気づきましたが、まだ何も指定していない状態だとテーマに含まれている画像でスライダーとして動いていますが、1つでも自分で画像をアップすると、アップしたものしか表示されないのでスライダーにしようと思ったら複数の画像をアップする必要があります。

画像(1) をクリック

このように入力項目があるので、

このように変更して 保存して公開 をクリック。こういう感じで画像(1)~画像(3)まで画像を入れたり文章をいれたりしました。

表画面を確認すると

slider

このようにスライダー部分がサイトに合わせたものになりました(^^)/

Webサイトのタイトルをカスタマイズしてみる

トップページのWebサイトタイトルですが

なんかちょっと違和感があります。ロゴなどを作ればかっこいいと思うんですが、テストサイトなのでロゴもありません(^_^;。

そこでちょっと簡単に変えてみました。

外観>カスタマイズ>レイアウト をクリック。

ヘッダー をクリック



ヘッダー を 透明
に指定して、保存して公開 をクリック

こんな風に画像の中にWebサイトのタイトルが表示されるようになり、スッキリしました。

トップページの文字の部分のcssをカスタマイズする

スライダーなど結構、かっこよくなってきたと思うのですが最初から気になっていたのは

この文字部分です。上下左右の空がまったくないしなんだかちょっと…っていう気がします。

検索したところ、ちょうどぴったりのやりとりがありました。

[解決済み] Habakiri トップページのスライドショーより下の編集可能領域

というものです。ここでは質問に対して、Habakiriの作者の方からお返事があり、

「Rich Front Page」では、HTML と CSS で自由にレイアウトができるように、本文欄ではあえて幅の設定をしていません。幅を固定するのは、Bootstrap の CSS を使うことで簡単に行うことができます。例えば、以下の様な感じです。

という、聞けば納得的なお答えがありました。なるほど、Bootstrapで自分で組める人には何もない方がデザインしやすいんですね。サンプルコードもあったのでついでにあこがれのBizVector風3カラム分割にしてみたいと思います。

サンプルにあったBootstrapのclassを使い、カラムの間が空いてないなどちょっと変えたいところがあったのでその部分はインラインcssで変更しました。画像フォントのfontawesome がこのテーマには入っているので、3カラムのタイトルに利用しました。

これでトップページを表示すると、

こんな感じに3カラムの表示になりました(^^)/。

まとめ:HabakiriはBootstrapを使って自由にレイアウトしたい人向け、と思いました

思ったよりはちょっと手間がかかりましたが「トップページにいい感じのスライダー」が入り「3カラムで表示」することができました。

このテーマではBootstrapが利用でき、トップページなどあまりcssをデフォルト指定していないのでBootstrapを使って自由にレイアウトしたい人には向いていると思いました!

Habakiriは他にも機能があるようなので、トップページ以外のカスタマイズをしながらその機能を確認していきたいと思っています。

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

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る