Loading…

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

フォレスト出版
¥2,047 (2024/03/15 08:52時点 | Amazon調べ)

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

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

背景画像の設定方法

所要時間目安:2

This session is using  IPv4  is established in

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

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

目次に行く・戻る

メルカリ招待コード:

背景画像の設定方法

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

 

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

Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 備忘録」同じカテゴリーの記事一覧

あなたにおすすめ

斎藤佑樹投手現役引退表明

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

斎藤佑樹投手現役引退表明。ハンカチ王子と言われて・・・。

昨日の2021年10月1日に、早稲田実業高等学校野球部時代にハンカチ王子と世間で騒がれた斎藤佑樹投手が現役引退を表明しました。甲子園の優勝投手です。高校野球時には夢です。また、当時現在の楽天イーグルズ…

もっと読む

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

カバレッジの問題が新たに検出されました解決方法

WordPress カスタマイズ カスタマイズ テーマ 不具合 伝えたいこと 備忘録 設定

Search Consoleカバレッジに関する問題解決方法AFFINGERなど

時々、Search Consoleからさまざまなエラー報告内容のメールや問題があります。という通知メール内容が来ることがあります。特に多いのがガバレッジに関する問題があります。という通知メール内容が多…

もっと読む

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

桜開花

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

桜開花のライブ配信情報をウェザーニューズさんが中継

そろそろ、3月も終わってしまいます。 しかし、 日本人の楽しみの1つでもあ桜を見る花見があります。今年も桜が全国で開花し始めています。見頃は、 その土地・地方によって異なると思いますがウェザーニューズ…

もっと読む

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

記事上に人気記事表示

AdSense Stinger6 WordPress カスタマイズ

Stinger6トップページ記事間にアドセンス広告を表示・入れる方法

ここのところ WordPressにハマっている私です。 特にまだ始めたばかりなのでカスタマイズに没頭中です。(汗) トップページの記事一覧にダッシュボードのStinger管理よりいくつの記事を表示する…

もっと読む

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

コンタクトフォーム

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

続、プラグインなしでコンタクトフォームを作成方法

  先日、 WordPressでプラグインを使わないでお問い合わせ(先)フォーム(コンタクトフォーム)の作成する方法を記載しました。 (プラグインなし)   WordPressプラ…

もっと読む

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

伝えたいこと 備忘録 治療

肩こりにオススメ電気マッサージ器2種類と保坂尚希プロデュース製品など

現代人だけではなく昔から肩こりや体中のコリには皆さん悩まされるところではないでしょうか。 これまでに使用していたTHIRIVE社製の電気マッサージ器が頭部分の接着が取れてしまいうまく電動の振動が伝わら…

もっと読む

おすすめの記事一部広告

おすすめ!!

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

おすすめ2

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

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

Multiplex 広告

Googleニュース

2024-04-20

2ストローク250ccエンジン搭載・ホンダCRM250ARは、競技用モトクロスマシン・CR250由来の「CRレプリカ」というキャッチフレーズが与えられたCRM250Rの後継 ...

2024-04-20

10年/10万kmのメンテ費用はいくらかかるのか. 2024.04.20 05:47 掲載 ベストカーWeb 34.

2024-04-20

魚津市の遊園地「ミラージュランド」にある大観覧メンテナンス工事が終了し、20日から半年ぶりに営業を再開する。これまで13色に分けて色が塗られ ...

2024-04-20

魚津市の遊園地「ミラージュランド」にある大観覧メンテナンス工事が終了し、20日から半年ぶりに営業を再開する。これまで13色に分けて...

2024-04-20

富山県魚津市三ケのミラージュランドで、園のシンボルとして親しまれている大観覧メンテナンス工事が完了した。ゴンドラ40台をほぼ赤一色に塗り替え、 ...

Total232


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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