スマホメニュー

スマホの検索バーの表示・非表示でもリサイズ判定されるので対処してみた。

resize-decision

Javascriptで動きをつけている時、ウィンドウのリサイズで動きをリセットしたい時もあるかと思います。
例えば、BREAK PANELもブラウザのサイズを変更すると、それに合わせてゲーム画面も変更するようにしています。

しかし、ただ単にリサイズされた時という判定をしているとスマホ等で予期せぬ動きをしてしまいます。

BREAK PANEL

break-panel

前回のBREAK 25 PANELはHTMLのDOMを操作して制作しました。
今回のバージョンはHTML5から登場したcanvas要素を操作して制作しています。
あと動きを少しリッチにしたり、難易度設定を出来るようにしてあります。

WordPressの.htaccessについて-特定のURLだけhttpsに飛ばしたりhttpに飛ばしたり

wp-htaccess

Wordpressで作ったサイトをSSL化することがあると思います。
サイト全体をhttpsにしたり、もしくはお問い合わせフォームだけhttpsにしたり。
お問い合わせフォームだけでしたら、既存のWordpressのプラグインで簡単に特定のURLだけをSSL化できます。

しかし今回は、サイト全体をhttpsに遷移させて、ある特定のURLだけをhttpに遷移させるというものでした。
いろいろプラグインを探し回りましたが、目的を達成するようなプラグインは見つかりませんでした。

どうやら.htaccessで何とかしないといけないということで、何とかしてみました。

PHPで画面サイズを判断して分岐したかったので、Jsで取得した画面の横幅を、sessionに入れてみた。

サムネ

HTMLが読み込まれる前に、画面サイズによって、要素にclassを付けたり付けなかったりしたかったので、どうにか出来ないか考えて見ました。
<input type=”hidden”>は使いたくなかったので、別の方法で試行錯誤してますが、言ってしまえばAjaxを使っているだけです。

YouTubeの動画をレスポンシブに対応させて貼り付けて見ました。

youtube

会社紹介の動画をホームページに貼り付けたり、個人のブログでYouTubeの動画を紹介したりしたい時があると思います。
でもただ単に貼り付けるだけだと、スマホで見た時に、画面内に収まらず見きれていたりして格好悪くなっているサイトとか結構あったりします。
別でスマホページを用意している場合は良いかもしれませんが、メディアクエリ等でいろんなブラウザサイズに対応させている場合は困ります。
そんな時に役たつ、YouTubeの設置方法をメモしておきます。

Advertising

最近の記事

アーカイブ

Advertising

Advertising

カレンダー

2016年12月
« 5月    
 123
45678910
11121314151617
18192021222324
25262728293031

タグ

Social