サポート » テーマ » テキストの色を変えたい

  • 解決済 tiebu

    (@tiebu)


    現在使用しているテーマの「←前の記事へ」と「新しい記事へ→」の文字色がバックの色と被っていて見えにくく、同時に文字の大きさも変えたいと思っています。

    <font size=”” color=””></font>

    を下記コードのどの部分に挿入すれば問題なく変更出来ますでしょうか?

    <?php if ( get_next_posts_link() ) : ?>
    <div class=”nav-previous”><?php next_posts_link( __( ‘<span class=”meta-nav”>←</span> 前の記事へ’, ‘gridster’ ) ); ?></div>
    <?php endif; ?>

    <?php if ( get_previous_posts_link() ) : ?>
    <div class=”nav-next”><?php previous_posts_link( __( ‘新しい記事へ <span class=”meta-nav”>→</span>’, ‘gridster’ ) ); ?></div>
    <?php endif;

    ?>

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • taku-k

    (@taku-k)

    テーマ内の style.css に

    .nav-previous a,
    .nav-next a{
    	font-size: 20px;
    	color: #000;
    }

    トピック投稿者 tiebu

    (@tiebu)

    taku-k様

    有難うございます。
    PHP内で変更しない方が良いのでしょうか?
    また、

    .nav-previous, .nav-next {
    padding-top:10px;
    padding-bottom:10px;
    display:block;
    }

    当ブログのテーマ内のCSSは上記のような表記なのですが
    CSSの最下に

    .nav-previous a,
    .nav-next a{
    font-size: 20px;
    color: #000;
    }

    こちらを足して書く感じでしょうか?
    すいません、全くの知識不足なので教えて頂ければ幸いです。

    トピック投稿者 tiebu

    (@tiebu)

    すいません。
    上記表記の直下に足して変えられました。
    有難うございました!

    トピック投稿者 tiebu

    (@tiebu)

    度々申し訳ありません。

    PCで見ると変えられたのですが、スマホで見ると変わっていませんでした。
    タブレットやスマホではどのように変えられるのでしょうか?

    taku-k

    (@taku-k)

    .nav-previous, .nav-next {
     padding-top:10px;
     padding-bottom:10px;
     display:block;
     }

    の下に追記すると良いかと
    全部書くと

    .nav-previous, .nav-next {
     padding-top:10px;
     padding-bottom:10px;
     display:block;
     }
    .nav-previous a, .nav-next a{
     font-size: 20px;
     color: #000;
     }

    直接書いても良いのでしょうが、こっちのほうが一般的で簡単ではないかと思います。

    taku-k

    (@taku-k)

    どのテーマを使用されているかで異なってくるのですが、PCとスマホと別々なコードで出し分けているということなのかな?

    トピック投稿者 tiebu

    (@tiebu)

    taku-k様

    有難うございます。
    「gridster」というテーマでレスポンシブテーマなのですが、
    スマホで見ると反映されないので出し分けているのかもしれません。

    最初に私が書いた

    <?php if ( get_next_posts_link() ) : ?>
    <div class=”nav-previous”><?php next_posts_link( __( ‘<span class=”meta-nav”>←</span> 前の記事へ’, ‘gridster’ ) ); ?></div>
    <?php endif; ?>

    <?php if ( get_previous_posts_link() ) : ?>
    <div class=”nav-next”><?php previous_posts_link( __( ‘新しい記事へ <span class=”meta-nav”>→</span>’, ‘gridster’ ) ); ?></div>
    <?php endif;
    ?>

    上記PHP内のコードに

    <font size=”” color=””></font>

    を使用して変えてみたいのですが、これでは何か問題があるのでしょうか?
    taku-k様の方法でCSSを変更すると、
    「前の記事へ」「新しい記事へ」の箇所以外にも、
    記事ページに行ったときに前後の記事タイトルのテキスト文字部分まで同じように変更されてしまう為、
    出来ればダイレクトにPHPで変更したいのですが、何か問題あるでしょうか?

    taku-k

    (@taku-k)

    '<span class="meta-nav">←</span> 前の記事へ'

    '<span class="meta-nav" style="font-size:20px;color:#000;">← 前の記事へ</span>'

    みたいに直すと何とかなったような。
    すみませんスタイルの優先順位とか詳しくなくて。

    トピック投稿者 tiebu

    (@tiebu)

    taku-k様

    有難うございます。
    それですと「新しい記事へ→」の方はどうしたら良いのか分かりません。

    gblsm

    (@gblsm)

    Gridster-Lite というテーマで試してみました。taku-kさんが示されたコードを加えただけの状態で、文字の大きさと色がPCでもスマホでも同様に変わりました。PCはOS X(Mac)のSafari、スマホはiPhoneのSafariです。テーマが違うものかもしれませんがご参考まで。

    トピック投稿者 tiebu

    (@tiebu)

    gblsm様

    有難うございます。
    確かにこちらも今確認しましたらスマホでも反映されていました。
    昨日は色々なページを見て反映されていなかったのですが
    今日見たら変わっていました。

    失礼致しました。
    taku-k様、大変お騒がせしました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「テキストの色を変えたい」には新たに返信することはできません。