前回、高機能でかっこいいという噂のHabakiriというテーマをインストールして、トップページをカスタマイズする「トップページカスタマイズ編」を書きました。
今回はその他の表示に関するカスタマイズしてみようかと思います。
Habakiriのマニュアルを参照してみる
Habakiriのマニュアルを参照しながら、Habakiriの機能を試していきます。
http://habakiri.2inc.org/manual/
前回の
[ryus_blogcard url=”https://usortblog.com//habakiri-toppage/”]
で、既に試している機能もありますがそれ以外の機能で見た目に関するものを確認してみたいと思います。
Habakiriの子テーマを作ってcssを変更してみる
cssも変更したいと思うので、まずは
を見ながら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", "ＭＳ Ｐゴシック", sans-serif;
/* 明朝体の場合 */
font-family: "Roboto", "Droid Sans", "游明朝", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 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-child のstyle.css に追加して保存します。
修正前の表示は、
こんな感じでしたが、修正後は
このように明朝体中心の表示でなんとなく「高級感」が出たように感じます(^^)/。以前Macには良いフォントがあって、明朝体でもきれいに表示されるんだけどWindowsはなぁ…と思っていましたが、今は 游明朝 という良いフォントがあるのでWindowsでもこのようにきれいに表示させることが出来るようになりました。
ヘッダー画像を入れてみる
habakiriのマニュアルページを見ると、
Habakiri はヘッダー画像機能が搭載おり、設定すると各ページのページヘッダー（.page-header）の背景に設定した画像が表示されるようになっています。
とページ共通のヘッダー画像を入れることができる、と書いてあったので入れてみたいと思います。
ヘッダー画像を指定する前の固定ページは、
このような感じです。
ダッシュボード 外観＞カスタマイズ で、
ヘッダー画像 をクリック
新規画像を追加 をクリック
使いたい画像をクリックして 選択して切り抜く をクリック
適当な範囲を指定して、画像切り抜き をクリック
保存して公開 をクリック
先ほどと同じ固定ページを見ると、
このようにヘッダー画像が表示されました。他の固定ページでも、
同様に、ヘッダー画像が表示されるようになりました。ヘッダー画像は固定ページにしか表示されないので投稿ページは、
このようにヘッダー画像が表示されません。
グローバルナビゲーションにサブラベルを表示する
というマニュアルがあったので、どんなことができるのか試してみます。
ダッシュボード 外観＞メニュー をクリックして
こんな感じのメニューを作ります。
このように表示されるようになります。
マニュアルページにあるように説明を追加してみます。
外観＞メニューの
表示オプション をクリックして
説明 にチェックを入れます
それぞれのメニューの 説明 にサブラベルに表示したい内容を入力します
メニューを保存 をクリック
トップページを読み込み直すと、このように各メニューの下に説明がサブラベルとして表示されるようになりました(^^)/
おまけ：Bootstrapを使いこなすためのマニュアルもありました！
HabakiriにはBootstrapが同梱されているのでそれを使うと簡単にかっこいいhtmlになると思われます。しかし、私のようにあまり使い慣れていない人にはどんな風に使えばいいの？？？ということになってしまいます。
HabakiriのマニュアルにはBootstrapに関するものも存在していて、
これを見ると私のようにあまり使ったことがなくてもすぐにコピペすれば使えそうです！
[amazon_searchlink search=”WordPress デザイン”]
コメント