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

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

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

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

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

マニュアル
BootstrapベースのWordPress公式ディレクトリ掲載テーマ

前回の

[ryus_blogcard url=”https://usortblog.com/habakiri-toppage/”]

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

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

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

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

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

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

/*
Theme Name: habakiri-child
Theme URI: http://2inc.org ( テーマのURL )
Description: Habakiri の子テーマです ( テーマの説明 )
Author: Umoto
Author URI: https://usortblog.com/
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: habakiri
*/

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

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

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

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

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

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

body {
    /* ゴシック体の場合 */
    font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif;
    /* 明朝体の場合 */
    font-family: "Roboto", "Droid Sans", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "MS P明朝", "MS 明朝", serif;
    line-height: 1.8;
}

p, ul, ol, dl, table {
    margin-bottom: 20px;
}

h2, .h2 {
    font-size: 26px;
    margin: 40px 0 20px;
}

h3, h3 {
    font-size: 22px;
}

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

修正前の表示は、

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

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

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

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

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

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

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

このような感じです。

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



ヘッダー画像
をクリック

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

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

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

保存して公開 をクリック

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

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

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

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

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

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

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

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

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

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

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

外観>メニュー



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

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

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

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

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

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

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

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

Bootstrap の便利な CSS

これを見ると私のようにあまり使ったことがなくてもすぐにコピペすれば使えそうです!
[amazon_searchlink search=”WordPress デザイン”]

兎本美佳

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

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

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

コメント

トップへ戻る

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

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

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

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