PCページとスマホページで別々のヘッダー画像を使い分ける方法【WordPress】

PCページとスマホページで別々のヘッダー画像を使い分ける方法

先日コメントで「twentytwelveを使用していますが、PC・タブレットのヘッダー画像とスマホのヘッダー画像を違うものにしたいのですが、どのようにしたらよいのでしょうか?」という質問が来ました。せっかくなので記事にしておきます。

私も使っているTwenty Twelveでのカスタマイズになりますが、他の公式テーマでも似たような感じでできるかも?と思います(検証してませんが)。

スポンサーリンク

PCページとスマホページで別々のヘッダー画像を設置する手順

まずは手順を紹介していきます。

  • 画像を用意(PC用とスマホ用)
  • functions.phpで条件分岐を追加する
  • header.phpで画像を設置
  • ブログタイトルや説明文を隠す

という流れになります。

先に画像は用意しておいてアップロードし、画像のURLをメモ帳などにコピペして準備しておいて下さい

素材探しにはこちらの記事もどうぞ。

アイキャッチ画像に使える無料の写真素材サイト【クレジット表記不要】

functions.phpに条件分岐を追加

元々WordPressには「PCページ」と「スマホ・タブレット」を分ける条件分岐がありますが、「PCページ・タブレット」と「スマホページ」で分けた方が色々と都合が良いです。そのため、新しい条件分岐の追加をしておく必要があります。

元々その条件分岐が追加されているテーマもありますので、同じようなコードがないか確認してから追加してみて下さい。

MEMO

functons.phpは記述ミスがあるとサイトが表示されないエラーになりますので、その場合はファイルマネージャー(FTP等)でfunctions.phpを編集前の状態に戻せるようにしておいてから作業すると安心です。

それと初めてfunctions.phpを作成する場合には注意が必要なのでこの記事を先にどうぞ。

子テーマにfunctions.phpを追加する時の注意点

functions.phpに追加するのは次のコードです。

参考:【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう!|Naifix

この記述で「is_mobile」という関数を作成してモバイル端末には「iPhone」「Android」「iPod」・・・を含めるという設定をしておきます。これで準備はOK。

header.phpの編集

子テーマのheader.phpから以下の記述を探します。ここの「h2」はサイトの説明文を表示させる部分です。

上記コードのすぐ下に以下コードを追加。

上記追加できたら「スマホページで使いたい画像のURL」と「PCページで使いたい画像のURL」の部分をそれぞれ使いたい画像のURLに変更して保存。

スタイルシートでタイトルや説明文を非表示にする

最後にCSS(スタイルシート)で元々表示されるブログタイトルや説明文を非表示にしていきます(ヘッダー画像の邪魔になるので)。

追加するコードは以下です。スマホページの見え方・余白なども変更してます(paddingやmarginの部分)。

追加できたら保存して確認を。

ちょっと急ぎで書いたので抜けている部分などがあるかもしれません。上手く行かない場合はコメントもらえるとありがたいです。

以上PCページとスマホページで別々のヘッダー画像を使い分ける方法(Twenty Twelveバージョン)でした。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

PCページとスマホページで別々のヘッダー画像を使い分ける方法【WordPress】”に6件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. cmjn

    しげぞう様

    どちらの質問にもご丁寧に答えてくださり、ありがとうございます!!

    余白はコンテンツが狭くなるのも考えものなので、一度試してみて、見た目が悪くなってしまったら今まで通りでいこうと思います(^_^;)

    改行のスペースについては、高さをいじってみます!
    それでもわからなかったら、また教えてくださいm(_ _)m

    本当にありがとうございました!!

  2. しげぞう 投稿作成者

    cmjn様

    返信ありがとうございます。

    1.スマホの背景色ですがちょっと具体的な部分が分かりませんのでなんとも言えない感じなんですが、先日のコードで背景部分の余白は極力削るようなCSSになってます。というのも、スマホの画面は機種によっては非常に狭くなってしまい、余白を取りすぎると本文のコンテンツ部分がさらに狭くなってしまいます。結果として折り返しが多くなりますので、これを少なくする意味合いのCSSでした。

    CSSの中に599px以下(スマホ用のCSS)という条件分岐して囲ってあるコードがありますが、これを一旦削除してみてどのように変わるか試してもらえますか?599px以下の部分消したらデフォルトのTwenty Twelveの余白になります。

    2.御台の改行スペースですが、おそらく見出しのCSSの「line-height(行間の高さ)」の調整で治るような気がします。実際見てないのでなんとも言えませんが、見出しのコードで行間の調整してみて下さい。もしどうしても分からない場合はサイトのURL教えて下さい。コメント公開時にはURLは削除します。

  3. cmjn

    しげぞう様

    何度も申し訳ありません(汗)
    まず、ヘッダーの件は解決していただき、ありがとうございました。
    また分からないことがあり…2つ質問させていただきます。

    ①pcでは背景を「中央:白、左右:画像(色付き)」に設定しているのですが、スマホでは中央の白部分しか表示されません。
    スマホでも、左右に少しだけ画像の背景を表示させたいのですが、どのようにすれば良いでしょうか?

    ②記事内の見出しが少し長くなるとスマホで見たときに下のように表示されてしまいます。
     (例)
       ワクチンの副作用ほどのくら
     ● 
       いの頻度で発生する?
    このように、見出しが変に改行されスペースが大きく開いてしまいます。
    スペースを縮める方法はありますか?

    たくさん質問してしまい本当に申し訳ありません。
    全然急ぎませんので、お時間があるときに教えていただけたらと思います。
    よろしくお願いいたします。

  4. cmjn

    訂正ありがとうございます!!
    無事にできました!!!
    とても見やすくなり大満足です。
    本当にありがとうございましたm(__)m

    また、分からないことが出てきましたらよろしくお願いいたします!

  5. しげぞう 投稿作成者

    cmjn様

    すみません!header.phpに入れるコードが文字化けしてました。header.phpのコードですが、再度コピペして試してもらえますか?もし上手く行かない場合はお手数ですが、再度コメント頂けるとありがたいです。

  6. cmjn

    しげぞう様
    返信が遅くなり申し訳ございません。
    詳しくまとめてくださり、ありがとうございます!!

    やってみたのですが、まずもともとのヘッダーが消えず、そのすぐ下に新たに追加したpc・タブレットのヘッダーが表示され、ヘッダー画像左側に「is_mobile(){」右側に「endif; ?>」の文字が…

    さらに、pc・タブレットヘッダーのすぐ下にスマホのヘッダーが表示され、ヘッダー画像下に「endif; ?>」の文字が表示されてしまいます。(わかりにくくてすみません)

    合計3つのヘッダーが存在している状態です(;・∀・)

    入れる場所は間違っていないと思うのですが、今までに私がいじったstyle.cssやheader.phpの内容が影響しているのかもしれません。。。