スマホで表示が出ない件につきまして

わいひらさま

http://ippoippo21.com
です。

バージョンは４．５．３です。

よろしくお願いします。

> 一番上のタイトルの下に、「サイトマップ」や
> 「お問い合わせ」などが横一列で並んでいるのですが

グローバルメニューはスマホではPCと同じ表示ではなくカスタマイザーで設定した表示方法で表示されます。naoさんのサイトで言うと、サイトタイトル横のハンバーガーメニュー
クリック(タッチ)した時に表示されるものがソレです。

> その下に「最近の投稿」と「カテゴリー」の文字が
> 出るのですが、文字以外、何も表示されません。

aのcolorが白だから見えないだけですので、cssで、例えば、

.widget_recent_entries a {
  color: #333;
}

などと子テーマstyle.cssに書けば表示されるかと思います。仮にこの色のスタイルがモバイル用の何かしらのcssに書かれている場合は、そのcssの最後辺りに色情報をスタイルすればよいかと思いますが、たいていは子テーマstyle.cssでイケるんじゃなかろうかと。

最悪、上記スタイルで行けない場合は

.widget_recent_entries a {
  color: #333 !important;
}

として子テーマstyle.cssにスタイルすれば通常は上書きを回避できると思います。子テーマstyle.cssよりも後で読み込まれるcssにサイドバーのaのリンクの色設定があり、かつそれが!important付きでスタイルされている場合は子テーマstyle.cssでは回避できないので、子テーマstyle.cssよりも後で読み込まれるcssにスタイルする必要があります。

また.widget_recent_entries aは関連記事だけですので、#sidebar aですべてのサイドバーのリンクの色を設定できます。最悪なのは、インラインでページのヘッダあたりに色情報がスタイルされている場合は外部のcssでは上書きできません。
その場合はインラインの色を変更するか、jQueryなどでタグに直接色をスタイルする必要があります。

色んなトピックで書いていますが、aタグに色をつける場合はこういったことがあるのでオススメしてません。
aタグでは、基本的にtext-decoration: noneの様な感じでアンダーラインを消したりするのは良いかと思いますが、色は基本的にそのaタグが入っている親に指定するべきです。

例えば、

.widget_recent_entries li {
  color: #333;
}

.widget_recent_entries a {
  color: inherit;
}

これでよいのです。また基本的にaタグは親のスタイルを自動で継承します。文字の大きさだったり行間だったりその他諸々。しかし色とアンダーライン部分はブラウザがデフォルトでスタイルを持っているので、必要な場合はリンクカラーの設定等をしないといけません。

が、親の色を継承すれば親の色と違う色を入れたい場合にもaタグに色のスタイルを入れることができると言う最終手段も取ることが出きます。

具体的には、全体の文字色が#333だとして、liの文字色は#c00だとします。このまま親のliの色をaが継承すれば#c00ですが、aタグに色を指定することで3段階の色使いができるようになるわけです。
aに最初から色を指定してしまうと、3段階が2段階になり、場合によっては最初からその色で変更が効かないと言うような場合も出てきたりします。

手段はなるべく多く持っている方が有利なのです。

ちなみに子テーマstyle.cssで前レスのスタイルを適用する時に、スマホのみ対応するためにはメディアクエリが必要です。

@media screen and (max-width: 48em) {
  //前レスのcss
}

こんな感じです。

Hidekichi さま

ありがとうございます。

いろいろ研究してみます。