Stinger8

【WordPress】STINGER8のヘッダーを全幅にしたり、サイト名を中心にしたり、画像にする方法!

2017/1/20追記
注:記事内において『サイト名を中央にする』におけるコードが、
意図するコードと異なっていました。
修正をしましたので、うまく中央にすることができなかった方は、
再度ご確認ください。

STINGER8が公開されましたが、
みなさんは乗りかえましたでしょうか?

STINGER8では、カスタマイズしやすくなっている分、
STINGER PLUSや7の同じ方法では、同じようにカスタマイズができなくなっている部分もあります。

まず手始めとして、ヘッダー関係をカスタマイズしていきましょう。

スポンサーリンク
新たにレンタルサーバーを選ぶならこれ!
エックスサーバー
  • 国内シェアNo.1の高速サーバーなのでストレスフリー!
  • 自動バックアップ機能に標準対応で安心運用可能!
気になるポイント!キャンペーン中に契約すれば.com等のドメインを永久無料で使えます!
WordPressでサイトを運用すると重くなりがちですが、使用しているレンタルサーバーのスペックがあまり良くないと、どんなにWordPress側で高速化をしていても、なかなか高速化の成果が反映されません。サイトの表示スピードが上がらない原因がレンタルサーバーの場合は、エックスサーバーにしてみると改善するかもしれません! またサーバー等のバックアップを自動で行っているので、安心してサイトの運用をすることができます! またマルチドメイン、メールアドレスを無制限で使えるというのもうれしいですね。

公式サイトはこちら

とりあえず全幅にしてみる

全幅のメリット

  • 全幅にすることでサイトデザインの古臭さが軽減される
  • サイトカラーをアピールすることができる!

STINGER PLUSや7ではheader.phpをいじってからstyle.cssをいじるという手間がありましたが、
STINGE8ではstyle.cssをいじるだけで、全幅にすることができます。

何もしない状態がこちら

白いですね!
これでもよさそうです。

全幅にしたい場合は以下のコードを、style.cssに入力します。
もちろんカスタマイズする場合は子テーマを使用してください!

#headbox-bg {
          background: #38b48b;
          height:130px;
}

 

 

するとこのような感じになります。

STINGER8の場合は、「headbox-bg」に入力すれば簡単に全幅のカスタマイズできるので、便利ですね。

全幅にしない場合

全幅にはしたくないんだけど…
という方もいると思います。

そのような方は「headbox-bg」の「-bg」を消して、
今まで通りの「headbox」にコードを入力すると全幅にはなりませんので、お試しください。

サイト名を画像にする

サイト名をロゴにするメリット

  1. サイトの印象がガラッと変わる
  2. デザイン性が高くなる

サイト名を画像にする場合は、前までは外観>カスタマイズで簡単に変えることができましたが、
STINGER8ではそうはいきません。
サイト名を画像に切り替えるには、header.phpをいじります。

<?php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>
				<div id="header-l">
				<!-- ロゴ又はブログ名 -->
				<p class="sitename">
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
					<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>
						</a>
				</p>
				<!-- ロゴ又はブログ名ここまで -->
				<!-- キャプション -->
				<?php if ( is_front_page() ) { ?>
				<h1 class="descr">
				   <?php bloginfo( 'description' ); ?>
					</h1>

こちらにある、以下のコードを消します。

<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>

そして消したところに、以下のコードを入力します。

<img src="画像のURLを入れてください">

「画像のURLを入れてください」のところに、サイト名に入れたい画像のURLを入力します。
ちなみにURLはメディアライブラリーから、見つけると簡単です。

完成したコードはこのようになります。

php get_template_part( 'st-accordion-menu' ); //アコーディオンメニュー ?>
	<div id="header-l">
	<!-- ロゴ又はブログ名 -->
	<p class="sitename">
	   <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
	   <img src="画像のURLを入れてください">
      	   </a>
	</p>
	<!-- ロゴ又はブログ名ここまで -->
	<!-- キャプション -->
	<?php if ( is_front_page() ) { ?>
  	 <h1 class="descr">
		<?php bloginfo( 'description' ); ?>
	</h1>

するとこんな感じ

サイト名を中央にする

サイト名を中央にする場合は、いじるのは、style.cssのみです。

以下のコードを入力します。

#header-l {
        padding-top:30px;
	text-align: center;
	float: none;
	max-width: initial;
}

するとこのようになります。

この辺りは、今までとあまり変わりませんね。

全幅にするのは非常に簡単になりました。
みなさんもいろいろと試してみてください。

Stinger8のカスタマイズ記事まとめはこちら!

【プログラミング入門最強の味方】STINGER8カスタマイズまとめ
WordPressのテーマStinger8のカスタマイズ記事が増えてきたので、記事を種類別に分類をしてみました。STINGER8は基本的には、最低限の機能しかないまっさらなテーマです。その分非常にカスタマイズがやりやすく、HTMLやCSS、...

コピペも良いですが・・・

テーマによってはカスタマイズなんて必要ないかもしれませんが、HTMLやCSSの知識あるとないとでは、トラブルがあった時に大きく違ってきます。
コピペも便利ですが、専門の本などを併せて使用すると、理解度がぐっと深まりますよ!

私が使用したおすすめの本はこちらです。


コメント

  1. よしー より:

    ヘッダーを全幅にするところで同じコードを2回繰り返しているのは何か理由があるのですか?
    #headbox-bg {
    background: #38b48b;
    height:130px;
    }

    #headbox-bg {
    background: #38b48b;
    height:130px;
    }

    • ぷるぷるぷるぷる より:

      よしーさん

      2回繰り返しているのには理由はありません。
      誤って同一コードを繰り返して記載しておりました。

      記事の内容は訂正させていただきました。

      ご指摘ありがとうございました。