質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

806閲覧

WordPressでコンテンツエリアの背景のカスタマイズ

mokemoke

総合スコア52

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2019/02/07 04:50

WordPressで無料テーマ「STINGER PLUS2」をカスタマイズしながらサイトを作っております。

固定ページのコンテンツエリアの背景に透過画像をセットしたいと思い、ネット上の情報を参考に
試しておりますが、上手くいかない状況です。

スタイルシートのコンテンツエリアのタグと思われる箇所にbackground-image: URL(画像保存先)を
指定してみましたが、背景が画像に変わりません。

Style.Cssの追記箇所と固定ページのソースを載せますので、アドバイス等頂ければ幸いです。

よろしくお願い致します。

CSS

1 2 /*-------------------------------- 3 PCのレイアウト 4 ---------------------------------*/ 5 6 #wrapper { 7 overflow:visible; /*グローバルメニューの下層リンクを表示する為*/ 8 padding:0; 9 width:100%; 10 } 11 12 #st-header { 13 margin:0 auto; 14 } 15 16 #content { 17 max-width:1114px !important; 18 margin:0 auto; 19 background-image: url(http://localhost/wordpress/wp-content/uploads/2019/02/sonota_back.png); 20 } 21 22 #content-w{ 23 padding-top:10px; 24 } 25 26 footer { 27 width:100%; 28 } 29 30 #footer { 31 margin:0 auto; 32 } 33

HTML

1<div id="content" class="clearfix"> 2 <div id="contentInner"> 3 <main> 4 <article> 5 <div id="st-page" class="post post-274 page type-page status-publish hentry"> 6 7 8 9 10 11 12 <!--ループ開始 --> 13 14 <h1 class="entry-title">演題登録(準備中)</h1> 15 16 <div class="mainbox"> 17 18 <div id="nocopy" ><!-- コピー禁止エリアここから --> 19 <div class="entry-content"> 20 21只今、演題募集登録の準備中です。<br> 22準備が整い次第、公開いたしますので、公開まで暫くお待ちいただきますよう<br> 23お願いいたします。<br> 24 </div> 25 </div><!-- コピー禁止エリアここまで --> 26 27 28 29 30 31 32 33 </div> 34 35 36 37 38

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

最近は、

@media all and (-ms-high-contrast: active), (-ms-high-contrast: none) {
@media all and (-ms-high-contrast:none)
@media only screen and (max-width: 959px) {
@media only screen and (min-width: 600px) and (max-width: 959px) {
@media only screen and (min-width: 600px) {
@media print, screen and (min-width: 960px) {
@media only screen and (max-width: 599px) {

のような感じで、@media を利用して、画面サイズごとに分けられていたと思いますが、正しいサイズの場所に記載していますか?

投稿2019/02/07 05:16

編集2019/02/07 05:17
CHERRY

総合スコア25171

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mokemoke

2019/02/07 06:30

CHERRYさん、こんにちは。 アドバイスありがとうございます。 記述した場所については、正しい画面サイズの階層に記述しておりましたが、 実際の制御が別のPHPで制御していた為、そちらに記述しなおしました。 しかし、思っていた感じとは異なる表示になってしまいました。 自分がやろうとしている事は、固定ページのコンテンツ部分(文章、 入力フォーム等を配置)の背景(何も指定しない状態では白色)に 透過画像をセットしたいのですが、試した結果はコンテンツエリアの さらに背後に透過画像が表示されてしまいました。 ページ全体の背景は指定した色で表示されているので、ページ背景  → 透過背景 → コンテンツエリアの順に表示されている感じ なので、背景画像は殆ど見えていない(コンテンツの白地に隠れてる) 状態です。 引き続きアドバイス頂ければ幸いです。
CHERRY

2019/02/07 06:34

質問に記載された HTML をみると contentInner や main が、content の中にあるみたいですが、これらの部分の CSS で、背景などの指定がついていたりするのではないでしょうか?
mokemoke

2019/02/07 08:05

CHERRYさん、こんにちは。 アドバイスありがとうございます。 ctyle.cssの中身を確認した際、制御は「st-kanricss.php」で行っているコメントが 記述されていたので、こちらのPHPファイルを確認した所、contentInner と mainの タブが記述されておりました。 特に背景に関する記述が無かったので、まずcontentInnerタブの中にbackground-imageを 追記してみましたが、先の返信コメントと同様にページ背景とコンテンツエリアの間に画像が 表示されてしまいました。 続いてmainタブの中にbackground-imageを追記してみましたが、画像は表示されませんでした。
mokemoke

2019/02/15 01:26

CHERRYさん、こんにちは。 その後もPHPとCSSを見直ししながら試してみましたが、中々思うように表示がカスタマイズ 出来なかった為、背景表示とせずに画像のサイズと透明度を見直しし、エリアの先頭に挿入 するように見直ししました。 また、時間に余裕がある時に色々と試してみたいと思います。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問