WordPressテーマ”STINGER5″を導入

今まで作成しているWordPressテーマは、すべて「STINGER5」を導入しているのですが、この度お引越ししたこのブログにもお気に入りの「STINGER5」を導入します!

「STINGER3」から使わせて頂いていますが「STINGER5」にバージョンアップして一番変わった点といえばレスポンシブデザインになったことです!

これはメチャ嬉しー♥

なんせGoogle先生には、いつもいつもレスポンシブにしなさいと叱られていましたからね(笑)

「STINGER5」の作者の「ENJIさん」いつも素敵なテーマをありがとうございますm(__)m

今回からボチボチ「STINGER5」をカスタマイズした箇所をアップして行きたいと思います。

カスタマイズは子テーマで

まず、必要なファイルを親テーマからコピーして「stinger5_child」へ入れておいて、カスタマイズは子テーマでやります。
「functions.php」だけは子テーマに入れないでね!
「functions.php」を子テーマにコピーすると、エラーになってサイトが真っ白になります。
これ私がやっちゃいましたー(笑)
そういう時も、あわてず焦らずFTPソフトで子テーマの「functions.php」を削除しちゃえばOKでーす。

カスタマイズする前に、バックアップを取っておいてね。

ステ子

ヘッダー画像をタイトル文字代わりに表示

WordPressの管理メニューから外観⇒カスタマイズでカスタムヘッダー画面を表示。
「ヘッダー画像を削除」ボタンを押してヘッダー画像を表示しないようにします。
「ロゴ画像」のドロップダウンを開いて、ヘッダー画像を登録します。
これでサイト名の代わりに画像が表示されるようになります。

テーマはヘッダーサイズとして980 × 250pxを推奨していますが、
このブログではヘッダー画像を画面いっぱいに表示したいので1900px × 213pxの画像を使っています。

header

画像サイズ制限の解除

しかしデフォルトだと画像の幅が300pxで固定されているので、表示幅を最大にするように下記の設定を加えます。
外観⇒テーマの編集⇒stinger5_child: スタイルシート (style.css)に追加する。

/* ロゴ画像の最大サイズ */
.sitename img {
max-width: 100%;
}

ヘッダーとメニューを画面いっぱいに表示

「nav」の内側に「nav-inner」を追加しました。(ピンク色の部分)
「wrapper」を移動させてヘッダーとメニューを画面いっぱいに表示できるようにします。(オレンジ色の部分)
移動前の部分はコメントアウトしていますので参考にして下さい。

stinger5_child: ヘッダー (header.php)を修正

<!– アコーディオン –>
<nav id=”s-navi” class=”pcnone”>
<div class=”header-nav-inner”>
<dl class=”acordion”>
<dt class=”trigger”>
<p><span class=”op”><i class=”fa fa-bars”></i>&nbsp; MENU</span></p>
</dt>
<dd class=”acordion_tree”>
<ul>
<?php wp_nav_menu(array(‘theme_location’ => ‘navbar’));?>
</ul>
<div class=”clear”></div>
</dd>
</dl>
</div>
</nav>

<!– /アコーディオン –>
<!– 下部に移動<div id=”wrapper”> –>
<header>
<!– ロゴ又はブログ名 –>
<p class=”sitename”><a href=”<?php echo home_url(); ?>/”>
<?php if (get_option(‘stinger_logo_image’)): //ロゴ画像がある時 ?>
<img alt=”<?php bloginfo( ‘name’ ); ?>” src=”<?php echo esc_url(get_option(‘stinger_logo_image’)); ?>” />
<?php else: //ロゴ画像が無い時 ?>
<?php bloginfo( ‘name’ ); ?>
<?php endif; ?>
</a></p>

<!– キャプション –>
<?php if (is_home()) { ?>
<!– <h1 class=”descr”>
<?php bloginfo(‘description’); ?>
</h1> –>
<?php } else { ?>
<!– <p class=”descr”>
<?php bloginfo(‘description’); ?>
</p> –>
<?php } ?>

<!–メニュー–>
<nav class=”smanone clearfix”>
<div class=”header-nav-inner”>
<?php
$defaults = array(
‘theme_location’  => ‘navbar’,
);
wp_nav_menu( $defaults );
?>
</div>
</nav>
</header>
<div id=”wrapper”>

※「【STINGER5カスタマイズ】ヘッダー周りのカスタマイズ 」を参考にさせて頂きました。

次はcssの記述です。

stinger5_child: スタイルシート (style.css)に追加する。

ピンク色の部分を追加する。

/*media Queries PCサイズ
—————————————————-*/
@media only screen and (min-width: 780px) {
.smanone {
display: block;
}
.pcnone {
display: none;
}
#wrapper {
padding: 0px;
}

.header-nav-inner{
max-width: 1000px;
margin: 0 auto;
}

デスクリプリョン(説明文)を消す

stinger5_child: ヘッダー (header.php)を修正

ピンク色の部分を削除するかコメントアウトする。

<!– キャプション –>
<?php if (is_home()) { ?>
<h1 class=”descr”>        
<?php bloginfo(‘description’); ?>      
</h1>            
<?php } else { ?>
<p class=”descr”>         
<?php bloginfo(‘description’); ?>     
</p>
<?php } ?

ヘッダー画像の上の余白を詰める

ヘッダー画像より上の部分の余白はmedia Queries PCサイズのpadding-topを調整。
stinger5_child: スタイルシート (style.css)に追加する。

ピンク色の部分を追加する。

/*media Queries PCサイズ( ヘッダー画像より上の部分の余白を詰める)
—————————————————-*/
@media only screen and (min-width: 780px) {
.smanone {
display: block;
}
.pcnone {
display: none;
}
#wrapper {
padding: 0 40px;
}
header {
padding-top: 0px;
}

グローバルメニューの変更

グローバルメニューに色を付けて、上下の余白の調整をします。
sstinger5_child: スタイルシート (style.css)に追加する。

/*グローバルナビの色と上下の余白の変更*/
nav {
line-height: 2px;
background-color: #98B7F2;
color: #ffffff;
margin-bottom: 20px;
margin-top: -10px;
}

ヘッダー画像を、PCとスマホで切り替える

この方法だとPCでは画面いっぱいに表示されていいんですが、スマホで見ると何が書いてあるのかわからないほど縮小されちゃいますよね。
なので、今回はPCにはこの画像で、スマホにはスマホ用の画像を表示する方法をご紹介します。

▼PCには1900px × 213pxの画像を使っています。
header
▼スマホには645px × 135pxの画像を使っています。
ネットでビジネス最前線、ま~ったり実践案内!!

条件分岐でスマホの画像とPCの画像を切り替える

stinger5_child: ヘッダー (header.php)
<header>の下辺りに記述します。

<a href=”<?php echo get_option(‘home’); ?>/”>~</a>(ピンク色の箇所)は「ホーム」にジャンプします。
ヘッダー画像をクリックしたら「ホーム」に戻るという設定になります。

<p class=”sitename”>
<a href=”<?php echo get_option(‘home’); ?>/”>
<?php if (wp_is_mobile()) :?>
<img src=”http://netdebusiness.mobacawa.com/wp-content/uploads/2015/01/header-s.jpg” alt=”ネットでビジネス最前線、ま~ったり実践案内!!”/>
<?php else : ?>
<img src=”http://netdebusiness.mobacawa.com/wp-content/uploads/2015/01/header.jpg” alt=”ネットでビジネス最前線、ま~ったり実践案内!!”/>
<?php endif; ?>
</a></p>

※「[WordPress]Stinger3のサイト名を、PC画像とスマホ画像で切り替える方法 」を参考にさせていただきました。

ヘッダー周りのカスタマイズは、これでひと段落とします。
次回はお引越しに伴う不具合の修正をします。

シェアする

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

フォローする