Tumblr前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。Mobileスマートフォンサイトを制作する流れです。前回のエントリーからjQueryMobileでスマートフォンサイトを制作し、その後幾つかの修正を重ねそれなりの形になってきたので作業の流れをまとめました。作業の参考になってくれたら幸いです。一般的なwebサイト制作と同様にまずラフを制作します。表示のされ方などもこの時点で決めておくと良いでしょう。MobileはHTML5のカスタムデータ属性を使用しますのでHTML5でマークアップします。Mobileは考えずに通常のマークアップをすると良いと思います。この時点ではCSSは適用させません。Mobileの定義を設定していきます。最初にCDNからファイルを読み込みます。Mobileより取得できます。HTMLにdata-roleなどのカスタムデータ属性を追加して行きます。日本語リファレンスが非常に参考になります。Spice"></h1><p>デザインスパイスでは、webデザインのtips、tutorial、topicsなどを公開しています。/><header><h2>Dreamweaverとwordpressを連携させてテーマを編集する方法</h2><data>2011.10.17</data></header><p>dreamweaverCS5からはWordPress(他にも一部のCMS)との連携が更に強化されました。/><header><h2>Dreamweaverとwordpressを連携させてテーマを編集する方法</h2><data>2011.10.17</data></header><p>dreamweaverCS5からはWordPress(他にも一部のCMS)との連携が更に強化されました。-->jQueryMobileの機能を実装する為に一部HTMLのタグを変更する場合もあります。その辺りは臨機応変に対応します。3.デザイン(テーマ)のカスタマイズマークアップが終わったらデザイン(テーマ)のカスタマイズをします。jQueryMobileにはa~eの5つのテーマが用意されてるので、それ以外の適当な文字をdata-theme属性で指定します。data-theme="z">今回は、x,y,zの3種類のテーマを併用しました。それぞれにCSSスタイルを適用して行きます。MbileのCSSの後にオリジナルのCSSを読みこんでスタイルを上書きします。MbileのCSSを複製して変更すると簡単です。MobileはJavaScriptでclass属性などが追加されますので、それらのスタイルを調べる際にはfirebugやsafariのWebインスペクタなどを利用すると便利です。静的なサイトであればここまでの作業で一通り完成となります。作成したhtmlをWordPressのテーマファイルに変更して行きます。Styleを使用しました。styleの独自タグとなります。Styleでは下記のテンプレートファイルは必須となります。バージョン、作者を記述)index.php(トップページ・カテゴリ一覧・検索結果)comments.php(コメント閲覧・投稿を行うなら必須)今回はこれ以外に下記の4つのファイルを作成しました。header.php(ヘッダー部分共通)footer.php(フッター部分共通)single.php(個別記事ページ)function.php(独自関数定義ファイル)css/ds-style.css(オリジナルcss。style.cssとは別にした)先ほど作成したHTMLのソース一部をWordPressのテンプレートタグに変えて行きます。この部分は一般的なWordPressテーマを作成する流れと変わりません。テーマ作成の具体的な方法は多くのサイトで紹介されるのでそちらを参照してください。Webクリエイターボックスindex.phpのソースのみサンプルで掲載します。?><h2>記事が見つかりませんでした。ディレクトリーを作成して、そこに転送します。テーマ」でiPhone,Android用に先ほど作成したテーマを選択します。以上でスマートフォンからアクセスした場合に、jQueryMobileを使用したオリジナルテーマが適用されます。5.Tipsなど制作時のtipsや気を付けたい点など羅列していきます。自動的に末尾のテキストが省略して表示されます。テキストを省略せずに表示するためにデフォルトのCSSを上書きします。追加する必要があります。今回殆どのページがこれに当たりましたので全リンクでAjaxを使用しない設定にしました。jQueryとjQueryMobileのjsの間に記述します。「前の5件」などのリンクはWordPressのテンプレートタグで出力してるのですが、このリンクのカスタムデータ属性はjQueryで追加する方法を取りました。Style固有の内容なので別の方法でスマートフォン対応してる場合は当てはまりません。/>が追加されるのでテーマファイルからviewportの記述を削除して問題ありません。変更すると動作するようになります。変更すると動作するようになります。Styleではリンクのドメインが省略されます。