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

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 の色を変えればいい。

WordPress

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

2019/04/23 あすたまコメントする

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

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

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

functions.php へ記述

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

function load_custom_wp_admin_style() {
	wp_enqueue_style( 'custom_wp_admin_css', get_stylesheet_directory_uri() . '/css/adminstyle.css', false, '1.0.0' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

スタイルシートのパス

get_stylesheet_directory_uri()

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

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

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

2015/08/21 あすたまコメントする

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

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

非表示にする場合は、スタイルシートに下記を記述すること。

div.fb_iframe_widget,
div.fb_iframe_widget iframe[style],
div.fb_iframe_widget span {
display: none;
}

そのままコピペでOK。

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

あすたまいず