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

この記事は約6分で読めます。

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

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

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

Habakiri
Habakiri Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。 DOWNLOAD GitHub Habakiri は .....

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

・開発者が日本人かな?
・デザインかっこいい
・トップページに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カラム分割にしてみたいと思います。

マルベリー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 デザイン”]

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。