スマホ表示の際にカテゴリー一覧の抜粋記事の文字も大きくしたいです

お世話になっております。

ヘッダーに、ロゴ画像をタイトルのかわりに使用しておりますが、css

<div class=”alignright searchform”>
<?php get_search_form(); ?>

お世話になっております。

ヘッダーにタイトルのかわりにロゴ画像で表示にしております。
ヘッダーのロゴを真ん中あたりにもってきて、同じヘッダーに検索ＢＯＸを作りました。

中央にロゴ画像を入れると、検索ボックスがうまく反映されなかったので、ＣＳＳにて
#site-title {
margin-top: 20px;
margin-left: 400px;
}
上記のように位置を調整致しました。

検索ボックスは、header.phpに
<div class=”alignright searchform”>
<?php get_search_form(); ?>
</div>
で書き込んでいます。

ところが、iphoneで表示したところ、タイトル画像が消えてしまいました。

初心者なので、うまく説明が出来ず申し訳ございません。
よろしくお願い致します。

.alignrightはモバイル時に(タブレットから)非表示になります。

<div class="head-searchform">
  <?php get_search_form(); ?>
</div>

などとして新しくブロックを作り、上記の場合、.head-searchformに対してスタイルをしたほうが良いかと思います。

ちなみにサイドバーに検索ウィジェットがあるなら、jQueryでヘッダに移動させることもできます。

(function($){
  $(function(){
    var search = $("#sidebar .widget-searchなんちゃら");
    $("#header-in").append("<div class='head-searchform'>");
    $("#header-in").find(".head-searchform").append(search);
  });
})(jQuery);

試してないんであれですけど、こんな感じかと。上記は#header-inに入れてますが、#h-topに入れるとかいろいろできます。ロゴ画像がどこに入っているかで重ならないようにしたりできます。
上記の場合、#header-inの最後尾に.head-searchformというブロックを作ってそこにサイドバーから移動してます。
サイドバーにも検索フォームが必要なら、var search = $(“なんちゃら”).clone();とすればよいです。

仮に#h-topにロゴ画像が入っているとすると、

<div#header-in>
  <div#h-top>ロゴ画像</div>
  <div.head-searchform></div>
</div>

という構造になるので重なりません。重ねることもできますが(笑)

Hidekichi様

有難うございます。
<div class=”alignright searchform”>
<?php get_search_form(); ?>
</div>

上記部分を消し、教えていただいた

<div class=”head-searchform”>
<?php get_search_form(); ?>
</div>

をheader.phpに書き込みました。

ところが、cssで、位置を下記のように位置を調整しようとしたところ、

.head-searchform {
margin-top: 10px;
margin-left: 500px;
}

margin-top　10pxとしておりますが、なぜかグローバルメニューと重なってしまいました･･･。

iphoneに検索ＢＯＸは表示されるようになりました！有難うございます。
しかし、サイトタイトル（ロゴ）は表示されないままです。
重なっているからでしょうか？？

何度もお聞きしてすみません。

<div class="head-searchform">
  <?php get_search_form(); ?>
</div>

これをどこに書いたのかと、.head-searchformのcssはどうなっているかで変わります。

> グローバルメニューと重なった
ということから、#headerのブロックの下に追記となっているんじゃなかろうかと想像するのですが、jQueryの説明にも書いたように、

<div#header-in>
  <div#h-top>ロゴ画像</div>
  <div.head-searchform></div>
</div>

こういうのか、

<div#header>
  <div#header-in>
    <div#h-top>A</div>
    B
  </div>
  C
</div>

こんな感じでA〜Cの位置に入れればグローバルメニューと重なることはないと思うんです。もし重なるなら#headerと#navi(グローバルメニュー)は重なっているということになります。

例えば、

<div#header></div>
ここ
<div#nav></div>

このような状態でも正しくcssが書けていたら重なることはありません。重なる原因としてはfloatやposition:absoluteなどが影響しているかと思います。

更に

.head-searchform {
  margin-top: 10px;
  margin-left: 500px;
}

これはあまりよろしくない書き方です。pxというのは絶対値で画面幅がどれだけになっても左マージンが500pxとなります。メディアクエリが入っていても、そのメディアクエリのブレイクポイントにもよりますがどの端末から見ても500pxの位置というのは、横幅が600pxと780pxであった場合、右側のスペースに差異がでます。

ロゴは中央に寄せるということだったんですが、検索ボックスが中央とは限りませんが、真ん中にしたい場合は、

.head-searchform {
  margin: 10px auto;
}

で上下に10pxのマージン、左右は自動でマージンが割りつけられます。ただし、マージンというのは横のスペースなので本来は、
<?php get_search_form(); ?>
によって書きだされた検索フォームの要素に対してマージンを設定します。例えば、

.head-searchform 検索フォームの要素(もしくはID、class){
  margin: 10px auto;
}

こんな感じです。.head-searchformは検索フォームを囲む透明なブロックと考えて下さい。なので.head-searchformは width:100%; padding:5px; あたりが入ってれば本来は重ならないはずです。paddingは別に要りませんけれども(笑)
あわせて高さが指定してあれば、尚良しかと。

ひとまず、検索フォームをheaderの中か、あるいはheaderとグローバルメニューの間に入れるかして、サイトアドレスを公開してもらえれば、cssに対してどうすれば良いかはアドバイスできます。phpは外からは見れないので、正しい位置(想定されている位置)に挿入しておいてもらう必要があります。

Hidekichi　様

有難うございます。
教えていただいた、
.head-searchform {
margin: 10px auto;
}

タイトルをこの方法で中央に寄せました。

head-searchform は、右寄せにしました。

iphone にも反映されました。

絶対値のこともわかっておらず、場所の指定が悪かったようです。

とても勉強になりました。有難うございました。