スマートフォン向けのヘッダーテンプレート
今回はスマホ向けです。
基本的にはPC向けと同じでも問題ないです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="" />
<meta http-equiv="keywords" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="Author" content="" />
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
<link rel="stylesheet" href="index.css" type="text/css" />
<title></title>
</head>
<body>
</body>
</html>
ここでのポイントは、
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
の部分です。
meta name=”viewport"を指定すると、
iphone等のスマートフォンでの最初の表示サイズ等を指定できます。
contentの値に以下を記述して、細かく指定することができます。
height,width 幅と高さを指定
initial-scale 最初に表示した時の拡大率
user-scalable ユーザーが拡大できるか否かを、yesかnoで設定
maximum-scale ユーザーが操作可能な拡大率の上限
minimum-scale ユーザーが操作可能な拡大率の下限
基本的にはPC向けと同じでも問題ないです。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="description" content="" />
<meta http-equiv="keywords" content="" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="Author" content="" />
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
<link rel="stylesheet" href="index.css" type="text/css" />
<title></title>
</head>
<body>
</body>
</html>
ここでのポイントは、
<meta name="viewport" content="width=320, initial-scale=1.0, user-scalable=yes, maximum-scale=2.0, minimum-scale=1.0, ">
の部分です。
meta name=”viewport"を指定すると、
iphone等のスマートフォンでの最初の表示サイズ等を指定できます。
contentの値に以下を記述して、細かく指定することができます。
height,width 幅と高さを指定
initial-scale 最初に表示した時の拡大率
user-scalable ユーザーが拡大できるか否かを、yesかnoで設定
maximum-scale ユーザーが操作可能な拡大率の上限
minimum-scale ユーザーが操作可能な拡大率の下限
携帯（ガラケー）３キャリア向けヘッダーテンプレート
モバイルサイト向けのヘッダーのテンプレート。
厳密には３キャリア別にDOCTYPE宣言を書き分ける必要があるみたいですが、
いまのところ統一しても問題はなさそうです。
以下テンプレート
<?xml version="1.0" encoding="Shift_JIS"?><!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
</head>
<body>
</body>
</html>
今回の記事はこちら のサイト様の記事を参考にさせて頂きました。
【小ネタ】facebookのいいねボタンをアメブロの記事ごとに設置する。
ふと、いいね！ボタンを設置したいと思い立ち
つけてみました。
設置方法はいたって簡単です。
サイドバーの設定のフリープラグインに以下のスクリプトをコピペするのみ。
<script>$(function(){var c=location.href;var g=document.title;var a=$(".foot a:contains('記事URL')");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> ';$(".subContents").eq(i).after(" <span>"+e+"</span>")}});</script>
layout=standart の部分を、
layout=button_count にすることによって、
表示をボタンのみにすることもできます。
つけてみました。
設置方法はいたって簡単です。
サイドバーの設定のフリープラグインに以下のスクリプトをコピペするのみ。
<script>$(function(){var c=location.href;var g=document.title;var a=$(".foot a:contains('記事URL')");for(i=0;i<a.length;i++){var c=a[i];var e='<iframe src="http://www.facebook.com/plugins/like.php?href='+c+'&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80 " scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> ';$(".subContents").eq(i).after(" <span>"+e+"</span>")}});</script>
layout=standart の部分を、
layout=button_count にすることによって、
表示をボタンのみにすることもできます。