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

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

ただいまの
回答率

90.51%

  • WordPress

    8920questions

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

  • CSS

    7526questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

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

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,064

diamonddogs

score 17

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:36

    はい、そうです。

    キャンセル

  • 2016/11/12 15:37

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

    キャンセル

  • 2016/11/12 15:42

    でしたら

    クラスは.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;
    }
    としましたが、画像は表示されません。

    キャンセル

  • 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を指定してみてはいかがでしょうか?

    キャンセル

  • 2016/11/13 17:38

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

    キャンセル

  • 2016/11/13 17:52

    画像のパス指定があっていないんじゃないでしょうか?
    一応指定するセレクタがあってるかどうかのチェックをしましょう。
    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 */
    }
    -------

    キャンセル

  • 2016/11/14 19:56

    .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;
    }
    で赤になっていました。

    キャンセル

  • 2016/11/15 00:54

    反映されるのが遅いのでしょうか?
    .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で赤になることを確認してからやろうと思ってたことですがw
    結果的に見れば指定する箇所はあっていますね。<赤くなったので

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

    キャンセル

  • 2016/11/15 17:29

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

    キャンセル

  • 2016/11/15 23:09

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

    キャンセル

  • 2016/11/15 23:38

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

    キャンセル

  • 2016/11/16 18:30

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

    キャンセル

  • 2016/11/16 18:39

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

    キャンセル

  • 2016/11/16 18:41

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

    キャンセル

  • 2016/11/16 18:42

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

    キャンセル

  • 2016/11/16 18:48

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

    キャンセル

  • 2016/11/16 18:51

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

    キャンセル

  • 2016/11/16 18:52

    こんなふうに並べる感じですね。
    -------
    .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です。

    キャンセル

  • 2016/11/17 00:02

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

    キャンセル

  • 2016/11/17 00:16

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

    キャンセル

  • 2016/11/17 00:17

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

    キャンセル

  • 2016/11/17 00:39

    サイズをつけるんですね。
    あと、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;
    }
    -------
    逆に今までサイズ指定はどう書いてたんですか?

    キャンセル

  • 2016/11/17 17:12

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

    キャンセル

  • 2016/11/17 17:14

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

    キャンセル

  • 2016/11/17 17:17

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

    キャンセル

  • 2016/11/17 20:29

    サイズ: 1600 × 1066です。

    キャンセル

  • 2016/11/17 21:38

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

    キャンセル

  • 2016/11/17 21:40

    はい、おっしゃる通りです。
    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 サイトタイトルをテキストから画像に置き換える方法

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • WordPress

    8920questions

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

  • CSS

    7526questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。