Xeoryをカスタマイズしてみよう|ヘッダー編その2

セオリー

お問い合わせをいただいたので、久しぶりにXeoryのカスタマイズに関する記事を書きます。

今現在、私はヘッダーにスライダーを使用してるんですが、私の記事通りに設定したらスマホで見た時に表示がおかしくなるというご報告をもらいました。

私はまだまだ知識が怪しいので、そのコードを見ずに、想像して原因を特定することができないので、その件はコードを見せてもらいながら原因を特定していきたいと思います。

で、とりあえず代替案として、ヘッダーに画像を入れてみます。

Xeory Baseでは、初期ではこのような殺風景な感じですよね。
01
で、ヘッダーに画像を入れられるような便利な機能ってXeoryには付いてません。
だからheader.phpに直接書き込みましょう。

まずは幅1200pxの画像を用意します。
そしてメディアライブラリからアップロードします。
テーマのイメージフォルダに入れてもいいです。



で、header.phpを見てみると、ロゴとかソーシャルボタンが書かれてるのが32行目あたりから58行あたりまで。
スタイルシートでコードを見てみると、画面のサイズが991px以下なら

となっていて、親要素に対して画像の幅は100%になると設定されてるので、特にスマホ用の指定をする必要はなさそうです。

この中の一番下に画像を指定するコードを入れます。

画像のurlは変更してくださいね。

02
はい。ヘッダーに画像が反映されました。

しかし、スマホで見ると、クロームはきれに画面に収まるんですが、フォックスだとこのようにロゴと並んで表示されてしまいます。

03
で、私はimgのタグの前に改行タグを入れました。

04
はい。治まりました。

ただ、改行タグを入れるのはちょっと素人くさいですねw
もっといい方法を知ってる方がいたら是非!!教えてくださいw
こちらの記事もどうぞ⇒
Xeoryをカスタマイズしてみよう!ヘッダー編(追記アリ)

セオリー

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ABOUTこの記事をかいた人

りりちこです。福岡在住の主婦で、2児の母です♪ webデザインやネットビジネスでお小遣い稼ぎをしており、稼ぎたい方のサポートもしてます。 詳しいプロフィールはこちらから!