STINGER

STINGER PLUS2のヘッダーをオシャレに!タイトル部分を非表示にして画面幅いっぱいのヘッダー画像だけを表示する

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

今回紹介するカスタマイズ…記事タイトルで表現するのがものすごく難しく感じたでででーさん(@d3_dayo) です!

 
前回のSTNGER PLUS2カスタマイズの記事では、ページトップボタンを画像に差し替えるカスタマイズ手順を紹介しました。

そして今回の記事で紹介するカスタマイズは…まずはスクリーンショットをお見せしたほうが早いかもしれないですね。
 

 
上に貼った画像のように、通常表示されているタイトルテキスト部分は非表示にして、STINGER PLUS2に標準搭載されているヘッダー画像エリアを最上部に持ってきています。そして、ヘッダー画像は画面幅いっぱいに表示している状態です。
 
今回は簡単なCSSの追記、そしてWordPressの管理画面での操作を中心に、上の画像のようなレイアウトにする手順を紹介します。
 
 

スポンサーリンク

STINGER PLUS2

ダウンロード及び規約
STINGER PLUS2は上記のリンクからダウンロードすることができます。
 
 

完成図

冒頭でも完成図の画像をお見せしましたが、改めて今回紹介するカスタマイズを施した後の完成図を施す前・PC・スマホに分けてスクリーンショットでお見せしたいと思います。
 
・カスタマイズする前

 
・PCでの表示1

 
・PCでの表示2

 
・スマホでの表示

 
PCでの表示画像が2枚あるのはSTINGER PLUS2のヘッダー画像は複数枚設定してページをロードするたびにランダムで表示することができるからです。
 
 

カスタマイズ手順

ここから完成図のようなヘッダーエリアにするためのカスタマイズ手順を解説していきます。
 

以下のCSSをstyle.cssに追記する

まずは以下のCSSをstyle.cssに追記します。作業の前には元の状態へ戻せるようにバックアップをとることをオススメします!なお、style.cssへのアクセスはWordPressの管理画面から外観→テーマの編集です。

念のため上記CSSの解説をすると、1つ目のCSSでタイトルテキストが表示される部分を非表示にしています。そして2つ目のCSSでヘッダー画像として設定した画像が画面幅いっぱいに表示されるようにしています(デフォルトでは幅1060pxまででしか表示されないため)
 

「カスタマイズ」からヘッダー画像を設定する

上記のCSSを適用した時点でタイトルテキスト部分が非表示になったかと思います。次にやることはヘッダー画像の設定ですが、コードを編集しなくても管理画面からヘッダー画像を設定することができるので、今回はそっちを使います。
 
WordPressの管理画面から外観→カスタマイズにアクセスします。
 

 
 
カスタマイズの画面を開いたら「ヘッダー画像」を選択し、下のサンプル内の赤枠で囲ったボタンをクリックして画像を追加します。
 

 
なお、ヘッダー画像は複数アップロードすることができます(そしてランダム表示することができる)そして、サンプルではヘッダー画像のサイズを1600×450の画像で設定しています(切り抜きなし)
 
もし、このあたりを考えるのが面倒くさい場合には同じ画像サイズで設定してください。
 

「STINGER+2 管理」でヘッダー画像にトップページへのリンクを設定

仕上げとしてヘッダー画像にトップページへのリンクを設定します。旧バージョンのSTINGER PLUSにはなかった項目ですが、STINGER PLUS2では管理画面から簡単にヘッダー画像へリンクを設定することができます。
 
WordPressの管理画面からSTINGER+2 管理に入りヘッダー画像を選択します。
 

 
 
ヘッダー画像を選択したら「ヘッダー画像のリンク先URL:」にトップページのURLを入力し、最後にページ下の「save」ボタンをクリックします。
 

 
これで全ての作業完了です。
 
 

まとめ

以上がヘッダーのタイトルテキスト表示部分を非表示にして、画面幅いっぱいのヘッダー画像を最上部に表示するためのカスタマイズ手順です。
 
ちなみに、ヘッダー画像を複数枚設定した際に有償のSTINGER PROや旧バージョンのSTINGER PLUSであればスライドショー表示させることができるのですが、このSTINGER PLUS2では機能制限されているようですね。
 
それでもランダム表示にしておけばアクセスするたびに変化が生じて、閲覧者を飽きさせない仕掛けになると思うので、余裕があれば是非ヘッダー画像の複数枚設定も試してみて頂ければと思います。
 
 
以下の記事ではこれまでにブログで紹介したSTINGER PLUS2カスタマイズ記事をまとめています!今回の記事で紹介したカスタマイズ以外にもいろいろと弄れる部分はありますので、こちらもどうぞご覧ください!
 
【誰でも簡単】これまでに書いたSTINGER PLUS2のカスタマイズ記事まとめ | カキタクナッタラ

でででーさん

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

あなたにオススメ