ロゴをヘッダーのバー下で真ん中寄せに

logoをバー下で真ん中寄せ

「SANGO」は、ヘッダーのバーの中に、ロゴ(サイトタイトル)とヘッダーメニューが表示されるようになっています。

これはこれで、悪くはないけど

なんとなく窮屈なかんじ(あくまで主観ですが)。

なので、サイトタイトルをロゴに替えたうえで

バー下中央に持ってきたいと思います。↓完成図

logoをバー下で真ん中寄せ

このカスタマイズでは、

  • header.php(新規作成して子テーマ内に)
  • style.css(子テーマ内にあるスタイルシート)

二つのファイルを新規作成及び編集します。

編集するためのテキストエディタと編集したファイルをアップロードするためのFTPソフトが必要です。

参考 SANGOの子テーマでカスタマイズを行う方法サルワカ

↑をよく読んでからチャレンジしてみましょう。

では行きまーす♪

サイトタイトルをロゴに変更

基本の設定なので、設定済の場合又はロゴは使わずサイトタイトルのままの場合は次へ。

まだ、設定してない人はこちらを参考に設定しましょう。

参考 ブログのタイトルとロゴ画像を設定しようサルワカ

ロゴに変更後

header.phpファイルの追加

*ロゴ(サイトタイトル)をヘッダーバーの中から動かさない場合は必要ありません。

テキストエディタに、以下のコードを貼り付けて「header.php」という名前のファイルを作成し、子テーマのフォルダに保存します。

注意
この時、文字コードを「UTF-8N(BOMなし)」を指定して保存

UTF-8Nで保存

 

新規作成するheader.php
<!doctype html>
<!--[if lt IE 7]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1 ,viewport-fit=cover"/>
<meta name="msapplication-TileColor" content="<?php echo get_theme_mod( 'main_color', '#6bb6ff');?>">
<meta name="theme-color" content="<?php echo get_theme_mod( 'main_color', '#6bb6ff');?>">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">
<?php wp_head(); //削除禁止 ?>
</head>
<body <?php body_class(); ?>>
<div id="container">
<header class="header<?php if(get_option('center_logo_checkbox')) echo ' header--center'; ?>">
<?php if(wp_is_mobile() && is_active_sidebar( 'nav_drawer' )): //ナビドロワー ?>
<div id="drawer">
<input type="checkbox" id="drawer__input" class="drawer--unshown" >
<label id="drawer__open" for="drawer__input"><i class="fa fa-bars"></i></label>
<label class="drawer--unshown" id="drawer__close-cover" for="drawer__input"></label>
<div id="drawer__content">
<div class="drawer__title dfont">MENU<label class="close" for="drawer__input"><span></span></label></div>
<?php dynamic_sidebar('nav_drawer'); ?>
</div>
</div>
<?php endif; //END ナビドロワー ?>
<div id="inner-header" class="wrap cf">
<?php
//PC用ヘッダーナビ
if(has_nav_menu('desktop-nav')) {
echo '<nav class="desktop-nav clearfix">';
wp_nav_menu(array(
'container' => false,
'theme_location' => 'desktop-nav',
'depth' => 2,
'fallback_cb' => ''
));
echo '</nav>';
} //END PC用ヘッダーナビ ?>
</div>
<?php //モバイル用ナビ
if(wp_is_mobile() && has_nav_menu('mobile-nav')) {
echo '<nav class="mobile-nav">';
wp_nav_menu(array(
'container' => false,
'theme_location' => 'mobile-nav',
'depth' => 1,
'fallback_cb' => ''
));
echo '</nav>';
} //END モバイル用ナビ ?>
</header>
<div id="logo-wrapper" class="logo-wrap">
 <?php //ロゴまわり
 $title_tag = (is_home() || is_front_page()) ? 'h1' : 'p'; //トップページのみタイトルをh1に
 ?>
 <<?php echo $title_tag;?> id="logo" class="h1 dfont">
 <a href="<?php echo home_url(); ?>"><?php $logo = esc_url(get_option('logo_image_upload'));
 if($logo){ ?><img src="<?php echo $logo; ?>" alt="<?php bloginfo('name'); ?>"><?php } if(!get_option('onlylogo_checkbox')) bloginfo('name'); ?></a>
 </<?php echo $title_tag;?>>
</div>
<?php if(get_option('header_info_text')){//お知らせ欄
echo '<div class="header-info"><a href="'.get_option('header_info_url').'">'.get_option('header_info_text').'</a></div>';
}?>

作成した「header.php」ファイルを子テーマのフォルダにFTPソフトでアップロードします。

sango-theme-child
├functions.php
└style.css

が、↓このようになるってことですね。

sango-theme-child
├functions.php
├header.php
└style.css

まだ、スタイルシートをいじってないので、この時点では、以下の様になります。

ロゴ位置変更後

style.cssへ追記

  1. ロゴを大きく表示
  2. 常に中央に表示
  3. ロゴ表示部分の背景色変更

「/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/」
とある下に追記してください。

style.cssへ追記
#logo-wrapper{
text-align:center;/*②ロゴを真ん中寄せ*/
height:180px;/*ロゴ部分の高さ(③↓のロゴの高さと同じでOK)*/
background-color:#ffffff;/*④ロゴ表示部分の背景色*/
}
#logo img{height:180px;/*⑤ロゴの高さ(お好みで)*/
}

①デフォルトだとロゴ表示部分は最大で1000pxになってたので、大画面での表示だと左右に余白ができてしまうので100%に修正
訂正↑ロゴ表示部分のクラスをwrapにしていたために最大1000pxになっていたので、新たにlogo-wrapに変更しました。
②ロゴをスマホでもタブレットでもPCでも、どんな大きさのデバイスでも真ん中に。
③ロゴを入れてる部分の高さはロゴの高さ以上に。通常はロゴの高さと同じで良いと思います。
④ロゴを入れてる部分の背景色ですが、今回はロゴを透過させなかったので白に。
⑤ロゴの高さ。200pxの画像でも180pxと指定すれば180pxで表示されます。

logoをバー下で真ん中寄せ

完成です♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です