WordPressのビジュアルエディターで、H2やH3のをつけると、実際のCSSと違うようになるので、それを揃える方法
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが投稿するようになると、投稿画面のビジュアルエディターの見た目と、サイトフロントの見た目を揃えておいた方がいい。
別のCSSを用意してそれをビジュアルエディター用のCSSとして読み込ませる必要がある。
投稿画面のプレビュー用の別のCSSを用意する
SANGOのテーマの場合は
library/css/editor-style.css
に投稿画面用のCSSが入っている。
それを子テーマに別のCSSを入れて読み込ませてみる。
とパスを書いておくことによって、子テーマのURLが取得されるのでこれでOK。
例えば、
「オレンジ見出し」を実際のページで青くした場合、オレンジのプレビューになるのに、実際のページでは青。
editor-style.css の中に
この color や、background の色を変えればいい。
WordPressの管理画面でだけCSSファイルを読み込ませる方法
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになるので、管理画面の配置や色を変更したい場合、非表示したいものなどがある場合に、スタイルシートを使いたい場合もあるだろう。
色々と方法はあるが、今回は外部CSSファイルを子テーマに入れて、管理画面で読み込ませる方法を紹介。
functions.php へ記述
//adminのCSSを子テーマに追加
スタイルシートのパス
この部分で、子テーマフォルダへのパスを表している。
スタイルシート名は、ここでは admin-style.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の設定
明日試したくなるカスタマイズ、ネットな日々に役立つ小技と、たまに旅行の妄想と。