ビジュアルエディタとテキストエディタを切り替えるとHTMLタグが消えたりして困る

これWordpressのずっとかゆい所な気がする。

設定で、ビジュアルをオフに出来るんだけどそれをしてしまうと一般の方には到底投稿など出来なくなってしまう。

それ用に色々とプラグインがあるがちゃんと動ききるプラグインに出会えたことは無い。

そこで逆転の発想で、素人の人が触る時にエディタ切り替えなど眼中にないはず。逆にいえばテキストモードになってたら焦ってどうにか切り替えタブを探すはず。

ということで強制的にデフォルトのタブをテキストにしちゃう命令をfunction.phpに追記

add_filter( 'wp_default_editor', create_function('', 'return "html";') );

参考にさせていただいたサイト
http://locatimefree.com/always-show-text-mode-at-wordpress-editor/

SVGを使って画像や動画をマスクしたいけどclip pathはまだまだ使いづらい?

どうにもこうにもclip pathが使いづらい。
センターにどうやって置くの?かさえよくわからない。

知識が無いならば力技発動。

要は見た目がマスクならいいじゃない。
そこで考えたのが動画(画像)の上にカバーするように見えたい部分を抜きにした画像を重ねちゃう。

少しだけ頑張った?のが画像じゃなくてSVGでマスク。拡大されても大丈夫なように。

イメージはこんなかんじ。

20160222

 

で、後はVIDEOタグ等で動画を設置して、その後にdiv class=”mask”的な空要素を置く。

<video class="mask" autoplay loop >
<source src="mask.mp4">
</video>
<div id="mask"></div>

CSSは特に装飾とかをしないのであれば

#parent{
position:relative;
overflow:hidden;
}
video{
width:100%;
height:auto;
position:relative;
}
#mask{
position:absolute;
width:100%;
left:0;
top: 0;
height:100%;
background:url(mask.svg) no-repeat center center;
background-size:cover;
}

SVGを作るときに余白を考えながら書き出さないと上記サンプルの背景黒部分が表示されないので注意。

汎用性ゼロな対応・・・

contact form 7とさくらサーバーの相性がよろしくない?

WordPressの問い合わせフォームとしては良く利用するcontact form 7。

大抵使用します。特に問題も無いし。

で、初めて問題発生しました。

再現性をテストしきれていないので、なんとも言えないがさくらサーバーで取得していないドメインをさくらサーバーに割り当てた状態のWordpressサイトでコンタクトフォームの管理者宛のアドレスを以下のようにすると500 Internal Server Errorが返ってくる。

例)
サイトURL:http://hogehoge.com
問い合わせの内容が届く管理者アドレス:info@hogehoge.com

こんな風にしちゃうと500 Internal Server Error の嵐。

管理者アドレスをGmailとかに変更するとそのエラーは無くなるので原因はここであることは間違いない。

が、Google先生に聞いても皆困ったばかりで回答が見つからず。

とりあえずテスト段階だが、MW WP Formを利用すれば問題ないっぽいのでそちらを利用してみる。

ウェブデザインで各セクションの区切りを斜めにしてみたいと思う

事がよくある。

最近のサイトの流行りで画像なり、背景をブラウザ幅いっぱいにすることは良くあるがそれをすると大体サイトって似るのよね。

そこでなんか個性ということで各セクションの色の変わり方を斜めにする方法。

といってもそんなに難しくないけど。

ソース的にもオススメ出来ないけど。

一個斜め用のdivをおいてそれに高さを指定して

background: linear-gradient(to bottom right, #colorcode50%, #colorcode 50%);

とするとブラウザの幅に合わせて斜めがウニウニ調整されてピッタリになる。レスポンシブ対応といえる?かな。

これに気付く前はtriangeを作ってわざわざJsで幅認識してそれをCSSで上書きしてた。