サポート » 使い方全般 » ページ毎のスタイルシート指定

  • お世話になっています。
    ページ毎に個々のスタイルシートを割り当てたいのですが、どうすれば宜しいのでしょうか。初歩的質問ではと思うのですがどなたかご教授いただけたら大変ありがたいです。

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • header.phpに記載されているBODYタグですが、
    <body <?php body_class(); ?>>
    こうなっていますか?
    なっているなら、ブラウザでソースを確認してみてください。
    bodyタグに固有のclassが吐き出されています。

    大技を繰り出すまでもないなら、これで十分にページごと、カテゴリーごとのスタイルが付けられます。
    私はページIDで付けると困る事があるので、スラッグ名をclassに表示するよう手を加えて
    スラッグでCSSの指定をしています。

    トピック投稿者 kamiy

    (@kamiy)

    >hihito様
    早速に大変ありがとうございます!
    すみません、よく飲み込めないのですが、
    header.phpに<body <?php body_class(); ?>>を記載したとして、
    このbodyタグに固有のclassとは、どこで設定されたものが吐き出されるのでしょうか?
    で、その吐き出されたclassについてどのcssファイルを割り当てるかは、
    同じくheader.phpでif~elseif文で各class毎に条件分岐のコードを
    <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
    という形で書いて指定しておけばいいのでしょうか。
    function.phpなどはいじる必要はないのでしょうかね?

    See Template Tags/body class

    記載したとして

    記載して試せば一目瞭然◎

    <body class=”page page-id-123 page-template page-template-default”>

    のように出力されます。「page-id-」に続く数値はページIDです。
    なので、例えばページID=123に固有のスタイルなら

    style.css:
    .page-id-123 a{color:red;}

    のように指定すれば OK です。

    (kzさんのリンク先、日本語版のテンプレートタグ/body_classの方をご覧ください。
    先に日本語版で書いて、後から英語版へ反映させていってます)

    吐き出されたclassについてどのcssファイルを割り当てるか

    これは、1つのCSSファイルでページごとに見た目を変える場合の方法です。

    もし(既存の)複数のCSSをページごとに読み込むのであれば、異なるカスタムテンプレートを作成してそれぞれ別のCSSを読み込むという方法もあります(WordPressページテンプレートを作ってみよう – 日本語版Codex などを参照)。

    トピック投稿者 kamiy

    (@kamiy)

    皆様、ありがとうございます。
    すみません、言葉足らずで大変失礼いたしました。やりたいことはkurosquareご指摘の通り、各ページをカスタムテンプレートにして、各々にCSSファイルを割り当てることだったのです(が、いただいたアドバイス自体も大変勉強になります!)。
    例えば全ページに共通となるようなcssファイルはmain.cssとし、トップページにはtop.css、料金説明ページにはryoukin.cssを割り当てたいわけです。ページ毎にあまりにデザインが異なるサイトを作成する場合、このようにした方がメンテもかえってしやすいなと思いましたもので。
    どのcssファイルを割り当てるかはやはりheader.phpファイルに書き込むしかないのではと思うのですが、でありましたらheader.phpに条件分岐のコードを書いて、各カスタムテンプレート毎で読み込むcssファイルを設定しておくのかナと思うのですが、どうもその具体的な書き方が分からない状態です。

    (WordPressページテンプレートを作ってみよう – 日本語版Codex などを参照)も見たのですがちょっと分からなかったです。。。

    具体的な書き方

    header.php:

    echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_url') . '/main.css" />';
    if(is_page(/* トップページのページID or タイトル or スラッグ */)) // または is_ftont_page() or is_home()
      echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_url') . '/top.css" />';
    else if(is_page(/* 料金ページのID or タイトル or スラッグ*/))
      echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('template_url') . '/ryoukin.css" />';
      :

    See: 条件分岐タグ#WordPress ページ

    トピック投稿者 kamiy

    (@kamiy)

    ありがとうございます。ここでechoが必要となるのですか。とりあえず後ほど試させていただきます!

8件の返信を表示中 - 1 - 8件目 (全8件中)
  • トピック「ページ毎のスタイルシート指定」には新たに返信することはできません。