「スタイルシート」タグアーカイブ

ビジュアルエディター見た目を実際の投稿の色や見た目と揃える方法 WordPress BuddyPressカスタマイズメモ SANGOテンプレート

WordPressのビジュアルエディターで、H2やH3のをつけると、実際のCSSと違うようになるので、それを揃える方法

WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが投稿するようになると、投稿画面のビジュアルエディターの見た目と、サイトフロントの見た目を揃えておいた方がいい。

別のCSSを用意してそれをビジュアルエディター用のCSSとして読み込ませる必要がある。
 

投稿画面のプレビュー用の別のCSSを用意する

SANGOのテーマの場合は
library/css/editor-style.css
に投稿画面用のCSSが入っている。

それを子テーマに別のCSSを入れて読み込ませてみる。

//スタイルとビジュアルエディターの見た目を揃える
function correct_visual() {
add_editor_style(get_stylesheet_directory_uri() . '/library/css/editor-style.css');
}
add_action('admin_init', 'correct_visual', 20);
get_stylesheet_directory_uri()

とパスを書いておくことによって、子テーマのURLが取得されるのでこれでOK。

例えば、
「オレンジ見出し」を実際のページで青くした場合、オレンジのプレビューになるのに、実際のページでは青。

editor-style.css の中に

/*オレンジ見出し*/
body#tinymce.wp-editor .hh8 {
  padding: 0.5em;
  color: #494949;
  background: #fffaf4;
  border-left: solid 5px #ffaf58;
}

この color や、background の色を変えればいい。

この記事も読まれています

管理画面でだけ適用するCSSファイルを作って、子テーマ化する WordPress BuddyPressカスタマイズメモ

WordPressの管理画面でだけCSSファイルを読み込ませる方法

 
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになるので、管理画面の配置や色を変更したい場合、非表示したいものなどがある場合に、スタイルシートを使いたい場合もあるだろう。

色々と方法はあるが、今回は外部CSSファイルを子テーマに入れて、管理画面で読み込ませる方法を紹介。


 

functions.php へ記述

//adminのCSSを子テーマに追加

function load_custom_wp_admin_style() {
  wp_register_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
  wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

スタイルシートのパス

get_stylesheet_directory_uri()

この部分で、子テーマフォルダへのパスを表している。
スタイルシート名は、ここでは admin-style.css だ。

facebookのタイムラインのdivにdisplay:none;のCSSを適用する方法

スマホサイトなどで非表示にしたい場合

Facebookのタイムラインをホームページなどに埋め込んだ時、例えば、スマホでのみ非表示にしたい場合などがある。
ただし、単純にCSSに display: none; と表示しても効かなかったりする。

非表示にする場合は、スタイルシートに下記を記述すること。
 
div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
display: none;
}
 
そのままコピペでOK。

 
 
スマホでのみ適用する場合は、レスポンシブにするといい。下の関連記事を参照。

関連記事:
facebookタイムラインをスマホサイトでレスポンシブにする。CSSでdata-widthの設定

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

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

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

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

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

miniiman

手軽なやつだと、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では普通のテーブル、スマホでは縦並びにしたい場合の対応も考えよう。

table-normal

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

・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%; /*スマホ画面ほぼ一杯に広がる感じ*/
}
}

としてやれば、

table-sp

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

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

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

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

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

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