スマートフォンサイトを簡単に作る方法２
前回の続きです。
ソースの雛型をお見せしますね
テキストエディタにコピペして使ってください。
操作する場合はテキストエディタで「utf-8」で保存できるエディタを使用してくださいね。
ここから
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="[キーワード1],[キーワード２],[キーワード３]" />
<meta name="Description" content="[サイト内容]" />
<title>[タイトル]</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!--ヘッダー部分-->
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<!---->
<div align="center">
[画像等]
</div>
<div align="center">
<p>[サイト説明]</p>
</div>
<!--メニュー-->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Menu</li>
<li><a href="#1">
<h3>[メニュー１]</h3>
</a></li>
<li><a href="#2">
<h3>[メニュー２]</h3>
</a></li>
<li><a href="#3">
<h3>[メニュー３]</h3>
</a></li>
<li><a href="#4">
<h3>[メニュー４]</h3>
</a></li>
</ul>
</div>
<!---->
<!--フッター-->
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!---->
<!--小ページ1-->
<div data-role="page" id="1" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー１]</h3>
<!--必要に応じ画像などを挿入-->
<!--[画像等]-->
<p>[メニュー１文章]</p>
<!--ここまで-->
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!---->
<!--小ページ2-->
<div data-role="page" id="2" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー２]</h3>
<p>[メニュー２文章]</p>
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!--以下同様-->
<div data-role="page" id="3" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー３]</h3>
<p>[メニュー３文章]</p>
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<div data-role="page" id="4" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー４]</h3>
<p>[メニュー４文章]</p>
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!---->
</body>
</html>
ここまで
index.htmlとして保存して、FTPソフトでサイトにアップすればOKです。
＊必ずutf-8で保存して下さいね
私が使ってるエディタはUnEditor です。
置換機能を使って簡単に書き換えもできますし、
ワンクリックで表示も確認できます。
bptranとCSVを使えば、量産もできるようにしてあります。
皆さんの発想で弄ってみてください。
ソースの雛型をお見せしますね
テキストエディタにコピペして使ってください。
操作する場合はテキストエディタで「utf-8」で保存できるエディタを使用してくださいね。
ここから
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="[キーワード1],[キーワード２],[キーワード３]" />
<meta name="Description" content="[サイト内容]" />
<title>[タイトル]</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css">
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<!--ヘッダー部分-->
<div data-role="page" id="index" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<!---->
<div align="center">
[画像等]
</div>
<div align="center">
<p>[サイト説明]</p>
</div>
<!--メニュー-->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Menu</li>
<li><a href="#1">
<h3>[メニュー１]</h3>
</a></li>
<li><a href="#2">
<h3>[メニュー２]</h3>
</a></li>
<li><a href="#3">
<h3>[メニュー３]</h3>
</a></li>
<li><a href="#4">
<h3>[メニュー４]</h3>
</a></li>
</ul>
</div>
<!---->
<!--フッター-->
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!---->
<!--小ページ1-->
<div data-role="page" id="1" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー１]</h3>
<!--必要に応じ画像などを挿入-->
<!--[画像等]-->
<p>[メニュー１文章]</p>
<!--ここまで-->
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!---->
<!--小ページ2-->
<div data-role="page" id="2" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー２]</h3>
<p>[メニュー２文章]</p>
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!--以下同様-->
<div data-role="page" id="3" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー３]</h3>
<p>[メニュー３文章]</p>
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<div data-role="page" id="4" data-theme="b">
<div data-role="header">
<h1>[タイトル]</h1>
</div>
<div data-role="content">
<h3>[メニュー４]</h3>
<p>[メニュー４文章]</p>
</div>
<div data-role="footer">
<h4>© [タイトル]</h4>
</div>
</div>
<!---->
</body>
</html>
ここまで
index.htmlとして保存して、FTPソフトでサイトにアップすればOKです。
＊必ずutf-8で保存して下さいね
私が使ってるエディタはUnEditor です。
置換機能を使って簡単に書き換えもできますし、
ワンクリックで表示も確認できます。
bptranとCSVを使えば、量産もできるようにしてあります。
皆さんの発想で弄ってみてください。
スマートフォンサイトを簡単に作る方法
スマートフォン、最近急に普及してますよね・・
でも、どうやって作るのが良いのでしょう？
簡単に作れる方法があります！
見本サイト
こんな感じです。
ｊQuery Mobile というスクリプトで簡単に実現可能です。
CSSを知らなくても勝手にサイトをスマフォ用に整えてくれます。
量産も簡単にできます。
通常のHTMLで書き出せますので、無料のサーバーでもOKですよ。
続きは次回にでも・・
でも、どうやって作るのが良いのでしょう？
簡単に作れる方法があります！
見本サイト
こんな感じです。
ｊQuery Mobile というスクリプトで簡単に実現可能です。
CSSを知らなくても勝手にサイトをスマフォ用に整えてくれます。
量産も簡単にできます。
通常のHTMLで書き出せますので、無料のサーバーでもOKですよ。
続きは次回にでも・・
QHM Mobile というソフトがあります。
久々になってしまいました・・・汗
携帯サイトの作り方がイマイチ解らないと言う方にオススメなソフトを紹介したいと思います。
QHM というホームページ作成ソフトがあるのですが、それの携帯版です。
本来はQHM Proの購入者の方しか買えないようですが、無料版で十分使えるかなと思い紹介します。
最低限、FTPソフトが使える方向けで、PHPが動くサーバーじゃないと動作してくれませんが・・・
ご自身でレンタルサーバーを借りてる方なら、ほぼ問題無いかなと思います・・ｗ
QHM Mobile
サイトにアップした後は、サイト上で編集ができますよ。
SEOにも強いみたいです。
携帯サイトの作り方がイマイチ解らないと言う方にオススメなソフトを紹介したいと思います。
QHM というホームページ作成ソフトがあるのですが、それの携帯版です。
本来はQHM Proの購入者の方しか買えないようですが、無料版で十分使えるかなと思い紹介します。
最低限、FTPソフトが使える方向けで、PHPが動くサーバーじゃないと動作してくれませんが・・・
ご自身でレンタルサーバーを借りてる方なら、ほぼ問題無いかなと思います・・ｗ
QHM Mobile
サイトにアップした後は、サイト上で編集ができますよ。
SEOにも強いみたいです。