STINGER WordPress ブログカスタマイズ

【WordPress】STINGER PLUSのヘッダー画像をサイト幅いっぱいにしてスライドショーを表示する

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

f:id:d3dayo:20170922015252p:plain

この記事は大人気WordPressテーマ「STINGER」シリーズのSTINGER PLUSに関するカスタマイズ備忘録です。

実は私、いま川島千夜さん (id:kawashimachiyo)のお仕事用WordPressサイトのリニューアルをお手伝いさせて頂いております関係で、久しぶりにSTINGERを思う存分弄っております。

STINGERと言えば、無料で使えるWordPressテーマとして大人気ですが、今回カスタマイズしているのは少し前のバージョンであるSTINGER PLUSでございます。現行のバージョンは確かSTINGER8が無料テーマで、STINGER PROが有償テーマだったかな?

少し前のテーマに関する情報となりますが、私自身の備忘録としてデザインカスタマイズのメモを残しておきたいと思います。

さいしょに

さて、今回カスタマイズをお手伝いさせて頂いている川島千夜さん (id:kawashimachiyo)のお仕事用HPですが、千夜さんは「書く人であり描く人」であります。トップページにはドカンとヒキの強いお知らせを入れたい。

f:id:d3dayo:20170922002536p:plain
http://officekawachiyo.com

なので、現在はトップページのヘッダー画像をこのように幅いっぱいにして、作品に関するお知らせがインパクト大のファーストインプレッションとして入ってくるようにしています。

さらに、このトップ画(ヘッダー画像)はSTINGER PLUS標準の機能でスライドショー表示させることができるので、複数枚の画像を使ってそれぞれの作品に関するお知らせを表示しています。

今回はこのデザインへとカスタマイズする手順を備忘録として残します。

header.phpを編集する

WordPressの管理画面から外観→テーマの編集と選択していきheader.phpを開きます。
子テーマやバックアップについては説明を省きますが、作業前には失敗しても戻せる状態にしておいてから作業しましょう。

まずはheader.phpの中から以下のコードを見つけます。

<div id="wrapper" class="<?php st_wrap_class(); ?>">

上記のコードをheader.phpの一番下にある

の下に切り取り→貼り付けで移動させます。
移動させるとこのようになります。

</header>
<div id="wrapper" class="<?php st_wrap_class(); ?>">

次に以下のコードを

<div class="inner clearfix">

<div class="clearfix" id="headbox">の下に新たに追記してこのようにします。
WindowsならCtrl+F5キー同時押しで「headbox」をページ内検索すると、すぐに見つかります。

<div class="clearfix" id="headbox">
<div class="inner clearfix">

最後に閉じとして

</div><!-- /#inner clearfix -->

上記コードを</div><!-- /#header-r -->の下に挿入してこのようにします。
WindowsならCtrl+F5キー同時押しで「#header-r」をページ内検索すると、すぐに見つかります。

</div><!-- /#header-r -->
</div><!-- /#inner clearfix -->
</div><!-- /#clearfix -->

これでheader.phpの編集は完了です。

styles.cssを編集する

header.phpを編集して、ヘッダー画像を画面幅いっぱいに広げて表示する下準備ができたので、仕上げとしてstyles.cssに以下のコードを追記してヘッダー画像の表示を画面幅いっぱいにカスタマイズします。
styles.cssについても子テーマやバックアップについては説明を省きますが、作業前に戻せる状態を作ってから作業しましょう。

/*ヘッダー画像を画面いっぱい広げる
--------------------------------*/
.inner {
max-width: 1060px;
padding: 0 10px;
margin: 0 auto;
}
#headbox {
padding: 0;
margin: 0;
}
#gazou-wide {
margin: 0;
}
#gazou-wide img {
width: 100%;
}

上記コードをstyles.cssに追記してファイルを更新すれば、このようにヘッダー画像が画面幅いっぱいに表示されるようになります。

f:id:d3dayo:20170922002536p:plain
http://officekawachiyo.com

スマホでみるとこんな感じになります。

f:id:d3dayo:20170922011824j:plain:w318
http://officekawachiyo.com

ヘッダー画像をアップロードしてスライドショーをする

この手順はコードの編集なしでWordPressの管理画面上の操作だけで行なえます。
STINGERシリーズはコードを弄るのが不得意な人でもデザインの変更が簡単に行えるよう、カスタマイズ画面での設定項目が充実しています。

ヘッダー画像のアップロード

ヘッダー画像のアップロードはWordPressの管理画面から外観→カスタマイズと選択していきヘッダー画像からアップロードします。

f:id:d3dayo:20170922012522p:plain

スライドショーにする場合は、ここに複数枚の画像をアップロードすればOKです!

スライドショーの設定

デフォルトでは、ヘッダー画像を複数枚アップロードしてもスライドショーとしてヘッダーは表示されません。
理由は設定で無効になっているからです。

スライドショーでヘッダーを表示させたい場合には、WordPressの管理画面からSTINGER 管理を選択し、「スライドショー設定」から「ヘッダー画像をスライドショーで表示する」をONにする必要があります。

f:id:d3dayo:20170922013137p:plain

おわりに

以上、STINGER PLUSのヘッダー画像をサイト幅いっぱいに広げてスライドショーを表示するためのカスタマイズと設定について書かせて頂きました。

wp-fun.com

こちらの記事では、ワンプッシュで閲覧者にメンテナンス中の画面を表示することができるWPプラグインを紹介しています!
www.d-3.site

でででーさん
2017年2月21日はてなブログでカキタクナッタラ開設。2017年10月22日にWordPressへ移行しました。IT関係のネタをメインにラーメンのことや雑談記事など幅広く書きます。たまに変なイラストを描いたりウェブ制作をすることもあります。