slide

wordpressの投稿でビジュアル・テキストの切り替えでspanが消える場合

wordpressの投稿画面でビジュアルとテキストを選んで編集することができますが、初期機能では<span>span</span>等をテキストで入力しビジュアルに切り替えると勝手に消えます。

調べるとtiny mceというwysiwygエディタを流用して実装されているとのこと。
プラグインを入れて解決する方法も検索するとでてきますが、プラグインは使用したくないのでfunctions.phpをいじります。

function custom_editor_settings( $initArray ){
	$initArray['body_id'] = 'primary';
	$initArray['body_class'] = 'post';
	$initArray['valid_children'] = '+body[style],+div[div|span],+span[span]';
	$initArray['verify_html'] = false;
	return $initArray;
}
add_filter( 'tiny_mce_before_init', 'custom_editor_settings' );

■【WordPress】ビジュアル・テキスト切り替えでタグが消える時の対処法(style,div,span,p,br等)
http://hapisupu.com/2015/09/wordpress-editor-visual-text-switch-tag-erase-fix/

上記のブログから教えていただきました。

spanで囲って装飾をつけたりする場合必須ではないでしょうか。

css3で回転(時計回り)

CSS3で2D右回転アニメーションしてみました。

.rote {display:block; width:100px;animation: rote 1.5s ease 0s infinite;}
@keyframes rote {
	0% {transform: rotate(0deg);}
	50% {transform: rotate(-180deg);}
	100% {transform: rotate(360deg);}
}

回転します

-指定で逆回転です。

値を変更できます。

ease
linear
ease-in
ease-out
ease-in-out

右側は0sからイーズを持たせるかどうか。

infiniteは無限ループ

css3アニメーションで点滅

CSS3でアニメーションしてみました。

.flash {animation: flash 1.5s ease 0s infinite;}
@keyframes flash {
    0% {color:gley;}
    100% {color:blue;}
}

点滅

値を変更できます。

ease
linear
ease-in
ease-out
ease-in-out

右側は0sからイーズを持たせるかどうか。

infiniteは無限ループ