サイトのタイトルの2～3行分ほどの空きについて

質問の内容からでは、空きがあるなら削除すれば良いとしか答えられないわけです。
どこにどんなふうに、何が原因でそうなっているのかは状態を見ていない僕らにはわかりませんから。

なので、それが再現できるような設定や、カスタマイズの状況、あるいは公開されて問題が出てるページのアドレスそれらを書いてもらって、僕らが実際に見て、どういう状況になっているのかを確かめ、それが何故そうなっているかを考えたり想像して、ここをこうすれば良いという流れになります。

アドレスを公開できないのであれば、該当部分のhtmlとcss、またそのスクリーンショットとどういう状況で、どうなるのが正解であるかの説明等が必要です。

「空きがあれば削除すればいい」
と思いまして、
「サイトの基本情報」の
１．サイトのタイトル
２．キャッチフレーズ
空白（何も記載しない）にしたのですが、
PC(chrome)で見ると少しの空きができる程度で問題ないのですが、iOSのサファリで見ると2行分強の空きができてしまいます。
ページアドレスを公開できないのですが、今までこういった問題は発生していないでしょうか。
以下に状況のイメージを貼り付けします。
A)サイトのタイトル、キャッチフレーズが記載されている場合→問題ないです

B)何も記載してないのに空きができてしまう→今回の私の問題です。上にかなりの空白ができてしまいます。

以上、恐れ入りますがよろしくお願いいたします。

「空きがあれば削除すればいい」
と思いまして、
「サイトの基本情報」の
１．サイトのタイトル
２．キャッチフレーズ
空白（何も記載しない）にしたのですが、
PC(chrome)で見ると少しの空きができる程度で問題ないのですが、iOSのサファリで見ると2行分強の空きができてしまいます。
ページアドレスを公開できないのですが、今までこういった問題は発生していないでしょうか。
以下に状況のイメージを貼り付けします。
A)サイトのタイトル、キャッチフレーズが記載されている場合→画面上の部分は問題ないです
https://drive.google.com/open?id=0B7Cy7XH6hTzTQk9aSVd3akp4SWs

B)何も記載してないのに画面上の部分にかなりの空きができてしまう→今回の私の問題です。
https://drive.google.com/open?id=0B7Cy7XH6hTzTYjk4R1RtOFN2MXM

以上、恐れ入りますがよろしくお願いいたします。

つまり、ヘッダ部分の、サイトタイトルとディスクリプションをとってヘッダ部分には、フォローボタンがあればそれだけ表示するというような状態にしたいと言うことで、「サイトタイトル」と「ディスクリプション」を何も入れない(カラ)で表示するけれども、そこに高さがあると言うような事ですかね？

基本的に、サイトタイトルとそのディスクリプションは入れたままでも非表示にできます。逆にサイトタイトルは入れておく方が良いです。ブラウザにタイトルが表示されたり、rssで配信する等の時も必要になりますから。

よって、おそらくアプローチの仕方が間違っているかと思います。

非表示にしたいので、その中身(サイトタイトル等)を入れないと言うようなことをしても、そこにhtmlのタグは書きだされます。これ自体は高さを持たないかも知れませんが、もし、非表示にしたいだけなのであれば、

#site-title {
  display: none;
}

#site-description {
  display: none;
}

こうすることで、それぞれが非表示になります。では何故、数行程度の隙間が出たかは#site-description等にmargin-bottomでスペースが設定されているからだと思います。中身をカラにしてもそのタグは出力されるここが問題点かと。

上記でも尚、隙間があるという場合は、おそらくヘッダの要素を囲んでいる親要素の#h-topが高さを持っているからです。

#h-topはmin-height: 100px;として、最低100pxで表示されます。それ以上は小さくなりません。よってヘッダの高さをもっと小さくしたいのであれば、

#h-top {
  min-height: 1em; /*1em = 16px相当*/
  /*あるいは以下
  min-height: unset;
  */
}

などとしておくことで、もしフォローボタンがあったとしてもヘッダ領域は確保されるかと思います。
ではなぜ#h-topに高さが設定されているかですが、これはヘッダ画像を利用する際に、背景画像として適用するからです。背景画像はその画像が入る親要素に高さがない場合は表示されません。

高さがないということは、表示領域がないと言うことです。imgタグの場合は、デフォルトでインライン要素でSimplicity等ではblock要素になっているかと思いますが、この場合はこれ自体が親要素を押し広げますので親要素に高さがなくても最低限imgの高さや幅になりますが、背景画像はあくまでその要素の背景なので、表示領域を作る必要があるということです。

ここらの理由でSimplicityでは#h-top(#site-title等の親要素)に最低100pxの高さが仕込んであります。
ちなみにcssは子テーマstyle.cssに追記して下さい。

> 今までこういった問題は発生していないでしょうか。

問題が発生しないのではなく、タイトル(#site-title等)をカラにすることは本来想定していないので質問として出てこないと言う事かと思います。なので「問題自体にならない」と言うわけです。

おそらく過去には「サイトタイトルを非表示にしたい」と言うような質問はあったと思います。この場合は、僕らは「非表示にしたいならcssで消せば良いじゃん」として答えますから、同様の問題は出てきませんよね？タイトルは表示されているけれども非表示にしたいというわけですから。

MIKA さんの場合は、ここが、「非表示にしたいから中身を入れなければ良い」と言うアプローチを想像されたんだと思います。それは間違いではありません。ただしそこには条件が付くのです。「中身がカラでもタグは出力されるので、タグにマージン等のスペースが設定してある場合はそのプロパティは反映される」ここが考慮すべき部分です。

こういうのはあるんですよ。「非表示にするけれども、後から何かを挿入するのでタグ自体は残しておこう」jQueryやjavascriptをいじっているとそういうことはよくあります。非表示にしてしまうと、またそのタグも含めて挿入しないといけませんし、とても面倒です。

何かしらを挿入した時にその文字(画像)分が増えることになるので、増えた高さ分、他の要素や画面がちょっとズレて格好良くないと言う場合もあります。そう言う場合は、要素のスペース(高さ)を確保した上で、中身をカラにすると言うのはあり得ます。

なので考え方自体は間違ってませんが、今回の質問のゴールに近づくためにはアプローチの仕方が間違っていたという感じになります。

すごく丁寧に返信くださりありがとうございました！
アプローチの仕方が間違っていたとのことご指摘くださいましてありがとうございました。
すごく勉強になります、また、感謝しています。

早速ですが、以下のようにstyle.cssを変更してモバイルで確認したのですが、状況が変わりません。
相変わらず、モバイル(iPhone6s SAFARI)で閲覧しても、上の隙間が存在します。
site-descriptionでcolorを削除していて、色がなくなっているので設定の変更は反映されているとは思うのですが。
また、サイトのタイトルやキャッチフレーズも記載してもHPに出力されてないので設定の変更は反映されていると思います（これもすごくしたかったことなので、助かりました）。

●以下、結果のイメージです
https://drive.google.com/open?id=0B7Cy7XH6hTzTd3lrLXNsT1IzZE0

●以下、変更箇所です
wp-content/themes/simplicity2/style.cssの以下の個所を変更しました。
サブディレクトリ管理をしていますが上記の変更箇所で問題無いでしょうか。
domain/abc/
domain/def/
domain/ghi/
のような感じです。
※「cssは子テーマstyle.css」の意味が少しわかりませんでした。

１．site-title

#site-title{
  margin-top:16px;
  margin-bottom:10px;
  font-size: 30px;
  line-height: 100%;
}

を

#site-title {
  display: none;
}

に変更しました。

２．site-description

#site-description{
  margin-top: 0;
  color: #777;
  margin:0;
  padding:10 0;
  line-height:140%;
  font-size:15px;
  margin-right:20px;
  margin-bottom:10px;
  font-weight:normal;
}

を

#site-description {
  display: none;
}

に変更しました。

３．h-top

#h-top{
  min-height:100px;
  overflow:hidden;
  background-repeat: no-repeat;
  background-position: top left;
  position: relative;
}

を

#h-top {
  min-height: 1em; /*1em = 16px相当*/
  /*あるいは以下
  min-height: unset;
  */
}

に変更しました。
※上記書いていただいた２つの方法を試してみました。

　　min-height: 1em;
　　min-height: unset;

以上、お忙しいところ恐れ入りますがなにとぞよろしくお願いいたします。

> ※「cssは子テーマstyle.css」の意味が少しわかりませんでした。

わからなかったらや聞いてもらえたら面倒なことにならずに済んだのかも知れませんが、もし既にやってしまってたらしょうがないので、子テーマについて説明します。

まぁ僕がここで書くまでもなく、この公式サイトのサイドバーの上の方にボタンがあるのでそこを読んでもらえればわかるのですが、wordpressは親テーマと子テーマがあって、子テーマの方はoptionです。基本的には親テーマだけで全て動作します。

では子テーマは何かと言いますと、その親テーマの機能を拡張するものです。と言っても子テーマを導入して有効にしたからと言って何も変わりません(ウィジェット等の設定は親テーマと別テーマ扱いなので再度設定が必要です)が、決定的に違うことが1つあります。

「親テーマはアップデートされる」と言うわけです。子テーマは親テーマの機能を受け継いで表示していますからそこにカスタマイズをしてまうと、アップデートで上書きされるのでカスタマイズが全てクリアされてしまいます。
なので基本的に子テーマが使えるなら、子テーマにカスタマイズをすると、親テーマがたとえアップデートしてもその機能を使いつつ子テーマのカスタマイズも有効になるという具合です。もちろん親テーマの仕様が変更されたら子テーマも変更する場合もありますが、全部を書き直す必要はありません。

また子テーマのcssは親テーマcssよりも後で読み込まれるために、親テーマのcssを上書きすることができます。cssは特別な書き方をしない限り、同じセレクタ、同じプロパティは後から読み込まれるものが優先されます。これはアタリマエのことで、ひとつの要素に2つの同じプロパティは存在しないことから後からのものが優先されのです。

例えば、親テーマに

//html
<p class="test">あいうえお</p>

//css
.test {
  font-size: 18px;
  color: red;
}

こういうものがあった場合に、子テーマで、

.test {
  font-size: 14px;
}

こうすれば、フォントサイズは14pxで赤の「あいうえお」と書かれた段落が表示されるというわけです。仮にアップデートで親テーマのcssが、

.test {
  font-size: 16px;
  color: blue;
}

と変更された場合、子テーマには、font-size: 14pxとありますから、これは14pxの「あいうえお」の段落が青で表示されるということになります。

子テーマのstyle.cssを利用するということは親テーマのcssを変更することなく、その親テーマのcssを子テーマで上書きして新たなスタイルにするという意味合いです。

もし親テーマのcssのバックアップをされていれば、変更していても元に戻せますが、していない場合はテーマを再インストールするしかなくとても面倒臭いです。しかし子テーマなら、子テーマの該当部分の記述を消してしまえば親テーマのcssが有効になりますから元に戻すのも簡単になります。

つまり安心安全に、カスタマイズができるということです。

ここまでご理解いただけたら、僕が提示したcssが全容を書いているわけではなく一部のみ書いている理由もわかってもらえると思います。つまりそのプロパティ(設定部分)だけを書き換えたら良いわけです。

> サブディレクトリ管理をしていますが上記の変更箇所で問題無いでしょうか。

これは何をサブディレクトリで管理していて、Simplicityがどこにあるかにもよります。
また、子テーマを利用するのは親テーマを変更せず、親テーマのcssよりも後で読み込まれると言う所に利用価値があるわけです。
なので、該当するディレクトリが何であったとしても、headタグを見て親テーマのcssが読み込まれるよりも後でcssのファイルが読み込まれているなら、cssファイルがどこにあっても構いません。大切なのはcssファイルが読み込まれる順番です。

どこにファイルがあっても構わないというのは、wordpressは直接cssファイルをヘッドタグに書き込むのではなく、wordpressの関数によって必要なcssの後で読み込ませるというような仕組みがあります。こういった何かしらのファイルに依存するファイルを読み込ませる場合は、wp_enqueue_style()等をググって見て下さい。

ただ、通常利用の場合、例えば、親テーマが

http://123456.com/wp-content/themes/simplicity2/style.css

みたいな感じで、子テーマstyle.cssが
http://123456.com/wp-content/themes/simplicity2-child/style.css
なら、何も変更せずとも親テーマのcssの後に子テーマのcssが読み込まれるようになっています。

まぁ別に子テーマを必ず使う必要もなく、アップデートの度にバックアップから再度書きなおせばよいだけなので、親テーマに書いても良いですが、基本レスポンシブな部分というのは、親テーマのstyle.cssの後でmobile.css等が読み込まれたり、responsive.cssが読み込まれたりして、親テーマを上書きしてその画面幅の表示を作っているので、それらを変更しないといけません。
これらよりも子テーマは後で読み込まれるために、子テーマstyle.cssで書けば万事解決ですが、サイトの作りが特別な状況になっているのであれば、それにあわせて上手くファイルの読み込み自体もカスタマイズしないといけないという寸法です。

親テーマ style.css
親テーマ responsive.css
親テーマ mobile.css
子テーマ style.css
子テーマ mobile.css

こんな感じの読み込み状態だとすると、親テーマどれよりも子テーマstyle.cssで書かれた同じセレクタの同じプロパティは優先されるということになります。mobile.cssは完全レスポンシブがoffの場合のみ有効になりますので、完全レスポンシブがonの場合は、ここに変更を書いても意味がありません。

そう言う場合は、子テーマstyle.cssにメディアクエリを書いて、スマホ等の画面幅ではどのように表示するかを書かないといけないわけです。

つまり、このようにカスタマイザーの設定やサーバーの設定でどこにどのように書けば良いのかは変わってきます。

「どこそこの部分が変更できない」だけでは、「通常は子テーマを利用するから、子テーマstyle.cssにこう書けばできるはず」としか答えられないわけです。今、「どういう環境でカスタマイザーではどのように設定していて、何かしらをここにこのように書いたけれども反映しない」まであったら優秀な質問の仕方ですが、それ以外に何かしらの通常とは違う部分があれば、僕らはそれがわからないので何がダメで設定できないかは想像でしか答えられません。

なので洗いざらい質問に状態を書いてもらう必要がありますが、質問を書くのも面倒くさいのでサイトのアドレスを公開して下さいと言う話になるわけです。

僕らがサイトの状態を見て、プロパティをデベロッパツール等でいじって変更できるなら「どこそこをこうすれば良い」とすぐに答えが書けますが、僕らの想像で、ここをこうすれば良い→反映されないの繰り返しではいつまでも埒があきません。

僕らがサイトを見て、本来そこをいじくれば変更できるはずの部分に書き込んでも変更できない場合は、何がどうなっているのかを質問して聞きますが、他と違う仕様があるなら、まず最初の質問の段階で、「こういう理由でこういう状態にしています。そこでこういうことがしたくて、こんなふうに書きましたが反映されません」まで書いてもらわないと、提示したcss等は反映されるはずのものを書いているので、なぜそうならない？と逆に原因がわからないようになってしまうわけです。

まず、サブディレクトリ管理で、いくつかサブディレクトリがあると言う状態というのはわかりました。では、そこのどのディレクトリにSimplicityがあって、子テーマの導入はできないのかどうかそこらが不明なので、まずその辺りの調査をして下さい。

子テーマの導入ができて、子テーマが反映されているのであれば、僕の書き方だけでおそらく問題点は解決できるかと思います。ただし、スマホ等の場合なので、場合によっては子テーマstyle.cssからmobile.cssにcssを書く場所を変更したり、あるいは場合によってはメディアクエリで画面サイズの指定をしないといけないかも知れません。
これらはカスタマイザーの設定がどうなっているかによって変わります。

ディレクトリの構成によっては、子テーマ自体は導入できても、その親テーマのパス(あるいは親テーマから子テーマへのパス)などを変更しないといけないかも知れません。ここらはそのディレクトリ構成の状態がどうなっているかで変わります。

ありがとうございます！
すごく感謝していますし、尊敬しています！
おかげさまで、mobile.cssを変更したところなおりました(^^♪。
本当に丁寧にたくさんのことを教えてくださいありがとうございました！
今後もSimplicityの発展をお祈りしています！