Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

no image

ファビコンをワードプレスに設定する方法「手順つき」

  どうも、チャーさんです。   あなたはファビコンをワードプレスに、 設定し表示させたいですか?   この記事では、ファビコンをワードプレスに、 設定させる方法を紹介し …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

no image

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

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

no image

wordpressにメニューを追加する方法「解説画像つき」

どうも、チャーさんです。 あなたはwordpressのメニューを追加する 方法を探していますか?   この記事ではwordpressのメニューを追加する 方法を書いてますので、あなたがこの記 …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

no image

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

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

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

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

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

最新記事

チャーさん

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

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

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