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

Question

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

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

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

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

![]

Answer 1

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

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

Comments

[diamonddogs]

はい、そうです。

[diamonddogs]

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

[ssk]

でしたら

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

[diamonddogs]

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

[diamonddogs]

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

[ssk]

はい、大丈夫です。

[diamonddogs]

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

[diamonddogs]

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

[ssk]

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

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

[diamonddogs]

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

[gin]

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

[diamonddogs]

明日、実行してみます。

[diamonddogs]

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

[gin]

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

[ssk]

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

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

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

[diamonddogs]

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

[diamonddogs]

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

[gin]

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

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

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

[diamonddogs]

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

[gin]

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

[diamonddogs]

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

[diamonddogs]

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

[gin]

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

[date]

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

[diamonddogs]

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

[gin]

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

[diamonddogs]

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

[gin]

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

[diamonddogs]

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

[gin]

サイズは消してOKです！

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

[diamonddogs]

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

[gin]

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

[gin]

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

[diamonddogs]

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

[diamonddogs]

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

[gin]

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

[diamonddogs]

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

[gin]

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

[gin]

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

[diamonddogs]

サイズ: 1600 × 1066です。

[gin]

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

[diamonddogs]

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

[diamonddogs]

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

[gin]

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

[diamonddogs]

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

[gin]

可能ですよ。

Answer 2

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

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