« 2009年7月 | トップページ | 2009年9月 »

2009年8月

wordpressでページ毎にデザインを変える

wordpressでサイト構築をする際、どうしてもデザイン的に例外のページが発生してしまったので以下の方法でテンプレートを作成しました。

使用しているThemeディレクトリの中に、任意の名前.php のテンプレートを作成します。

テンプレートには

<?php
/*
Template Name: About
*/
?>

と入力します。「About」の部分は任意で、ページ投稿画面の属性に「テンプレート選択のドロップダウン」が追加され、選択が出来るようになります。
今回設定した「About」はドロップダウン部分に表示される名前です。

==================================

こちらを参考にさせていただきました。

WordPress ページ毎にデザインを変える


3キャリア共通のサイトを作成する場合のDOCTYPE宣言

携帯サイトを作成する場合、キャリア別に作成する場合はそれぞれDOCTYPE宣言が異なります。
しかし、3キャリア共通のサイトを作成する場合には以下のように記述します。

<?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">

この場合、拡張子は.htmlで保存します。
しかし、docomoのみ拡張子が.xhtmlでないと動作しませんので、.htaccessに以下を記述しサーバへアップします。

AddType "application/xhtml+xml; charset=Shift_JIS" .html

==================================

こちらを参考にさせていただきました。

モバイル機器向けXHTML仕様

携帯サイトの作り方

 

auで画像に文字を回り込ませる場合

携帯サイトで画像を左に配置し、文章を右に回り込ませたい場合、以下のように記述するかと思います。

<img src="img.jpg" style="float:left;" align="left" />
<div style="color:#ff0000;">回り込む文章</div>

auではfloat指定ができないので、同時にalign="left"を指定します。

これでうまくいくかな?と思ったのですが、文章が回りこまず。。。
調べてみたところ、auでは回り込む文章にdivなどのブロック要素を使うと、画像のalignがクリアされてしまい回り込まないのだとか。

そのため、以下のように記述したところうまく文章が回りこみました。

<img src="img.jpg" style="float:left;" align="left" />
<span style="color:#ff0000;">回り込む文章</span>

これを知らずtableでレイアウトしていた頃がありました。。。

 

« 2009年7月 | トップページ | 2009年9月 »