さきはやすみます

やすみたいが口癖

Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする―

      2017/07/06

background

こんにちは。先日のエントリーが、このブログの使用テーマSTINGER3開発者、ENJIさん@ENJILOGの目に留まり、ご本人のサイトでご紹介頂きました。

STINGERの素敵なデザインサイト

なんと、素敵なデザインサイトですって!こんなブログ始めたばかりの初心者中の初心者のサイトがこんなところに載っていいものなのか、かなり恐縮してしまいますが、嬉しいです。ありがとうございます。

STINGER3はもともとすっきりとしたシンプルなデザインでそれはそれで素敵なんですが、どんどんカスタマイズしてください!とご本人も言っているように、自分好みに変えやすいところも素晴らしいです。SEOとかは正直、ぜんぜんわかっていませんが最初からこんなに拡散されたことを考えると、やっぱりすごいみたいです。めちゃくちゃおすすめ。

背景をフルスクリーン写真にする

さてデザイン面のカスタマイズの記録を書く、と言いながら前置きの準備の部分が長かったのですが、いよいよ見た目を変えていきますよ。まずは、背景の変更。

STINGER3のデフォルトの背景は、シンプルに薄いグレー一色となっています。ここを全画面いっぱいの写真背景にしてしまおう!というカスタマイズ。スタイリッシュでおしゃれな海外サイトなんかで、背景フルスクリーンはよく目にしますよね。全面の文字の読みやすさなどに配慮しなければいけないので使い方は難しいですが、インパクトがあって一気に素敵なイメージになるので、憧れていたわけです。

プラグインBackground Manager

やり方は簡単で、プラグイン「Background Manager」を使用して設定するだけ。STINGER3は、なるべくプラグインを入れなくてもいいように、ものすごく工夫を凝らして作らているそうです。開発者様の意図を尊重して、本当はプラグインなしでできればベストなんですが(たぶんCSSでできる)、ビギナーの私には少々ハードルが高くて手っ取り早いプラグインを入れてしまいました。勉強不足ですみません…。

プラグインの入れ方

プラグインとは、Wordpressにインストールして有効化するだけで簡単に機能を拡張できるアプリのようなものです。むずかしいタグの編集がいらないので、初心者に優しい機能ですね。

今回使用するBackground ManagerはWordpressの管理画面から探せます。ダッシュボードのプラグイン→新規追加からBackground Managerを入力して検索、そこからインストールして有効化すれば完了です。

背景画像を設定する

Background Managerを有効化すると、ダッシュボード→外観→背景のページから、フルスクリーン写真の設定ができるようになります。

まずはこんな感じの画面が出てきます。

background manager1

このプラグイン名のすぐ右にあるAdd New Image Setをクリックして、背景に使いたい写真を選びます。複数の写真を選んでスライドショーにすることもできますが、私は一枚だけ設定しました。わかりやすい名前をつけて、Add an Imageからファイルをアップロードし、右側の青いAdd Image Setで保存。

そうしたら最初のSetting画面に戻り、Background Image Setで先ほど作った背景画像imageを選びます。複数写真を選んでいる場合、その下のところから画面の切り替え方法をチョイス。私は同じ写真をすべての背景に使うので関係ないですが、最初のまま真ん中を選んでいます。

 

background manager2

 

その下のActive onはサイトの全ページに背景を表示させたいのですべてにチェック。

さらに、SizeをFull Screenにチェック。Background Image Opacityは背景画像の表示の濃さが変わります。私はそのままの表示にしたかったので100%ですが、0%に近づけるにつれて白っぽく薄くなりますのでお好みで設定してください。

Background Overlayは画像に重ねて水平ラインやドットなどのエフェクトがかけられます。こちらもいろいろ試してお好みで。

ここまでできたら、一番下の変更を保存をクリック。サイトを見てみると、背景フルスクリーン写真が表示されるようになりました。

このプラグインは、固定背景の他にも複数の背景写真の自動スライドショーや、ページによって背景を変える、などの小技もいろいろあるので、いろいろいじって自分の好きなようにカスタマイズすると楽しいと思います。

ヘッダー画像の削除

ヘッダー画像は、デフォルトでは真っ黒のStinger3と書いた画像です。こちらも好きなものに変えられるのですが、背景を写真にしたので更にヘッダーの写真があるとちょっとうるさい印象。私の場合は思い切って削除しました。

削除の方法はダッシュボードの外観→ヘッダーから、一番下のヘッダー画像を削除をクリックして保存するだけです。とっても簡単ですね。

 

これで背景の設定とヘッダーの削除ができました!

背景写真を設定したことでサイドバーやメニューの文字が読みにくくなってしまったので、次回はそれを改善するためにの文字背景を変えるカスタマイズについて書いていきます。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterで早をフォローしよう!

◆noteで日記も書いてます。面白かったらフォローしてね!

 note | 早《saki》

 - ブログ運営

ad

ad

Comment

  1. […] Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする […]

  2. […] Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする― […]

  3. […] >>Stinger3カスタマイズ記録―Background Managerで背景をフルスクリーン写真にする― […]

  4. […] Background Managerで背景をフルスクリーン写真にする […]

  5. […] Background Managerで背景をフルスクリーン写真にする […]

  関連記事

WordPressテーマをSTINGER3 Ladysに変えてみたよ

いままでテーマはSTINGER3をカスタマイズして使っていたのですが、限定公開の …

やらないと絶対損!言葉が主戦場でないクリエイターが、言葉を使えると強い。

最近ブログが楽しいです。 もともと文章を書くのが特別得意とか、好きとか言うわけで …

電球のイメージ
WordPressテーマ「Stinger3」をおしゃれにカスタマイズする!

  ※こちらの記事は以前stingerをカスタマイズしたテーマを使用し …

Contact Form 7が急にエラーになった!解決方法は超簡単なことでした…

最近noteの方が楽しくてこちらはちょっとご無沙汰でした。早です。 先日、仕事の …

STINGER3カスタマイズ記録―メイン、サイドバー、メニューバーの背景を白半透明にする―

STINGER3のカスタマイズ、続きましてはメインウィンドウとサイドバー、メニュ …

Stinger3カスタマイズ記録―子テーマを作成するには?―

前回は、ざっとデザイン変更でやったことを一覧で書きました。 羅列するといろいろあ …

さきはやすみます。っていうブログになりました。

すっごく久しぶりにブログを触りました。 あまりにも触らなすぎてあれこれ忘れている …

Stinger3カスタマイズ記録―ブログタイトルを画像に変更―

こんにちは。 久しぶりにカスタマイズメモを更新したいと思います! ここしばらく本 …