WordPressの無料テーマで有名なStingerがあります。
現在での一番新しいバージョンはStinger7ですが当ブログにおいては今のところStinger6を使用しています。
背景に画像を設定しようかなぁと思い何気にただ単にCSSにbackground: url(https://画像のUpload先);というようにしてその他のオプションを指定していました。
そしたら、もちろんweb上では指定通りに背景画像が表示されましたが、新規投稿の追加で投稿する画面でテキストエディタの場合には特に問題はないのですが、ビジュアルエディタにおいてはweb上でのみ表示されれば良い背景画像が新規投稿の背景にも背景画像が設定されてしまいました。
スポンサーリンク
しょうがなく、Stingerの背景画像の設定からcustom.background-imageという形で設定しました。
外観→背景から背景画像のアップロードをして保存します。
ですが、表示形式が背景画像の固定もしくはスクロール、そして背景画像の設置位置のみの設定しかできません。
それだけだと私が使用してみようと思った背景画像の場合はちょっと微妙にイマイチな感じ…。
なのです。
はじめに解決方法・背景画像の設置方法・設定方法を記載すると、
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:の指定のみで問題ありません。
背景色のみの設定変更したい方は試してみてください。
以上、背景色と背景画像の設定方法・設定変更方法でした。
関連記事
-
CrystalDiscinfoでHDDが壊れそうかどうか確認方法と対処方法
以前と言っても先月末くらいからパソコンから異音が出始めました。 異音の種類によってもどこら壊れそうなのか概ねの判断・推測ができます。 以前の記事が以下です。 パソコンから異音の原因は…。ガラガラとかウ…
-
Stinger6 Stinger7 WordPress インターネット カスタマイズ テーマ 伝えたいこと 備忘録
ページ表示速度高速化レンダリングブロック解決方法ができた!!
ふぅ~ε=(・ρ・*) フゥ、やっとできた!! ここ数日なんとかサイトのページ表示速度をできるだけ速く高速化したいなぁ。とずぅ~っと考えていました。今日も昨日も記事にしていますが^^;)(汗)…。おそ…
-
PC Windows10 カスタマイズ カスタマイズ 伝えたいこと 備忘録
dynabookEX56/MRDにST1000LM014ハイブリッドHDDに交換・換装したレビュー評価
もう数年前と言うには、ある意味ふさわしくはなくなってきたハイブリッドHDD(SSHD)です。 Seagate社をはじめ東芝製ハイブリッドHDDなど数社が、既に1TBを超えるハイブリッドHDD(SSHD…
-
STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録
RSSにアイキャッチ画像を出力する方法Stinger6、Stinger7、StingerPLUS+版
以前、RSSにアイキャッチ画像を出力する方法という記事を書きました。 RSSフィードにアイキャッチ画像を表示させる方法Feedlyなど WordPressでのブログ運営にして間もなく一年…
「Stinger6, Stinger7, WordPress, カスタマイズ, カスタマイズ, 備忘録」同じカテゴリーの記事一覧
おすすめの記事一部広告
comment