Loading…

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

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

もっと読む

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

Windows10ポップアップ通知

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

Windows10アップグレード通知、ウイルスかとも…。あまりに酷すぎて(強引とも…。)

Windows10が正式にリリースされてから10ヶ月と半月になります。 3月後半ころから多くのWindows7とWindows8(Windows8.1)ユーザー(ユーザ)から悲鳴のような声が上がってい…

もっと読む

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

確定申告の医療費控除

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

確定申告医療費控除申請のインターネット手続き方法とやり方

残すところ1週間で確定申告の時期が終わります。 しかし、医療費控除の申告は特に確定申告の時期ではなくてもできるのを知っていましたか? 年中いつでも担当箇所の税務署がやっている平日であればできるのです。…

もっと読む

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

スマホファースト

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

WordPressアイキャッチ画像を自動で投稿記事に表示する方法

いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。 特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。 …

もっと読む

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

アクセス数

備忘録

アクセス数が増加しない。アクセス数を増加させるには…。

 当ブログを主としてはじめて概ね1ヶ月半程度が経ちました。しかし、 以前のブログに比べてアクセス数は1/10以下程度です。 ちょっと寂しいですが、 それが現状では現実・事実です…。…

もっと読む

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

アクセス数

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

ブログ集客力とアクセス数を増やす方法の記事とは?

誰もが、自分でブログやホームページなどのサイトを作成したのなら誰かに見ていただきたいという気持ちがあると思われます。 そのアクセス数ははじめはほとんどないような状態から徐々に記事やサイト内の充実を図る…

もっと読む

おすすめの記事一部広告

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

Multiplex 広告

おすすめ!!

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

おすすめ2

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

Googleニュース

2024-05-03

Gクラスのカスタム&メンテナンスを得意としているオフィス ケイ ... カー ... スタンダード SAレス 4WD 5MT 届出済未使用 SAレス ...

2024-05-03

そんな悪夢の事態に対応すべく手動の開閉機構が付いているって知ってた? Category 自動車コラム. Tags サンルーフ メンテナンス 故障 · サンルーフに開け ...

2024-05-03

JAFの出動率が高くなるGW. ゴールデンウィークはドライブに最適な季節だが、クルマメンテナンスをするのにもいい季節。クルマの利用者が増えれば、 ...

2024-05-03

原因のひとつがエバポレーターの汚れだ。そこでエバポレーターの清掃&消臭をDIYで実施しよう。 ◇季節の変わり目に臭うクルマのエアコンは寒い冬にはヒーター ...

Total245


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

目次に戻る

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

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

目次に戻る

目次に戻る


コメントを閉じる

comment

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

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