css wordpress コーダー

wordpressで条件分岐でcss(デザイン)を切り替える方法

投稿日:

Pocket

うもチャーさんです。

あなたはwordpresで、条件分岐させて、

css(デザイン)を切り替えたいと思っていませんか?

 

ページごとに違うデザインを施せるように

したい、そう思っていませんか?

 

この記事では、wordpressで、

条件分岐でcssを切り替える方法を書いてます。

 

 

なのでページごとにデザインを切り替える

ことができるようになります。

 

ということで、あなたが上記のようなことを

したいと思っているのならば、

このまま下にスクロールして読んでみてください。

 

 

スポンサードサーチ

wordpressで条件分岐を使いcssを切り替えるには

 

でまず結論からです。

ページごとにデザインを切り替えるには、

以下の3つをしましょう。

 

 

1wordpressの条件分岐を使い変数の中身をつど変える、

2cssのクラス名を変数で出力すること

3各クラス名にcssを記述する。

 

です。

 

順番に説明します。

 

 

wordpressの条件分岐を使い変数の中身をつど変える

 

まずwordpressには、

is_category()などという関数がありますが、

 

これとif文を組み合わせれば、

カテゴリーごとに、行う処理を

変えることができます。

 

例えば、こんな感じです。

if(is_category(‘カテゴリー名’)){

処理内容

}

 

 

で、ここまでは普通のことですが、

cssを条件分岐させるには、

ここの処理内容のとこに、

 

変数を入力します。

 

 

例えば

if(is_category(‘カテゴリー1’)){

$変数=’class1′;

}

 

if(is_category(‘カテゴリー2’)){

$変数=’class2′;

}

 

 

としておけば、カテゴリーごとに、

違うクラス名を用意することができます。

 

wordpressではis_category()を使えば、

カテゴリーごとに、勝手に記述を実行してくれますので、

クラス名を自動で変更できるわけです。

 

 

cssのクラス名を変数で出力すること

 

で、次の手順ですが、

変数をクラスの部分に記述しましょう。

 

例えば、以下のような感じです。

<div class=”<?php echo $変数名;?>”>

 

でこうしておくと、カテゴリーが変わるごとに、

クラス名の部分に出力されるクラス名が、

自動的に変わるわけです。

 

 

例えば、

if(is_category(‘カテゴリー1’)){

$変数=’class1″;

}と書けば、

 

でカテゴリー1をみてる時は、

<div class=”class1″>

になるわけですし、

 

 

if(is_category(‘カテゴリー2’)){

$変数=’class2′;

}と合わせて書いとけば、

 

カテゴリー2を表示してる時は、

<div class=”class2″>

になるわけです。

 

各クラス名にcssを記述する。

 

でここで手順3番目で、

あとはもうお分かりだと思いますが、

 

ここでそれぞれのクラス名に対して、

違うcssの記述をすれば、デザインを切り替えれます。

 

 

例えば、

.class1 {

background:blue;

}

 

.class2 {

background:red;

}

みたいな感じですね。

 

 

で上記3つをやっておくと、

カテゴリーが変わるごとに、

クラス名が切り替わります。

 

そして、htmlのタグのクラスの部分に、

それぞれ違うクラス名が自動的に出力されます。

 

 

そして、それぞれのクラス名で書いておいた、

cssが読み込まれて、条件分岐的にcssを

切り替えれるわけです。

 

また最初の条件分岐の部分ですが、

is_category以外にも色々と

条件分岐に使える関数があります。

 

 

なのでそこはwordpressの公式の

関数をみてみましょう。

 

 

スポンサードサーチ

まとめ

 

はいということでまとめに入ります。

 

wordpressで条件分岐させてcssを

切り替えるには、

 

1wordpressの条件分岐を使い変数をつど変える、

2cssのクラス名を変数出力すること

3各クラス名にcssを記述する。

 

以上3つをやりましょう。

 

 

するとデザインをページごとに切り替える

というようなことができるようになります。

 

さてということで、やりかたがわかったと

思いますので、早速あなた自身で、

やってみましょう。

 

やればあなたの制作スキルが上達しますよ。

 

 

ということで、読んでいただいてありがとうございました。

 

それでは。

 

チャーさん

 

 

-css, wordpress, コーダー


スポンサードサーチ

関連記事

no image

wordpressのショートコードの作成方法と使い方

どうも、チャーさんです。 あなたはショートコード(wordpressの)ってなんだ? と思ってませんか?   この記事では、wordpressの ショートコードとは何か、そして ショートコー …

no image

wordpressのメニューを階層にしたいなら読んでください。

どうも、チャーさんです。   この記事ではwordpressのメニューを、 階層化する方法、   また、階層化できない場合の対策 (サイトに階層メニューが表示されない) を書いてい …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

wordpressのエディターを前のに戻す方法

どうも、チャーさんです。   あなたは、ワードプレスをインストールしたら、 投稿のエディター画面が今まで使ってたのと 違うやつになっていて、困っていませんか?   この記事では、そ …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

ファビコンの作り方「自作したい人向け」

どうも、チャーさんです。   あなたはあなたのサイト用に、 ファビコンを作りたい。 そう思ってませんか?   この記事ではファビコンの作り方を、 紹介してます。(自作方法を) &n …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

wordpressの記事ページをカスタマイズする方法

どうも、チャーさんです。   あなたはwordpressの記事ページ、 (投稿で書いて公開したら出てくるページ) をカスタマイズしたいと思ってますか?   この記事では、wordp …

no image

グーグルマップ埋め込みをする簡単3ステップを紹介

どうも、チャーさんです。   あなたは、グーグルマップの埋め込みは、 どうやってやればいいのか? と疑問を持っていませんか。   この記事では、グーグルマップの埋め込みの、 方法を …

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。