現在の接続環境は
です

記事内にプロモーションが含まれています。

プロモーションを含みます

Stinger6 Stinger7 WordPress カスタマイズ カスタマイズ 備忘録

背景画像の設定方法

WordPressのStinger6とStinger7で背景画像を設定する方法

所要時間目安：約2分

This session is using　 IPv4 　is established in

この記事は2016年5月18日のものです。現在は状況が異なる可能性がありますのでご注意ください。

目次に行く･戻る

2025年4月1日 (火曜日)本日の人気記事トップ１０

2025年4月1日 (火曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    コンタクトフォーム 1PV

    お問い合わせは以下よりお願いします。 お問い合わせメールフォーム お問い合わせメールフォーム お問い合わせ IPアドレスは上記ページ訪問にて記録されます。 もしくは以下よりお願いします。 お問い合わせ…

    もっと読む

  2. 2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り 1PV

    これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…

    もっと読む

  3. プラリシート補修前ステアリングエクストレイルV字部分全体

    車の内装インパネ破損修理にプラリペアとプラリシートがおすすめ 1PV

    車の内装インパネやあバンパーなどFRP樹脂やABS樹脂などのプラスチック製品の破損時に簡単に接着剤よりも強力にくっつく補修剤があることを知りませんでした。よく内装のインパネなどを剥がして配線処理などを…

    もっと読む

  1. エンジンスターターリモコン

    カーメイトのエンジンスターターでエラー15表示と対処方法 34PV

    夏冬に特に重宝するのが、エンジンスターターです。 メーカーはCARMATEやCOMTECユピテルなど各社ありますが、一番のオススメはリモコンから多くの情報を得ることができるカーメイト製品です。 なぜか…

    もっと読む

  2. エクストレイルT32運転席側バイザーメッキモール剥がれ修復方法とオススメ両面テープ 20PV

    車の購入後、乗ろうが乗らまいが経年劣化というものは付きものなのですが、特にプラスチック部分や両面テープ部分などは経年劣化がどうしても起きてきてしまいます。 そんな車でも長めにお気に入りの愛車となれば長…

    もっと読む

  3. アイドリングストップシステム異常警告灯表示対処方法 19PV

    2010年前後以降の車に搭載されていることの多いアイドリングストップシステム。各自動車メーカーによって呼び名は異なりますが、機能としては信号待ちが長い時や停止時間が長い時などに勝手に（自動的に）アイド…

    もっと読む

  1. 間違いメールと迷惑メールとフィッシング詐欺メール判断方法

    コンタクトフォーム 1PV

    お問い合わせは以下よりお願いします。 お問い合わせメールフォーム お問い合わせメールフォーム お問い合わせ IPアドレスは上記ページ訪問にて記録されます。 もしくは以下よりお願いします。 お問い合わせ…

    もっと読む

  2. 2025年4月1日から「車庫証明ステッカー」廃止、交付手続きは従来通り 1PV

    これまで1991年に導入された車庫証明の車の貼り付ける車庫証明ステッカーシールは廃止されます。車のナンバーから車庫証明の有無が確認できるようになったためのようです。ただし、新車購入時や中古車購入時など…

    もっと読む

  3. プラリシート補修前ステアリングエクストレイルV字部分全体

    車の内装インパネ破損修理にプラリペアとプラリシートがおすすめ 1PV

    車の内装インパネやあバンパーなどFRP樹脂やABS樹脂などのプラスチック製品の破損時に簡単に接着剤よりも強力にくっつく補修剤があることを知りませんでした。よく内装のインパネなどを剥がして配線処理などを…

    もっと読む

カーメンテナンスWAKO'S

今日は2025年4月1日です。

メルカリ招待コード：

背景画像の設定方法

WordPressの無料テーマで有名なStingerがあります。
現在での一番新しいバージョンはStinger7ですが当ブログにおいては今のところStinger6を使用しています。

背景に画像を設定しようかなぁと思い何気にただ単にCSSにbackground: url(https://画像のUpload先);というようにしてその他のオプションを指定していました。

そしたら、もちろんweb上では指定通りに背景画像が表示されましたが、新規投稿の追加で投稿する画面でテキストエディタの場合には特に問題はないのですが、ビジュアルエディタにおいてはweb上でのみ表示されれば良い背景画像が新規投稿の背景にも背景画像が設定されてしまいました。

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ


しょうがなく、Stingerの背景画像の設定からcustom.background-imageという形で設定しました。

 

外観→背景から背景画像のアップロードをして保存します。

WordPressStinger背景画像設定方法

ですが、表示形式が背景画像の固定もしくはスクロール、そして背景画像の設置位置のみの設定しかできません。

それだけだと私が使用してみようと思った背景画像の場合はちょっと微妙にイマイチな感じ…。
なのです。

 

はじめに解決方法・背景画像の設置方法・設定方法を記載すると、

 

body {
 background-size: cover !important;
 background-attachment: fixed !important;
 }

以上のようにすると管理画面の新規投稿のビジュアルエディタにても背景画像が表示されなくなります。

なるべくなら!importantは使用したくはないですがしょうがないです。

 

そして、

失敗？でもないのですが以下のように直接CSSに記載してもweb上では問題なく表示されます。

 

しかし、上記したように管理画面から新規投稿の追加でビジュアルエディタの際にバックグラウンドに背景画像が表示されてしまいます。

背景画像が濃紺色でなければそれほど見難くはありませんが、ちょっと濃い目の背景画像だと自分の書いている文字が見難くなってしまいます。

ちなみに、失敗？のCSSの記載例は以下です。

 

body {
 min-width: 320px;
 word-wrap: break-word;
 background: url(https://画像のUpload先) repeat center center fixed;
 background-position-x: 50%;
 background-position-y: 50%;
 background-size: cover;
 background-repeat-x: repeat;
 background-repeat-y: repeat;
 background-attachment: fixed;
 background-origin: initial;
 background-clip: initial;
 padding-left: 20px;
 padding-right: 20px;
 }

 

こうすると、管理画面の新規投稿の追加のビジュアルエディタの背景に設定した背景画像が表示されてしまいます。

 

こんな感じです。

背景画像の設定方法

背景画像にもよりますがものすごく見にくいです…。
テキストエディタにて投稿する方は問題ありませんが、私はまだまだ初心者で時と場合によって使い分けるのでちょっと困ってしまいます。

なので、
しょうがなく!importantを使用してなかば強制的に優先度を上げて設定します。

すると、通常通りの投稿画面になります。

背景画像の設定方法に困っている方はお試ししてみてください。

 

背景色のみの設定変更であれば直接CSSに記載しても特に!important指定は使用しなくても問題ありません。

 

背景色のみの設定方法は簡単で以下のように記載するだけでOKです。

 

body {
 min-width: 320px;
 word-wrap: break-word;
 background-color: #000000;
 }

この場合はバックグラウンドの背景色が黒になります。

background-color:の#の後のカラーコードを変更するだけで自分の好きな背景色に設定変更ができます。

背景色のみ変更したい場合は、
上記のようにbackground-color:の指定のみで問題ありません。

 

背景色のみの設定変更したい方は試してみてください。
以上、背景色と背景画像の設定方法・設定変更方法でした。

【AmazonスマイルSALE】！


3/28(金)9時から4月1日（火）23時59分まで、「AmazonスマイルSALE」開催予定

3月28日(金曜日) ～ 2025年4月1日(火曜日) 23:59まで

Windows10サポート終了まで

あなたにおすすめな関連記事

カーナビテレビが見れなくなったICカードが正常に動作しませんでした

メンテナンス 伝えたいこと 備忘録 車

ナビテレビが見れなくなった時ICカードが正常に動作しませんでした対処方法

本日ではなく昨日になってしまいますが、それまでカーナビで地デジ対応のナビで突然エンジンをかけなおしたら・・・・・・。 「ICカードが正常に動作しませんでした。販売店にお問い合わせください。」 なんてい…

もっと読む

インフィード広告アドセンス

市川海老蔵妻小林麻央さんの病状について

伝えたいこと 備忘録 時事ネタ 治療

小林麻央さんの病状が気になりますが、海老蔵さんの記者会見のお願いを守ってマスコミは対応して見守って!!

先日2016年6月9日に、市川海老蔵さんの妻小林麻央さんの病状についての記者会見が行われました。 これはもう周知の事実だと思います。そして、その際に病名までもしっかりと報告されていました。10年前くら…

もっと読む

インフィード広告アドセンス

お正月の門松や鏡餅などのお飾り商品

伝えたいこと 備忘録 時事ネタ

クリスマスやお正月のお飾りなど年末年始に準備するもの一覧

もう12月も中旬を過ぎてしまいました。あと2週間もすると2017年という新年を迎えます。 早いものですね・・・・・・。お正月には、おせち料理やお飾りなどいろいろと準備するものが意外と多くあります。そこ…

もっと読む

インフィード広告アドセンス

画像にマウスオーバーした時にゆっくり透過させる方法

WordPress カスタマイズ 伝えたいこと 備忘録

画像にリンクがある場合にCSSだけでゆっくりと透過させる方法

リンクが付いたテキストや画像にマウスを乗せた時（マウスオーバー時）に、 いろんなアニメーショや何かしらの効果があると…。 なんだかカッコいいサイトになった気分になりますよね。 そこで今回は、WordP…

もっと読む

インフィード広告アドセンス

AMP化対応スマホ画像

WordPress カスタマイズ カスタマイズ スマホ 伝えたいこと 備忘録 時事ネタ

AMP化対応したらアクセス数増えるの減るの？減ったのは気のせい？

先日、一応記事としてAMP化対応方法に関して記載いたしました。 AMP化対応方法 AMP化対応完全版 しかし、初回のときはうまくAMP化対応できずその都度改善修正を行ってきました。 でも、AMP化対応…

もっと読む

インフィード広告アドセンス

大山式ボディメイクパット趾

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ テーマ 備忘録

WordPress自分のショートコード備忘録

現在の自分が使用しているテーマでの、 ショートコードを用いてテンプレートからショートコードを用いて任意のコードを表示させる方法の備忘録です。

あなたが訪問してから

⏰ 0 秒経過 🎉

「Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 備忘録」の人気記事

入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？

ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。

おすすめ！！

世界中でNo.1のシャアを誇るAmazonでのお得なお買い物でお得をしよう！！ネット通販なので、もちろん24時間年中無休です。健康商品から食品、車カスタマイズ商品、大手家電メーカー商品やパソコンの自作サプライ商品、その他アマゾン・プライムでは映画やドラマなど多くの作品や番組を見ることができます。マスクなど衛生商品も今では必須アイテム。一番信用できて一番商品数の多いAmazonでの買い物が絶対にオススメ！！

詳細ページへ

No.1シェアAmazon

おすすめ2

楽天による季節特集です。それぞれの季節ごとにお得なお買い物商品やお得な旅行商品、その他にもAmazon同様に国内最大の買い物ポータルサイトです。楽天をメインにお買い物されている方はポイントやSPUも貯まりさらにお得に！！楽天カードや宇佐美系列のガソリンスタンドでも楽天ポイントが今では貯まります。それらのポイントを貯めてお得にお買い物や旅行商品その他にもパソコンサプライや車カスタマイズ商品など楽天も充実しています。

詳細ページへ

楽天市場

ブログサービスが始まってから:


カウントダウンタイマー

おすすめの記事一部広告


お小遣い稼ぎにアンケート。

Multiplex 広告

Total562


アドセンス336pxPC閲覧記事下表示1つ目コード

目次に戻る

よろしかったらシェアよろしくお願いします。

この記事タイトルとURLをコピー

-Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 備忘録

目次に戻る

目次に戻る

コメントを閉じる

comment

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


This site uses Akismet to reduce spam. Learn how your comment data is processed.