もみのころぐ

テーブルレイアウトしか知らんババアが、慣れないツールいじって脳みそのリハビリをする美貌…おっと備忘録。

WEB・WORDPRESS

公式テーマ「Habakiri」をカスタマイズ(3)

投稿日:2017年10月27日 更新日:

『公式テーマ「Habakiri」をカスタマイズ』の3回目です。グローバルナビゲーションを、これまたありがちなタイプに整え、ヘッダーに「電話番号」や「お問い合わせ」ボタンを仕込みます。またフッターのコピーライト部分を自社名等に書き換えます。

グローバルナビゲーションを作る

ヘッダーのサイト名「薩摩藩株式会社」の下に、よくある帯状のグローバルナビゲーションを作ります。
構成としては「最新情報」「西郷隆盛」「大久保利通」「小松帯刀」「島津斉彬」(なんだそれw。いや、フツーは「会社概要」「製品情報」「採用情報」「アクセス」とかですねw)。「最新情報」投稿データから表示。ほかは固定ページとして作ります。

まず「最新情報」を除いた固定ページを作ります。

このあと、投稿データも「最新情報」としてグローバルナビゲーションに追加したいので、投稿データ用の固定ページを作成します(この方法がわかんなくてなー;;)。

管理画面から「固定ページ」→「新規作成」で、タイトルは「最新情報」、スラッグは「blog」(←例:newsでもinfoでもなんでもいい)にします。本文は何も入れなくてもOK。

次に「外観」→「カスタマイズ」→「固定フロントページ」を開き、投稿ページのプルダウンメニューで「最新情報」を選び、保存します。

「外観」→「メニュー」から、メニューを設定します。

メニュー名を適当に入力します。例では「薩摩藩株式会社」と入れて、「メニューを作成」ボタンをクリックしたあと、左側の「固定ページ」から、メニューに並べたい項目をチェックして「メニューに追加」しています。右側の「メニュー構造」の並びを見て、並べ替えが必要な場合は、ここで順序を入れ替えてください。

メニュー設定の「グローバルナビゲーション」チェックを入れて「メニューを保存」します。

サイトを表示すると、ヘッダータイトルの横に、グローバルメニューが表示されています。それぞれのリンクをクリックして、表示される画面を確かめてください。「最新情報」からは投稿データが表示されます。

 

ヘッダーとグローバルメニューをカスタマイズする

これでも十分にかっこいいのですが、タイトルの下に帯状にグローバルメニューが表示されるタイプにしてみます。ついでに、ヘッダーのタイトルもそれなりのロゴ画像に変えてしまいます(ロゴ画像を準備してください)。

「外観」→「カスタマイズ」→「レイアウト」→「ヘッダー」から、ヘッダーを「2行」にします。

ヘッダーを固定したい場合は「はい」を選びます。ヘッダーを固定すると、長いページで画面を下にスクロールしてもヘッダー部分だけは動かず、常時表示されます。

ここからヘッダー部分の色をカスタマイズして、帯状のグローバルメニューを作ります。色は適当に選んでください。以下は色カスタマイズの例です。

「外観」→「カスタマイズ」→「色」→「ヘッダー」
背景色#000000

「外観」→「カスタマイズ」→「色」→「グローバルナビゲーション」
背景色#ccb72e・リンク文字色#ffffff・リンク文字色(ホバー時)#ffffff・メニュー背景色#ccb72e・メニュー背景色(ホバー時)#497a2a

「外観」→「カスタマイズ」→「色」→「ハンバーガーボタン」
文字色#ffffff・背景色#000000

ヘッダーのタイトルをロゴ画像に変えます。

管理画面の「メディア」に、あらかじめロゴ画像をアップロードしておきます。

「外観」→「カスタマイズ」→「設定」で、ロゴの「画像を選択」からアップロードした画像を選びます。

なんだかそれらしきグローバルナビゲーションができました。

このグローバルナビゲーションのボタン幅を等幅にして、境界線を描きたい場合は、子テーマのstyle.cssに下記を追加します。

@media screen and (min-width: 980px) {
       .menu > li {
           border-left: 1px solid #ccc;
           width: 20%;
       }
       .menu > li:last-child {
           border-right: 1px solid #ccc;
       }
}

 


2017/12/23追記:menu > liと、直下セレクタを使っていますが、ここをmenu liにしてしまうと、グローバルナビゲーションの、例えば「大久保利通」の下に、「誕生/少年期/青年前期…」とか下層項目が下がっている場合、マウスオーバーでプルダウンするメニューがさらに20%幅になってしまい、おかしなレイアウトになります。

追記終了


 

さて、これでよくありがちなヘッダーのスタイリングができました。メニュー文字フォントが小さい場合は、「外観」→「カスタマイズ」→「レイアウト」→「グローバルナビゲーション」で、文字サイズ(px)を変更しましょう。

ついでにこれまたよくありがちですが、ヘッダー部分電話番号お問い合わせリンクを作ります。

これはheader.phpをさわる必要があるので、子テーマhabakiri-childフォルダの中に、親テーマhabakiriフォルダからheader.phpをコピーしてきます。

<div class="row header__content">
	<div class="col-xs-10 <?php echo esc_attr( $site_branding_size ); ?> header__col">
		<div class ="row">
			<div class="col-md-10 col-sm-12">
				<?php get_template_part('modules/site-branding'); ?>
                        </div>
                	<div class="col-md-2 col-sm-12">
                                <ul class="topnav2">
				<li class="tnav1"><a href="/inquiries.html"><i class="fa fa-envelope fa-lg fa-fw"></i>お問い合わせ</a></li>
				<li class="tnav2"><a href="/recruit.html"><i class="fa fa-phone-square fa-lg fa-fw"></i>03-1234-5678</a></li>
				</ul>
                        </div>
                 </div>
         <!-- end .header__col --></div>

<div class=”row header__content”>と<!– end .header__col –></div>の間を、上記のように書き換えます。

ついでに、style.cssに、上記部分のスタイルを設定します。

ul.topnav2 {
    margin: 4px 0 0 0;
    padding: 0;
    display: block;
    list-style-type: none;
}

ul.topnav2 li {
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    list-style-type: none;
    vertical-align: middle;
    text-align: left;
}

ul.topnav2 li a {
    color: #fff;
}

ul.topnav2 li a:hover {
    color: #ccc;
}

 

ついでになんとなく全体のフォントも変えてみます。

body {
    font-family: "Roboto", "Droid Sans", "游ゴシック", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif;
    line-height: 1.8;
    font-weight: 500;
    font-size: 15px;
}

 

スライドショー上に表示される文字フォントが小さい気がするので、これもstyle.cssをいじります。

.habakiri-slider__item-content {
	font-size: 2.0em;
}

 

 

フッターのコピーライト部分をカスタマイズする

フッターのコピーライト部分については、作者さんのページでアドオン「Copywrite Manager」(540円)が販売されています。まずはそちらをご検討ください。

LINKCopywrite Manager

自分でカスタマイズしたい方は、親テーマのmoduleフォルダから子テーマのmoduleフォルダcopyright.phpをコピーしてきて、下記のように、まるっと修正します。リンク先等は適宜修正してください。

<?php
$copyright = '<a href="http://www.satsuma-han.co.jp/">SATSUMA-HAN corporation</a>';
echo apply_filters( 'habakiri_copyright', $copyright );

 

もうここまででババアは疲労のために青息吐息で倒れそうなので、続きはまた次回。

-WEB・WORDPRESS

執筆者:

関連記事

公式テーマ「Habakiri」をカスタマイズ(1)

出来心でHabakiriをいじってみました。Habakiri…どう見ても「腹切り」か「はばかり」です。でも、まかせて安心、WordPress公式テーマなんですよ、奥さん! 一応、なんかコーポレートサイ …

俺メモ:死なないように、CSSスタイリングのコードコピペ元になるサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、コードのパクリ元をメモっとく。順番にベンキョーすっしかねえなあ。 そのうち、HTML+CSSのベーステンプレがあるサイトとか、サイトデザイン集めたと …

さらば、Samara Oblastの友よ

このブログはまだ実験中なので、あまり人にアドレスを言っていない。言っていない状態でアクセスとかあるものなのか、Google Analyticsを突っ込んで覗いているのだが、ある日、ロシアからのアクセス …

俺メモ:死なないように、HTML+CSSの無料テンプレダウンロードサイトをメモる

ババアは耄碌してて、何をやってもうまくいかないので、サイト作成用のベースになる、HTML+CSSの無料テンプレダウンロードサイトをメモっとく。 でも、前にちょこっとやったことあんだけど、元々のテンプレ …

画像にCSSでリボン飾りを付けようとしたらできなくて死ぬ

よくありがちな、画像にCSSでリボンっぽいものが付いてるものを作ろうとしたら、できなくて死んだお話。もうね、耄碌ババアは生きてんのイヤになりますよ。何をやってもうまくいかない;;まあ、そもそもCSSが …