高機能でかっこいいという噂の Habakiri を試してみるー表示のカスタマイズ編

前回、高機能でかっこいいという噂のHabakiriというテーマをインストールして、トップページをカスタマイズする「トップページカスタマイズ編」を書きました。
今回はその他の表示に関するカスタマイズしてみようかと思います。

Habakiriのマニュアルを参照してみる

Habakiriのマニュアルを参照しながら、Habakiriの機能を試していきます。

http://habakiri.2inc.org/manual/

前回の

Webデザインをしている知人から「最近Habakiri試してるんだけど、Bootstrapベースだしなかなか良いよ」という噂を聞きました。 なかなか良いよ、というのはデザインや

で、既に試している機能もありますがそれ以外の機能で見た目に関するものを確認してみたいと思います。

Habakiriの子テーマを作ってcssを変更してみる

cssも変更したいと思うので、まずは

Habakiriマニュアル 子テーマの作成方法

を見ながらHabakiriの子テーマを作ります。

habakiri-child というフォルダを作成

このような内容のstyle.cssファイルを作ってhabakiri-childに保存します

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

habakiri-child というテーマがあるので 有効化 をクリックします。

表画面を見ると、カスタマイズで行ったスライダーの設定がデフォルトに戻ってしまっているので、前回と同じように指定し直します。
Habakiri を日本語サイトで使うときのオススメ CSS

という記事にあるようなcssの設定にしてみたいと思います。

cssはこのページにあった、

このコードをhabakiri-childstyle.css に追加して保存します。

修正前の表示は、

こんな感じでしたが、修正後は

このように明朝体中心の表示でなんとなく「高級感」が出たように感じます(^^)/。以前Macには良いフォントがあって、明朝体でもきれいに表示されるんだけどWindowsはなぁ…と思っていましたが、今は 游明朝 という良いフォントがあるのでWindowsでもこのようにきれいに表示させることが出来るようになりました。

ヘッダー画像を入れてみる

habakiriのマニュアルページを見ると、

Habakiri はヘッダー画像機能が搭載おり、設定すると各ページのページヘッダー(.page-header)の背景に設定した画像が表示されるようになっています。

ページ共通のヘッダー画像を入れることができる、と書いてあったので入れてみたいと思います。

ヘッダー画像を指定する前の固定ページは、

このような感じです。

ダッシュボード 外観>カスタマイズ で、



ヘッダー画像
をクリック

新規画像を追加 をクリック

使いたい画像をクリックして 選択して切り抜く をクリック

適当な範囲を指定して、画像切り抜き をクリック

保存して公開 をクリック

先ほどと同じ固定ページを見ると、

このようにヘッダー画像が表示されました。他の固定ページでも、

同様に、ヘッダー画像が表示されるようになりました。ヘッダー画像は固定ページにしか表示されないので投稿ページは、

このようにヘッダー画像が表示されません。

グローバルナビゲーションにサブラベルを表示する

グローバルナビゲーションのサブラベル表示

というマニュアルがあったので、どんなことができるのか試してみます。

ダッシュボード 外観>メニュー をクリックして

こんな感じのメニューを作ります。

このように表示されるようになります。

マニュアルページにあるように説明を追加してみます。

外観>メニュー



表示オプション
をクリックして

説明 にチェックを入れます

それぞれのメニューの 説明 にサブラベルに表示したい内容を入力します

メニューを保存 をクリック

トップページを読み込み直すと、このように各メニューの下に説明がサブラベルとして表示されるようになりました(^^)/

おまけ:Bootstrapを使いこなすためのマニュアルもありました!

HabakiriにはBootstrapが同梱されているのでそれを使うと簡単にかっこいいhtmlになると思われます。しかし、私のようにあまり使い慣れていない人にはどんな風に使えばいいの???ということになってしまいます。

HabakiriのマニュアルにはBootstrapに関するものも存在していて、

Bootstrap の便利な CSS

これを見ると私のようにあまり使ったことがなくてもすぐにコピペすれば使えそうです!

[Amazon sponsored link] WordPress デザイン 関連本

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

シェアする

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

フォローする

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