Wordpressのnext(previous)_post_linkのスタイルついて

Question

こんにちはWordpressのテーマを作っているのですが、
next_post_link,previous_posts_linkのスタイルについてです。

まずはソースを見てください。

<div id="navi">
    <div id="next"><?php next_posts_link('&raquo;次へ'); ?></div>
    <div id="prev"><?php previous_posts_link('前へ&laquo;'); ?></div>
</div>

#navi{
        overflow: hidden;
        margin: 8px 0;
        font-size: 20px;
    }

        #prev{
            color:#fff;
            float: left;
            width: 128px;
            background-color: #ffa500;
            text-align: center;
            border-radius: 4px;
        }
        #next{
            color:#fff;
            float: right;
            width: 128px;
            background-color: #ffa500;
            text-align: center;
            border-radius: 4px;
        }

こうしたとき、
１、文字が白くならないのはなぜですか？また白くする方法はありますか？

２、文字の部分しかリンクにならないのですが、周りのオレンジ(#ffa500)の部分もリンクにする方法はありますか？

どうぞお知恵をお貸しください。

Comments

[kei344]

まだ質問が「受付中」になっていますが、いったん「解決済」にされてはいかがでしょうか。また、解決されていないなら状況をお教えください。

Answer 1

1. 文字が白くならないのは、おそらくaタグのスタイルが優先されて適用されているからです。
2. 以下のようにすれば、いかがでしょうか。

#prev a{
    color:#fff;
    float: left;
    width: 128px;
    background-color: #ffa500;
    text-align: center;
    border-radius: 4px;
}
#next a{
    color:#fff;
    float: right;
    width: 128px;
    background-color: #ffa500;
    text-align: center;
    border-radius: 4px;
}

Comments

[Kelvin]

出来ました！
ありがとうございます！

[退会済みユーザー]

蛇足ですが、PHPのコードを含むソースを記載する際は、出力されるHTMLのコードも記載した方がいいかと思います。
そうすれば、WordPressは知らないけれどHTML/CSSは知っている人も回答できるので。

[Kelvin]

ごめんなさい出力されるHTMLコードとは何でしょうか？

[退会済みユーザー]

今回の場合は、以下のようなコードを意図しています。つまり、PHPの部分がHTMLに置き換わったコードです。
<div id="navi">
<div id="next"><a href="http://example.com/page/4" >&raquo;次へ</a></div>
<div id="prev"><a href="http://example.com/page/2" >前へ&laquo;</a></div>
</div>