[wordpress]プラグイン未使用でOGP設定

参考サイト様
[ WP ] OGPとは? WordPressにプラグイン無しで設定する方法

こちらで設定できましたー^^
ありがたやー(-人-)
カスタム投稿の説明文もそのまま出せるので助かります^^b

あと、fb:adminsの取得は下記のサイト様の
FacebookのOGPに fb:admins と fb:app_id の設定は必要?htmlタグのxmlnsは?

http://graph.facebook.com/username ここの部分で確認できます

[wordpress]レスポンシブ用 is_mobileでipad除外&ipadの判定

タイトルがもはや意味不明なほど頭が働かないこの頃。
とりあえずレスポンシブ作成中なんですがメディアクエリだと、どーにも表示位置(コンテンツの出力)が変更できないので、なんとかPC・スマホ・ipadで判別できないかなーと探してみたらありました。

is_mobile関数にipad除外すると、ipadの判定はどーしたらええねんと思ってましたがis_mobile関数流用するといけそうな感じでした。

参考サイト様:http://tetokon.com/2013/07/17/wordpress_ipad_kirikae/

そのまま引用させていただきまして、

function is_ipad(){
$useragents = array(
‘iPad’, // Apple iPad
);
$pattern = ‘/’.implode(‘|’, $useragents).’/i’;
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

こちらでいけるみたいです。
ありがたやー(-人-)

[jquery]アコーディオンメニュー改

大分前に書いたやつ([Jquery]マウスオーバー/マウスアウトでアコーディオンメニュー)だと読み込み時にメニューのところにホバーしているとずれてしまう現象が出たのでこっちに修正。

$(document).ready(function(){
    $(function() {
	$("#navgation li").hover(function() {
		$(this).children('ul').show();
		if($(this).find('ul').prev().hasClass("current")) {$(this).find('ul').prev().removeClass("current").parent().removeClass("current");
		}else {
			$(this).find('ul').prev().addClass("current").parent().addClass("current");
		}
		
	}, function() {
		$(this).children('ul').hide();
		$(this).find('ul').prev().removeClass("current").parent().removeClass("current");
	});
    });
})

[覚書]スマホでページ内リンク

ページ内リンク押せないので焦ってたらスマホは同ページ内リンク効かないですね

というわけで、こちらのサイトさんのコードを拝借しまして
http://mermaid1112.hatenablog.com/entry/2012/09/01/192503
http://jsdo.it/blogparts/sFQq 

<script>
var flag;
$('a')
.bind( 'touchstart', function(){
flag = true;
}).bind( 'touchmove', function(){
flag = false;
}).bind( 'touchend', function(e){
linkEvent(this,e);
flag = false;
});

function linkEvent(self,e){
if(flag){
var url = $(self).attr('href'),
$target = $(url);
if ($target.length) {
e.preventDefault();
//$(window).scrollTop($target.offset().top);
$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');

return false;
}
}
}

</script>

//で消している下の部分を

$(window).scrollTop($target.offset().top);

スムーズスクロールにしたかったんでこっちに修正して完了!

$('html,body').animate({ scrollTop: $target.offset().top }, 'normal', 'swing');

xamppでlocalhost サブドメイン設定の覚書

毎回忘れてしーまーうー のでええ加減にメモ

C:\xampp\apache\conf\extra\httpd-vhosts.conf

①NameVirtualHost *:80のコメントアウト外す

##NameVirtualHost *:80

②バーチャルホストの設定

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs"
    ServerName localhost
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot "C:/xampp/htdocs/demo"
    ServerName demo.localhost
</VirtualHost>

C:\Windows\System32\drivers\etc\hosts

①hostsにサブドメインを設定

127.0.0.1       localhost
127.0.0.1       demo.localhost

xamppのコンパネでapacheを再起動で完了!

IE7/IE8で背景透過が効かない場合

通常の↓↓では効かないので、

	filter:alpha(opacity=70);

こっちですると大丈夫みたいです。

        background-color:rgba(0, 0, 0, 0.5);
        filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7f000000,endcolorstr=#7f000000,gradienttype=0);
        -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000)";
        zoom:1;

うーんオーバーレイではまった。

css

まだ使って無いけどメモ

jquery教本に載ってたんですが
ネットに絶対導入方法あるだろうから買うのを渋ってしまう…

背景全面に動画を流すJqueryプラグイン【tubular】
http://code.google.com/p/jquery-tubular/downloads/list

パララックスオススメJqueryプラグイン【jarallax】
http://liginc.co.jp/web/js/jquery/24446

EC-CUBE viewport拡大許可でipadがずれたときの対処方法

スマホでPCサイトを見るという特殊なカスタマイズを加えていたので、
ipadで見るとviewportが邪魔をして拡大率がすさまじいレイアウト崩れが発生していた修正

とりあえず phpでipadかの判定を行い、ipadの場合はviewportを出力しないで一気に解決b
widthも1024pxかレイアウトの最大幅にあわせることで直りました。

ふー、よかったよかった。

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {
	#container {width:1024px;}
	}

<!--{php}-->
$isiPhone = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPhone');
$isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
if($isiPad){
    echo "";
}else{
    echo "<meta name=viewport content=width=device-width, initial-scale=0, maximum-scale=1, user-scalable=1 />";
}
<!--{/php}-->