「CSS」タグアーカイブ

WordPressで、ログイン時だけdisplay noneなどを適用し、非表示にする方法

例えば、「ログインはこちら」などを固定フッターに表示しているが、ログインした人には、固定フッターそのものを非表示にしたい場合などに便利。

↓↓↓ログインすると、固定フッターを非表示に↓↓↓

ちなみに、上の写真のように、固定フッターに「ログインボタン」を追加するのに便利なWordperssのプラグインはこちらの記事を参照。
固定フッターを導入する方法ワードプレスプラグインSimple Sticky Footer

functions.phpにログイン時のみ、CSS追記をする記述を追加

管理画面の「外観」→「テーマの編集」→「テーマのための関数(functions.php)」とクリックして、 functions.php に、

add_action( ‘wp_head’, ‘footer_custom’);
function footer_custom() {
if ( is_user_logged_in() ) :
echo ‘<style type=”text/css”>#sticky-footer {display: none;}</style>’;
endif;
}

と追記しよう。

add_action( ‘wp_head’, ‘footer_custom‘);
function footer_custom() {

この、footer_custom は任意の名前でOK。

これで、ログイン時のみ、ヘッダーに、「id=”sticky-footer” に対して display: none; ね」と追記することができる。

応用編、ログインしてない時だけに適用する

add_action( ‘wp_head’, ‘footer_custom’);
function footer_custom() {
if ( is_user_logged_in() ) :
else :
ここに非ログイン時の処理を記載
endif;
}

こんな感じで色々使える。

CSS, スマホ・パソコン・Web関連

tableのthやtdをソースを変えずにCSSだけで縦並びにする方法 – レスポンシブデザイン編 –

2015/02/16 あすたまコメントする

HTMLのソースを全く変えずにtableの配置を縦並びにする方法

結論から言おう。実現可能だ。

一般にこの方法を実現したいならdivを使ってやる方がいいと言われている。その通りで、最初から作るならdivでやるべきだ。

でも、フォームのソースが元々あって、そこをどうしても変更できない場合や、CSSだけで対応する必要がある場合もあるだろう。
なので、今回はCSSだけで実現する方法を紹介。

手軽なやつだと、position absoluteを使う方法と、 display blockを使う方法がある。

CSSに1つ記述を追加するだけ

table, tbody, tr, th, td {
display: block;
}

これだけ。
ちなみに、tfootやtheadを使っている場合は、それも含めてdisplay block してやるといい。

IE6,7,8まで含めて対応したい場合はtableのブロック要素化が効かないかもしれない。
そんな時には、
IE6,7,8,9だけCSSで違う記述を反映させる方法

この辺を参考に。

レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装する

テーブルを縦並びにするだけなら先ほどの display blockだけで大丈夫だが、PCでは普通のテーブル、スマホでは縦並びにしたい場合の対応も考えよう。

まず、レスポンシブデザインを考えるに辺り、メディアアンカーを覚えなければならない。

・PCで適用されるCSS

@media screen and (min-width:601px) { /*601px以上*/
この間にPC用のCSSを書く。
}

・スマホで適用されるCSS

@media screen and (max-width:600px) { /*600px以下*/
この間にスマホ用のCSSを書く。
}

という感じ。

「スマホ用」「PC用」と言っているが、本来の意味は、

「画面サイズが600以下の時はこのCSSだよ」
「画面サイズが601以上の時はこのCSSだよ」

という事だ。
数字は自分で勝手に変えてもいい。タブレットも分けたい場合などには、3つにしたりすることもできる。

@media screen and (min-width: 500px) and (max-width: 800px) {
画面サイズが500～800の間適用されるCSS。タブレット用とか？
}

でも、昨今のスマホの画面サイズからいくと、600pxで分けるのがおすすめ。

今回のスマホ時にだけテーブルを縦に並べたいなら、

@media screen and (max-width:600px) { /*600px以下(スマホ用)*/
table, tbody, tr, th, td {
display: block;
max-width: 98%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
}

としてやれば、

こうなる。PC版はそのまま。

ちなみに、 max-width:98%; とかは自由に変えてくれ。

overflow:hidden; なんかも使えるかもしれない。

メディアアンカーの外にテーブルの幅を指定している場合は、上記スマホ用CSSを追加しても効かない場合がある。その場合は

@media screen and (min-width:601px) { /*601px以上(PC用)*/
table {
width: 680px;　/*PC版の横幅*/
}

という風に、PC用メディアアンカー内に移動すること。

CSS, スマホ・パソコン・Web関連

IE6,7,8,9だけCSSで違う記述を反映させる方法

2015/02/12 あすたまコメントする

IEなんてなくなればいいのに…とは言うものの

CSSに以下の記述をすることで、適応させることがが可能になる。

これを通称ハックと呼ぶらしい。まあ言葉なんかどうでもいい。

IE6だけに適応

先頭に「_」をつけることでIE6だけに適用。

.sample {
_display: none;
}

IE7だけに適応

先頭に「*」をつけることでIE7だけに適用。

.sample {
*display: none;
}

IE8だけに適応

末尾に「\9」をつけることでIE8だけに適用。なんで9やのにIE8やねん…

.sample {
display: none\9;
}

IE9だけに適応

親要素として「:root」をつけて、
末尾に「\0/」をつけることでIE9だけに適用。

:root .sample {
display: none\0/;
}

使用例

例えば、IE6, 7だけで非表示にしたい場合。

.ie67none {
_display: none;
*display: none;
}

こんな感じで、IE6とIE7で非表示にするclassを作って、

<p class=”ie67none”>IE6とIE7ではこの文字は非表示</p>

としてやればいい。

あすたまいず