STINGER

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

投稿日: 更新日: 2017年11月01日

実は私、いま川島千夜さん (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の中から以下のコードを見つけます。

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

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

次に以下のコードを

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

最後に閉じとして

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

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

 

styles.cssを編集する

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

上記コードを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のヘッダー画像をサイト幅いっぱいに広げてスライドショーを表示するためのカスタマイズと設定について書かせて頂きました。

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