wordpressのタイトルの背景画像を設定する方法

Question

wordpressのタイトルの背景画像を設定する方法

受付中

回答 2

投稿 2016/11/12 15:15 ・編集 2016/11/20 22:56

評価
クリップ 0
VIEW 2,512

diamonddogs

score 23

wordpressのテーマのTwenty Twelveのカスタマイズで、タイトルの背景画像を設定したいのですが、
テーマーのstyle.cssの一番後ろに

.site {
 background-image:url(画像のURL);
 background-repeat: no-repeat;
}

に追加したのですが、タイトルの背景画像を設定できません。因みにヘッダー画像ではありません。

こういうヘッダーを作りたいです。

]

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 2 件

評価が高い順
新着順
古い順

+3

<h1 class="site-title"><a href="https://wp-themes.com/" title="Theme Preview" rel="home">Theme Preview</a></h1>

↑タイトルとはこちらの箇所でしょうか？

投稿 2016/11/12 15:30

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/11/12 15:36

はい、そうです。

はい、そうです。

キャンセル
2016/11/12 15:37

タイトルの背景に画像を配置したいんです。
wordpressというタイトルなら、タイトルの背景に画像を配置しタイトルが画像の上に重なる形です。

タイトルの背景に画像を配置したいんです。 wordpressというタイトルなら、タイトルの背景に画像を配置しタイトルが画像の上に重なる形です。

キャンセル
2016/11/12 15:42

でしたら

クラスは.siteではなく.site-titleになるかと思います。

でしたらクラスは.siteではなく.site-titleになるかと思います。

キャンセル
2016/11/12 15:56

成る程、分かりました。
後ほど連絡します。

成る程、分かりました。後ほど連絡します。

キャンセル
2016/11/12 16:23

明日連絡しますが大丈夫でしょうか？

明日連絡しますが大丈夫でしょうか？

キャンセル
2016/11/12 16:32

はい、大丈夫です。

はい、大丈夫です。

キャンセル
2016/11/13 12:56

.site-title {
background-image:url(画像のURL);
background-repeat: no-repeat;
}
としましたが、画像は表示されません。

.site-title { background-image:url(画像のURL); background-repeat: no-repeat; } としましたが、画像は表示されません。

キャンセル
2016/11/13 12:56

連絡が遅くなりすみません。

連絡が遅くなりすみません。

キャンセル
2016/11/13 13:50

.site-title {
background-image:url(画像のURL);
background-repeat: no-repeat;
width:200px;
heihgt:200px;
}

のように、widthやheightを指定してみてはいかがでしょうか？

.site-title { background-image:url(画像のURL); background-repeat: no-repeat; width:200px; heihgt:200px; } のように、widthやheightを指定してみてはいかがでしょうか？

キャンセル
2016/11/13 17:38

width:200px;
heihgt:200px;
を追加したのですが、ロゴのタイトルの背景に写真が表示されません。

width:200px; heihgt:200px; を追加したのですが、ロゴのタイトルの背景に写真が表示されません。

キャンセル
2016/11/13 17:52

画像のパス指定があっていないんじゃないでしょうか？
一応指定するセレクタがあってるかどうかのチェックをしましょう。
background-imageを外して下記のCSSを入れてください。
画像を表示したい場所が赤くなれば指定するセレクタはあっていて、画像のパス指定が間違っている可能性が高いです。
-------
.site-title {
background-color: #f00;
}
-------

画像のパス指定があっていないんじゃないでしょうか？一応指定するセレクタがあってるかどうかのチェックをしましょう。 background-imageを外して下記のCSSを入れてください。画像を表示したい場所が赤くなれば指定するセレクタはあっていて、画像のパス指定が間違っている可能性が高いです。 ------- .site-title { background-color: #f00; } -------

キャンセル
2016/11/13 21:33

明日、実行してみます。

明日、実行してみます。

キャンセル
2016/11/14 18:32

今試しましたが、色が表示されません。

今試しましたが、色が表示されません。

キャンセル
2016/11/14 18:50

Twenty Twelveを覗いて試してみましたがここの指定で色がつくんですよね～
何かで上書きされてるのかな？
これをコピペして貼り付けてみてください。
-------
.site-header .site-title {
background-image: none;
background-color: #f00; /* red */
}
-------

Twenty Twelveを覗いて試してみましたがここの指定で色がつくんですよね～何かで上書きされてるのかな？これをコピペして貼り付けてみてください。 ------- .site-header .site-title { background-image: none; background-color: #f00; /* red */ } -------

キャンセル
2016/11/14 19:56

.site-header .site-title {
background-image: none;
background-color: #f00; /* red */
}

こちらの指定ではいかがでしょうか。

.site-header .site-title {
background-image: url('画像URL');
}

.site-header .site-title { background-image: none; background-color: #f00; /* red */ } こちらの指定ではいかがでしょうか。 .site-header .site-title { background-image: url('画像URL'); }

キャンセル
2016/11/15 00:53

今開いたところ、
.site-title {
background-color: #f00;
}
で赤になっていました。

今開いたところ、 .site-title { background-color: #f00; } で赤になっていました。

キャンセル
2016/11/15 00:54

反映されるのが遅いのでしょうか？
.site-header .site-title {
background-image: url('画像URL');
}
で今やってみましたが、まだ赤くなりません。

反映されるのが遅いのでしょうか？ .site-header .site-title { background-image: url('画像URL'); } で今やってみましたが、まだ赤くなりません。

キャンセル
2016/11/15 01:17

キャッシュが残ってるんですかね？
WinならCtrl＋F5、MacならCommand＋Rでキャッシュを削除してのリロードができるのでやってみてください。

-------
.site-header .site-title {
background-image: url('画像URL');
}
-------
あとこれは赤くなりません。
background-colorで赤になることを確認してからやろうと思ってたことですがｗ
結果的に見れば指定する箇所はあっていますね。＜赤くなったので

ということはurl('画像URL')ここの指定が間違ってる可能性があります。
このスタイルをどこに書いてあるかで変わります。
htmlファイルの中に直で書いていればhtmlからの見て画像がどこにあるか、
外部CSSに書いていれば外部CSSから見てその画像がどこにあるかで指定します。

キャッシュが残ってるんですかね？ WinならCtrl＋F5、MacならCommand＋Rでキャッシュを削除してのリロードができるのでやってみてください。 ------- .site-header .site-title { background-image: url('画像URL'); } ------- あとこれは赤くなりません。 background-colorで赤になることを確認してからやろうと思ってたことですがｗ結果的に見れば指定する箇所はあっていますね。＜赤くなったのでということはurl('画像URL')ここの指定が間違ってる可能性があります。このスタイルをどこに書いてあるかで変わります。 htmlファイルの中に直で書いていればhtmlからの見て画像がどこにあるか、外部CSSに書いていれば外部CSSから見てその画像がどこにあるかで指定します。

キャンセル
2016/11/15 17:29

今、ginさん定時通りにやったら、色も変わり写真も貼ることができましたが、写真の上部しか表示されませんでした。

今、ginさん定時通りにやったら、色も変わり写真も貼ることができましたが、写真の上部しか表示されませんでした。

キャンセル
2016/11/15 23:09

画像が表示されたということはもう一歩ですね～

画像が表示されたということはもう一歩ですね～

キャンセル
2016/11/15 23:38

はい、ありがとうございます。
写真を全体に見せるにはどうすればいいですか？

はい、ありがとうございます。写真を全体に見せるにはどうすればいいですか？

キャンセル
2016/11/16 18:30

今、写真を
width:960px;
heihgt:350px;
と指定したのですが、縦幅が広くなりません。
限界があるのでしょうか？

今、写真を width:960px; heihgt:350px; と指定したのですが、縦幅が広くなりません。限界があるのでしょうか？

キャンセル
2016/11/16 18:39

スレを乗っ取った形になってしまって申し訳ないですが…＜いまさら
「写真の上部しか表示されません」の状態がアバウトすぎて分かりません。
画像が大きすぎてh1の領域では収まりきらないので画像の上部が見えているのか、
h1の領域全体に表示されていなく上部に画像が見えているのか…etc

スレを乗っ取った形になってしまって申し訳ないですが…＜いまさら「写真の上部しか表示されません」の状態がアバウトすぎて分かりません。画像が大きすぎてh1の領域では収まりきらないので画像の上部が見えているのか、 h1の領域全体に表示されていなく上部に画像が見えているのか…etc

キャンセル
2016/11/16 18:41

heihgt :350px;　違う
height :350px;

heihgt :350px;　違う height :350px;

キャンセル
2016/11/16 18:42

画像が大きすぎてh1の領域では収まりきらないので画像の上部が見えている状態だと思います。
アバウトすぎてすみません。

画像が大きすぎてh1の領域では収まりきらないので画像の上部が見えている状態だと思います。アバウトすぎてすみません。

キャンセル
2016/11/16 18:48

background-imageと一緒にこれ「background-size:contain;」も指定してみてください～

background-imageと一緒にこれ「background-size:contain;」も指定してみてください～

キャンセル
2016/11/16 18:51

background-size:contain;をcssに打ち込めばいいのですか？

background-size:contain;をcssに打ち込めばいいのですか？

キャンセル
2016/11/16 18:52

こんなふうに並べる感じですね。
-------
.site-header .site-title {
background-image: url('画像URL');
background-size:contain;
}
-------

こんなふうに並べる感じですね。 ------- .site-header .site-title { background-image: url('画像URL'); background-size:contain; } -------

キャンセル
2016/11/16 20:27

やって見ます。あと、サイズ指定は消しても大丈夫ですか？

やって見ます。あと、サイズ指定は消しても大丈夫ですか？

キャンセル
2016/11/16 21:21

サイズは消してOKです！

あ。
ちなみにサイズってこう書いてました？
-------
.site-header .site-title {
background-image: url('画像URL');
width:960px;
height:350px;
}
-------
仮にこれだとh1要素の大きさ指定なのであったほうが分かりやすいのかな…？
とりあえずあってもなくてもOKです。

サイズは消してOKです！あ。ちなみにサイズってこう書いてました？ ------- .site-header .site-title { background-image: url('画像URL'); width:960px; height:350px; } ------- 仮にこれだとh1要素の大きさ指定なのであったほうが分かりやすいのかな…？とりあえずあってもなくてもOKです。

キャンセル
2016/11/17 00:02

おっしゃる通りに書きました。
.site-header.site-title {
background-image: url('○○○');
background-size:contain;
}
に修正したのですが、写真の上部の部分しか表示されません。

おっしゃる通りに書きました。 .site-header.site-title { background-image: url('○○○'); background-size:contain; } に修正したのですが、写真の上部の部分しか表示されません。

キャンセル
2016/11/17 00:16

画像大きいままです？
画像って横長の画像なんですよね？＜960×350と指定してたので
いったんサイズを付けてみましょうか。

画像大きいままです？画像って横長の画像なんですよね？＜960×350と指定してたのでいったんサイズを付けてみましょうか。

キャンセル
2016/11/17 00:17

あとブラウザって何で見てます？

あとブラウザって何で見てます？

キャンセル
2016/11/17 00:39

サイズをつけるんですね。
あと、localhostで見ています。

サイズをつけるんですね。あと、localhostで見ています。

キャンセル
2016/11/17 16:47

サイズをつけるってどこですか？

サイズをつけるってどこですか？

キャンセル
2016/11/17 16:54

こうです。
-------
.site-header.site-title {
width:960px;
height:350px;
background-image: url('○○○');
background-size:contain;
}
-------
逆に今までサイズ指定はどう書いてたんですか？

こうです。 ------- .site-header.site-title { width:960px; height:350px; background-image: url('○○○'); background-size:contain; } ------- 逆に今までサイズ指定はどう書いてたんですか？

キャンセル
2016/11/17 17:12

ginさんの書いた通りに書いていたのですが

ginさんの書いた通りに書いていたのですが

キャンセル
2016/11/17 17:14

適用しようとしている画像の大きさは横何px、縦何pxですか？

適用しようとしている画像の大きさは横何px、縦何pxですか？

キャンセル
2016/11/17 17:17

そういや結局見てるブラウザってなんですか？
ブラウザとはIEとかfirefoxとかchromeとかのことです。

そういや結局見てるブラウザってなんですか？ブラウザとはIEとかfirefoxとかchromeとかのことです。

キャンセル
2016/11/17 20:29

サイズ: 1600 × 1066です。

サイズ: 1600 × 1066です。

キャンセル
2016/11/17 21:38

そのサイズだと横960pxにしたとき縦は約639pxですよね？
縦横比は関係なく全体を表示したければ、
background-size:100% 100%;
でいけると思います。

そのサイズだと横960pxにしたとき縦は約639pxですよね？縦横比は関係なく全体を表示したければ、 background-size:100% 100%; でいけると思います。

キャンセル
2016/11/17 21:40

はい、おっしゃる通りです。
background-size:100% 100%;でやれば大丈夫ですね！

はい、おっしゃる通りです。 background-size:100% 100%;でやれば大丈夫ですね！

キャンセル
2016/11/20 22:54

参考例を質問文に表示します。

参考例を質問文に表示します。

キャンセル
2016/11/20 23:27

> 参考例を質問文に表示します。
はい。見ました。

> 参考例を質問文に表示します。はい。見ました。

キャンセル
2016/11/21 13:21

こういうのは不可能ですか？

こういうのは不可能ですか？

キャンセル
2016/11/21 13:23

可能ですよ。

可能ですよ。

キャンセル

+2

https://ferret-plus.com/1880
chromeなどのElementやFirefoxのインスペクタのような開発ツールを使えるようになれば色がつかない理由もわかるので、一度学んでみては

追記　11/21 14：00
TwentyTwelve サイトタイトルをテキストから画像に置き換える方法

投稿 2016/11/14 18:40

編集 2016/11/21 13:59

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

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

wordpressのタイトルの背景画像を設定する方法

関連した質問

同じタグがついた質問を見る

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

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

wordpressのタイトルの背景画像を設定する方法

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン