「CSS」タグアーカイブ

ビジュアルエディター見た目を実際の投稿の色や見た目と揃える方法 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のSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

WordPressで独特の文字修飾エディタがあるので、消しておこう。

インデントとかいらんね。
 

functions.php へ記述

エディタ周りは簡単にCSSで非表示にしておく。

//cssで不要物を消去

if (!current_user_can('administrator')) {
function my_admin_print_styles(){
 echo '<style type="text/css">'; //投稿のエディタボタン関連
  echo '#qt_content_em,';
  echo '#qt_content_block,';
  //echo '#qt_content_del,';
  echo '#qt_content_ins,';
  echo '#qt_content_img,';
  echo '#qt_content_ul,';
  echo '#qt_content_ol,';
  echo '#qt_content_li,';
  echo '#qt_content_code,';
  echo '#qt_content_more,';
  echo '#qt_content_close,';
  echo 'qt_content_fullscreen';
  echo '{display:none !important;}';
  echo '</style>';
}
add_action('admin_print_styles', 'my_admin_print_styles', 21);
}

「//」を頭につけると、コメントアウトなので、メニューからは削除されない。

上の例でいくと、例えば、「打消し線」も非表示にしたいなら、

//echo '#qt_content_del,';

  ↓

echo '#qt_content_del,';

“管理者”でメニューを削除したくない場合は、一番上と一番下の

if (!current_user_can('administrator')) {

}

を削除すればいい。
 

「スタイル」のプルダウンで出る文字修飾エディタ「Tiny MCE」の中身を変えるには別の記述が必要

TinyMCEの編集は下記参照。

・sango のビジュアルエディターのバグ修正(スマホでTinyMCEの文字修飾がおかしい)

ログイン時のみ一部メニューを非表示に(ログインしてる時だけ違うCSSを読み込ませてメニューを表示させる方法) WordPress BuddyPressカスタマイズメモ

WordPressで、ログインしてる人と、ログインしてない人で違うメニューを表示させる方法

 
WordPressのSNSプラグイン、BuddyPressを導入すると不特定多数のメンバーが参加することになる。

ログイン後にのみCSSを読み込ませて、デザインや配置、表示非表示を切り替えたい場合など。


  ↓↓↓


 

メニューで、非ログイン時に非表示にするものにclass付けする

管理画面の「メニュー」で、「表示オプション」の中の「CSSクラス」のチェックボックスにチェックを入れる。

CSS class(オプション)の部分に、ログイン後非表示にしたいモノにだけ「loggedin」と書いておく。

ちなみに、class名は何でもいい。

 

functions.php へ記述

//ログイン時のみCSS適用

function loggedin_css() {
if ( ! is_user_logged_in() ) :
echo '<style type="text/css">li.loggedin {display: none;}</style>';
endif;
}
add_action( 'wp_head', 'loggedin_css');
if (!is_user_logged_in())

で、ログインしているユーザーにだけ、スタイルを読み込ませる。

ちなみに、この例では外部CSSではないが、下記のように外部CSSにして読み込ませても同じことができる。

function loggedin_css() {
if ( ! is_user_logged_in() ) :
echo '<link rel="stylesheet" type="text/css" href="https://..../xxx.css">';
endif;
}
add_action( 'wp_head', 'loggedin_css');

https://…./xxx.css の部分にCSSのパスとファイル名を記入しておくこと。

管理画面でだけ適用する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 だ。

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

スマホ完全対応、IEも対応のモダンでオシャレなフォトスライダーjQuery

スマホPC対応。オシャレなフォトスライダー、モダンスライド

 

モダンスライドのデモはこちら。

CSSとjQueryだけで導入できる。

レスポンシブ完全対応。

スマホのフリック、PCのマウスクリックしながらのスライドアクション、右下のサムネイルクリック、左右の矢印でスライドを動かすことができる。

また、オートスライドも設定可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

中に入っているもので編集するもの

・js/sequence.js
オートプレイ、エフェクトの切り替え、ループなどの設定が行える。

・css/sequence-theme.modern-slide-in.css
画像の大きさ、読み込む画像の名前などを変更できる。

 
 

HTMLの<head>と</head>の間で読み込む

<link href=”css/sequence-theme.modern-slide-in.css” rel=”stylesheet” media=”all”><!– modern-slide –>
<!–[if lt IE 9]>
<script src=”scripts/respond.min.js”></script>
<![endif]–>

respond.min.js はIE対策用に必要。

順番に注意。
 
 

HTMLのスライダー部分

少し長いが、スライダー3枚分+右下のサムネイル3個分だ。

<div id="sequence" class="seq">

<div class="seq-screen">
<ul class="seq-canvas">

<li class="seq-in">
<div class="seq-model">
<img data-seq src="images/model1.png" alt="モデル1" />
</div>
<div class="seq-title">
<h2 data-seq>Modern Slide In slide1</h2>
<h3 data-seq>スマホ、タブレット、PCに対応しています。</h3>
</div>
</li>

<li>
<div class="seq-model">
<img data-seq src="images/model2.png" alt="モデル2" />
</div>
<div class="seq-title">
<h2 data-seq>slide2</h2>
<h3 data-seq>スマホのフリックでも、PCのクリックしながらのマウスアクションでもスライドしていきます。</h3>
</div>
</li>

<li>
<div class="seq-model">
<img data-seq src="images/model3.png" alt="モデル3" />
</div>
<div class="seq-title">
<h2 data-seq>簡単インストール</h2>
<h3 data-seq>誰でも簡単にインストールできて、カスタマイズも思うがまま。</h3>
</div>
</li>

</ul>
</div>

<fieldset class="seq-nav" aria-controls="sequence" aria-label="Slider buttons">
<button type="button" class="seq-prev" aria-label="Previous">Previous</button>
<button type="button" class="seq-next" aria-label="Next">Next</button>
</fieldset>

<ul role="navigation" aria-label="Pagination" class="seq-pagination">
<li><a href="#step1" rel="step1" title="slide 1へ"><img src="images/tn-model1.png" /></a></li>
<li><a href="#step2" rel="step2" title="slide 2へ"><img src="images/tn-model2.png" /></a></li>
<li><a href="#step3" rel="step3" title="slide 3へ"><img src="images/tn-model3.png" /></a></li>

</ul>
</div>

 
 

画像はデフォルトでは model1.png model2.png ….としている。

 
 

</body>の直前でjsファイルを読み込む

<script src="scripts/imagesloaded.pkgd.min.js"></script>
<script src="scripts/hammer.min.js"></script>
<script src="scripts/sequence.js"></script>
<script src="scripts/sequence-theme.modern-slide-in.js"></script>

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

 
モダンスライドのデモはこちら。

画面をスクロールしていくと、画像がフワッと動きながら出てくるエフェクト

画面スクロールに合わせて画像がフワッと動きながら出てくるエフェクト

 

スクロールで画像がフワッと動きながら出てくるエフェクトのデモページ
はこちら。

CSSとjQueryだけで簡単に実現できる。

 
 

用意するもの

moveinimg.js
moveinimg.css

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

moveinimg.js の中身

$(function(){
$(‘.moveinimg’).css(“opacity”,”.1″);
$(window).scroll(function (){
$(‘.moveinimg’).each(function(){
var imgPos = $(this).offset().top;
var scroll = $(window).scrollTop();
var windowHeight = $(window).height();
if (scroll > imgPos – windowHeight + 200){
$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
}
});
});
});

 
適当な解説:
.moveinimg のclassがついている時にまず画像を半透明にセットする。

(“opacity”,”.1″); の数字を変更することで透過度を変更できる。

if (scroll > imgPos – windowHeight + 200){ これで、画像まで200pxのところまでスクロールすると実行。

$(this).animate({
“margin”: “0px”,
“opacity”: “1”
}, 1000);
で、marginを0pxに、更に透過度を透過なしに、1秒で変更

 
 

moveinimg.css の中身の必要な部分だけ

.movein {
position: relative;
min-height: 210px;
display: block;
}
.moveinimg {
margin-left: -100px;
}

絶対に必要なのが 親要素の .movein にposition:relative;
.moveinimgの初期位置をずらしておく。→ のちのちjQueryで margin:0;に移動させる。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/moveinimg.css” /><!– moveinimg –>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script><!– moveinimg –>
<script type=”text/javascript” src=”js/moveinimg.js”></script><!– moveinimg –>

先ほどの、moveinimg.cssmoveinimg.jsjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div class=”movein”>
<p class=”moveinimg”><img src=”img/image1.jpg” alt=”image1″ /></p>

画像は準備すること。

div class=”movein” の画像が最初は、半透明で、margin -100px セットされているが、スクロールするとふわっと表示される。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

moveinimg.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

リンクに#を入れてクリックしたら、なめらかにスクロールして移動させる方法

コピペOK。これだけで#のリンクをクリックしたら自動でスクロール移動に。もちろんスマホ対応。

リンクをタップしたりクリックしたら、パッと切り替わるのではなく、にゅるーっと動いていく#リンクがある。これを導入する方法を紹介。

なめらかスクロールのデモページはこちら

 
 

用意するもの

scroll.js
・jQueryファイル(HTMLで直接読み込むなら用意しなくてもいい)
 
 

HTMLへの記述方法

<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– scroll –>
<head>
<script type=”text/javascript” src=”js/scroll.js”></script><!– scroll –>
<head>

こんな感じで、jqueryとscroll.jsを読み込む。

あとはリンクで #xxx といつも通り記述するとなめらかにスクロールしていく。

まとめてダウンロードする場合はこちら
scroll.zip
 
 

jsファイルの内容と簡単な解説

$(document).ready(function(){
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”)
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target
|| $(‘[name=’ + this.hash.slice(1) +’]’);
if ($target.length) {
var targetOffset = $target.offset().top;
$(‘html,body’)
.animate({scrollTop: targetOffset}, 1000);
return false;
}
}
});
});

上から順に、

a hrefの中に#を使っていた場合
そのハッシュ(#)をターゲットにして
なめらかにスクロールするアニメーションだよ

という意味。

.animate({scrollTop: targetOffset}, 1000);
ここの数字を大きくすればゆっくり動き、小さくすれば早く動く。
この例の1000だと、1000ミリ秒=1秒なので、1秒で目的地に到着する。

なめらかスクロールのデモページはこちら

CSSをIEとMicrosoft Edgeにだけ適用させる5つの方法、CSS記述方法やHTML条件分岐など

IEと、Microsoft Edgeだけ形が崩れてしまったりする場合の対処法-CSS編

IEはホームページを制作する側からすると迷惑以外なにものでもない。とはいえ、無視し続けるわけにもいかないので、しぶしぶ対応するしかない。

IEに対してちゃんと動いたり表示されたりするようにする事をIEハックと言ったりするが、今回はCSSでIEハックする方法を5つ紹介。

 
JavaScriptを使ってIEハックする方法もあるが、今回はより簡単なCSSの方法を紹介。
 
 

1. CSSファイルの記述でIEハックする方法

例えば、リスト表示のされかたの違いを例に。

ul li {
margin-bottom: 5px; /* Chrome、FireFox等 */
margin-bottom: 10px\9; /* IE10以下 */
*margin-bottom: 15px; /* IE7以下 */
_margin-bottom: 20px; /* IE6 */
}

IE6 -> 下に20px空白
IE7 -> 下に15px空白
IE8 -> 下に10px空白
IE9 -> 下に10px空白
IE10 -> 下に10px空白
その他のブラウザ -> 下に5px空白

となる。

ただし、この場合はCSSを書く順番が重要

順番を間違えると、例えば margin-bottom: 5px; を一番下に書いてしまったりすると全て5pxに統一されてしまう。

CSSは上から下に読み込むのが原則なので、注意したい。
 
 

2. CSSファイルの記述で:targetを使う方法

:target はターゲット擬似クラスと呼ばれ、本来は、リンクをクリックしたら、移動先のCSSを書き換えたりするものだ。

しかしIEだけ対応していないので、これを逆に利用する。

ul li:not(:target) {
margin-bottom: 10px\9; /* IE9, IE10, \9を消せばIE11も適応 */
}

これで、:target を適用できない場合にだけ、margin-bottom が効いてくる。

IE9 -> margin-bottom: 10px
IE10 -> margin-bottom: 10px
\9 を消すと IE11 -> margin-bottom: 10px
\9 を消すと Microsoft Edge -> margin-bottom: 10px
その他のブラウザ -> 何もなし

 
 

3. CSSファイルでmediaアンカーを使う方法

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
ul li:not(:target) {
margin-bottom: 10px\9; /* IE10(\9を消せばIE11にも適用) */
}
}

-ms-high-contrast の本来の意味は、Webの表示にハイコントラストモードを使っているかの判定を行う。
-ms-high-contrast なので、マイクロソフト(つまりIE)のハイコントラストモードを判定している。

つまり、IEの場合だけCSSを読み込ませる。

-moz-high-contrasなどでFireFoxのハイコントラストモードを判定することも可能。


IE10 -> margin-bottom: 10px
\9 を消すと IE11 -> margin-bottom: 10px
\9 を消すと Microsoft Edge -> margin-bottom: 10px
その他のブラウザ -> 何もなし

 
 

4. HTMLの条件分岐で違うCSSを読み込ませる方法

CSSでなく、HTMLに書く方法。

<!–[if lt IE 10]>
<style type="text/css">
ul li {
margin-bottom: 10px; /* IE9以下 */
}
</style>
<![endif]–>

<!–[if IE 6]>
<style type="text/css">
selector {
margin-bottom: 20px; /* IE6のみ */
}
</style>
<![endif]–>

HTMLの条件分岐で、IE6やIE9以下でない場合はコメントアウトされ、IEの時にはスタイルシートを読み込む。

<!–[if lt IE 9]>
<link rel="stylesheet" href="/css/ie9style.css">
<![endif]–>

[if IE 9] でIE9のみ。
[if lt IE 10] で「10よりも下」なのでIE9以下。
となる。

ただし、IE10以上ではサポートされていない!
 
 

5. HTMLのmetaタグで、ブラウザの仕様を強制的に統一する方法

<head>内にmetaタグでブラウザの仕様を統一することができる。
ただし、CSSファイルやjsファイルの読み込みよりも上に記述する必要がある。
(CSSフィイルを読み込んだ後でブラウザ仕様を統一しても意味がない。CSSファイルを読み込む前にブラウザ仕様を統一しなければならない)

<meta http-equiv="X-UA-Compatible" content="IE=9">

これで、IE9以上を全てIE9モードで表示。

<meta http-equiv="X-UA-Compatible" content="IE=6; IE=9">

これで、IE9以上ではIE9モード、IE8, 7ではIE6モードで表示される。

 
 

全て日常的に使われている方法だが、1. 2. 3. は厳密に言うと全て「間違ったCSS記述法」であり、ブラウザの対応非対応を利用した方法だ。

今後、IE12やIEの最新版が出てきた時にどのような動きになるか読めないのが嫌なところだ。

スクロールしたら途中から出てきて、スクロール戻すと消えるメニューを作る方法

画面をスクロールしたらふわっと出てくるメニューを作る

 

スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニューと書いたが、メニューだけでなく、単純に画像を浮かび上がらせたりページの下までスクロールした時に「ページトップへ戻る」のリンクを出したりもできる。

 
 

用意するもの

sudden.js
sudden.css

sudden.js の中身

$(function() {
var navBox = $(“#menu”);
navBox.hide();
var TargetPos = 100;
$(window).scroll( function() {
var ScrollPos = $(window).scrollTop();
if( ScrollPos > TargetPos ) {
navBox.fadeIn();
}
else {
navBox.fadeOut();
}
});
});

 

sudden.css の中身

#menu {
z-index: 1000000;
width: 100%;
position: fixed;
display: none; /*最初は非表示に設定*/
top: 20px;
right: 0;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
}

絶対に必要なのが display:none; これで非表示にしておく必要がある。

それ以外は、場所や透過度、重なり順の設定などなので変更可。

 
 

HTMLの<head>と</head>の間で読み込む

<link rel=”stylesheet” type=”text/css” href=”css/sudden.css” /><!– menu途中で出てくる –>
<script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script><!– menu途中で出てくる –>
<script type=”text/javascript” src=”js/sudden.js”></script><!– menu途中で出てくる –>

先ほどの、sudden.csssudden.jsjqueryを読み込む。

順番に注意。
 
 

フワッと表示させるHTMLのメニューの部分

<div id=”menu”>
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>
</div>

画像は準備すること。

div=”menu” の間の部分が全て最初見えず、スクロールでふわっと表示される。
<p><img src=”img/menu.png” /></p>
<!– メニューの中身ここの<div>と</div>の間に書く –>

この部分は任意の内容に変更可能。

 
 

CSS、JSファイル、画像などのセットをまとめてダウンロードするのはこちら。

sudden.zip

 
スクロールしたら途中フワッと浮き出るメニューのデモページ
はこちら。

メニュー画像オンマウスで、2段目が横並びになるメニューの作り方

CSS1個とjsファイル2個で作る簡単2段メニュー

 

2段メニューデモページ

 

色々な応用ができるが、今回は、1段目のメニューは画像、1段目にオンマウスで2段目がニョロリと表れて、文字でリンクが入れれるような形。

 
 

必要なもの

まとめてダウンロードしよう → accordionmenu.zip からダウンロード。

中身:

accordion.css ← 背景色や1段目のメニューの横幅を変える時に編集する
accordion.js
jquery.min.js
・index.html ← 必要ソースは後述
・メニュー画像数個

 

上記個別ファイルは、ファイル名を変えて .txt にしているので、こちらから右クリックでダウンロード保存した場合などは、ファイル名や拡張子を .js.css なども含めて上記の状態に戻すこと。

 
 

HTMLソースコード

 
まずは <head> ….. </head> の間で CSS と js ファイルを読み込む。

<link rel=”stylesheet” type=”text/css” href=”css/accordion.css” /><!– accordionmenu –>
<script type=”text/javascript” src=”js/jquery.min.js” ></script><!– accordionmenu –>
<script type=”text/javascript” src=”js/accordion.js”></script><!– accordionmenu –>

 
 

メニューを作りたい場所で、HTMLソースを書く。
2段メニューの文字やリンク先はここに記述。

メニュー画像の横幅や背景色を変えたい時は、 accordion.css を編集。

<div id=”gnav”>
<ul>
<li><a href=”index.html” class=”n01″><span>ホーム</span></a>
<div class=”gnavList”>
<ul>
<li><a href=”リンク先1.html”>2段メニュー1</a></li>
<li><a href=”リンク先2.html”>2段メニュー2</a></li>
</ul>
</div><!– gnavList –>
</li><!– ホーム –>
~~~~~~
以下同じ形でメニューが続いて
~~~~~~
</ul>
</div><!– gnav end –>

 
 

accordion.js、jquery.min.js、accordion.cssの3つと、メニュー画像、HTMLをサーバーにアップロード

FTPソフトを使って、ホームページ上にアップロードする。

 index.html
 jsフォルダ
  accordion.js
  jquery.min.js
 cssフォルダ
  accordion.css
 imgフォルダ
  メニュー画像など

パーミッションなどは関係ないので、644などでOK。

 

2段メニューデモページ