現在の接続環境は
です

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

Windows10サポート終了まで

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

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

背景画像の設定方法

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

所要時間目安：約2分

This session is using　 IPv4 　is established in

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

カーメンテナンスWAKO'S

2024年11月21日 (木曜日)本日の人気記事トップ１０

今日は2024年11月21日です。

目次に行く･戻る

2024年11月21日 (木曜日)↓における週間月間人気記事トップ３は？↓

  • 本日
  • 週間
  • 月間
  1. エクストレイルフォグランプの光軸調整後

    エクストレイルフォグランプが下を向きすぎている光軸調整方法 39PV

    人気車種のSUVで日産エクストレイルT32型のフォグランプは、光軸が下を向きすぎているためせっかくLEDフォグランプにしたりHIDにしたりしてもその恩恵をあまりかんじられません。要は、ボンネットが少し…

    もっと読む

  2. Windows10で動かないアプリを動かす方法2 16PV

    先日も書きましたWindows10の不具合？に関することです。 不具合と言うのか仕様と言えば良いのかわかりませんが、とにかくWindows10にアップグレードしたりWindows10に若干古めのアプリ…

    もっと読む

  3. エクストレイルステアリング内のスパイラルケーブル接続部コネクタ

    ステアリング交換とステアリングスイッチの増設と外し方後期型仕様に 9PV

    NISSANエクストレイルは日産の中でも人気のSUV車です。そのエクストレイルは今年の6月8日にT32型の後期型がマイナーチェンジして発売されました。新しい後期型にはメーカーオプションで話題の半分自動…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

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

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

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

    もっと読む

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

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

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

    もっと読む

  3. TRDステアリングTOYOTA純正品

    ハンドルのセンターがズレている時の直し方タイロッドエンド調整による方法 81PV

    ここ最近のハイブリッド車や電気自動車においては、ハンドル（ステアリング）を交換することなどは滅多にないかもしれません。 ですが、個体差というものがあって新車だとしてもハンドルの真ん中の位置がズレてしま…

    もっと読む

メルカリ招待コード：

背景画像の設定方法

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:の指定のみで問題ありません。

 

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

クリスマスまであと…プレゼントは用意されましたか？

🎉 Counting Up! 🎉
Loading...

おすすめ！！

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

詳細ページへ

No.1シェアAmazon

おすすめ2

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

詳細ページへ

楽天市場

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

0

カウントダウンタイマー

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

熱中症応急処置対処方法

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

熱中症の症状と予防方法。そして応急処置および対処方法

さて…。いつの間にか既に7月です。まだ梅雨のはずなのに、大雨による被害が発生してしまっている地域や関東などは水不足の懸念などで10%の取水制限？節水制限とかが出ているようです。そんな中、熱中症になる方…

もっと読む

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

Amazonプライム会員アイキャッチ画像

インターネット 伝えたいこと 備忘録 時事ネタ

Amazonプライム会員になる10のメリットを紹介してみます。

Amazonプライムを見てみる以前に「Amazon（アマゾン）で間違った商品の返品方法」というタイトルで記事にしたことがありますが、 今回はそのAmazon（アマゾン）のプライム会員になるメリットを1…

もっと読む

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

WordPressバックアップとドメイン移行複製方法

WordPress 伝えたいこと 備忘録

ドメイン移行（複製）方法、DupulicaterでスターサーバーwpblogフリーWPから

これまで無料でWordPressを使うことができたネットオウルのサービスであるフリーWPのwpblog.jpドメインのサービスが2022年3月31日で終了の案内がされました。他の無料サービスのフリーP…

もっと読む

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

帯状疱疹治療薬バルトレックス錠

伝えたいこと 備忘録 治療

帯状疱疹の症状と特効薬治療と塗り薬痛みにはリリカで対処方法

昨今、寒くなってきました。 そうなってくると一番メジャーな病気としてはインフルエンザ（ノロウイルスも）ですが、他にも意外と帯状疱疹（ヘルペス）も多くなってきてしまいます。 なぜかは寒くなった為に抵抗力…

もっと読む

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

インフィード広告挿入方法

AdSense AFFINGER4Pro STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

インフィード広告を記事一覧の間に表示させる方法

今月初頭に（上旬）アドセンスの広告表示方法に通常のコンテンツ連動型広告にプラスで、インフィード広告と記事内広告が解禁されました。 以前に、トップページの記事一覧にきれいにアドセンス広告を挿入する方法を…

もっと読む

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

シャープ製の不織布マスク抽選サイト画像

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

シャープ製国内産不織布マスクとN95マスクとコンビニ、薬局、ネットの不織布マスク

もう一昨年になりますね。2020年4月に1回目の緊急事態宣言が発出され、その前は医療現場でさえマスク不足になり街のコンビニや薬局、はたまたネットからもマスクがなくなり国がSHARP（シャープ）に国産の…

もっと読む

あなたが訪問してから

⏰ 0 秒経過 🎉

あなたが訪問してから

0 秒

おすすめの記事一部広告


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

Multiplex 広告

Total411


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

目次に戻る

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

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

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

目次に戻る

目次に戻る

コメントを閉じる

comment

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


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

あと5秒で記事が閲覧できます。

Protected by AFFINGER