まずは大阪城。この日は曇り空だったのですが、さすがCANONの一眼レフ。暗いなりにシャープに撮ってくれます。

森ノ宮駅から大阪城公園に入園すると一番最初に出くわす噴水です。どこかの大学の陸上部がきてランニングでウォーミングアップをされていました。

お堀の冊で休む都鳥（ゆりかもめ）
近くの安治川から時々飛来するのかも。

地図でみると大阪城と安治川は近いですね。

大阪城横にある大阪ビジネスパーク

安治川に合流する地点で水上バスが来ました。

こちらは今話題の水陸両用バスではありませんんでした。アクアライナー。

そこでjQuery Mobileの「data-role=”listview”」で定義される
リストのデザイン変更について若干調べてみました。

今回は「data-role=”listview”」のリストに内包されるコンテンツの＜width＞横幅の設定変更（デフォでは右側①の空きが気になります）と右側に用意されるマーク②の色の変更、「data-role=”listview”」のリストの外側③のmarginの変更をしてみました。

①＜width＞横幅の設定変更

【html】
<ul data-role=”listview” data-inset=”true”>
<li>□□□□□</li>
</ul>

「data-role=”listview”」のリストに内包されるコンテンツ<li>□□□□□</li>のデフォルト設定では右側①の部分に間の抜けた空きが出来てしまうので、その部分をCSSで変更します。

jQuery Mobileのサイトよりダウンロードした元CSS「jquery.mobile-1.0b1.css」1411行目あたりにある

【CSS】
.ui-btn-icon-right .ui-btn-inner { padding-right: 33px; }

を今回作成したテーマのstyle.cssにコピーします。

②「data-role=”listview”」のリストに生成されるマークの色の変更

jQuery Mobileのサイトよりダウンロードした元CSS「jquery.mobile-1.0b1.css」697行目あたりにある

/* —Icons—*/

.ui-icon-arrow-r {
background:#FF9933;
background-image: url(images/icons-18-white.png);
background-position: -108px 50%;
}

.ui-icon-arrow-u {
background: #FF9933;
background-image: url(images/icons-18-white.png);
background-position: -180px 50%;
}

を今回作成したテーマのstyle.cssにコピーします。
赤文字部分を任意の色に設定変更します。
それだけではアイコン画像がなぜかリンク切れで非表示になるのでjQuery Mobileのサイトよりダウンロードしたアイコン画像の入った「images」フォルダーをサーバーにアップします。

すると下の写真のように丁度良い具合の見た目に変化しました。

③「data-role=”listview”」のリストの外側のmarginの変更をする。

style.cssに下記のコードを記して赤文字部分で任意のmarginに変更します。

.ui-content{ margin: -5px; position: relative; }

丁度良い具合に変更できたのではないでしょうか？

制作するときに下記のサイトを参考にしました。

参考サイト

http://www.catswhocode.com/blog/how-to-create-a-mobile-wordpress-theme-with-jquery-mobile

今回のjQuery Mobileは1ページで作らずに
既存のwordpressのテーマにjQuery Mobileを呼び込む要素を配置する方法で複数ページで作成しました。

その時にjQuery Mobileの仕様で内部リンクのページ遷移で下記ような

• 「header部の「Back」ボタンとサイトのタイトルが被る」
• 「トップページの画像をエフェクトさせるjavascriptが効かない」

等のエラーが出ていたので下記のサイトを参考に修正しました。

参考サイト

http://dev.screw-axis.com/doc/jquery_mobile/components/pages_dialogs/anatomy_page/

回避作として「Back」ボタンや「戻る」ボタンのリンクに対して「rel=”external”」か「data-ajax=”false”」のいずれかを追加します。

<a href=”http://kys-web.com/maeda/lab/” rel=”external”>HOME</a>

また、スマートフォンごとにテーマを振り分けるプラグインとして
「WPtap Mobile Detector」を使用しました。

http://wordpress.org/extend/plugins/wptap-mobile-detector/

この辺もwordpressは便利ですね。

また、iphoneは横持ちと縦持ちで表示比率が変わります。

その場合は専用テーマのCSSで
画像<img>のプロパティのwidthとheightの設定で回避してみます。

img{
width:100%;
height:auto;
}

こう設定することで、すでに記事に挿入済みの画像が
横100％、縦は横の表示に合わせた比率に自動的に変化してくれます。

ipadでも表示されますが、少し画像が大きく感じるでしょう。

IEで見ると画像の下に隙間ができる現象。

IEの独自の設定でbaselineになっているから。

そこでCSSで修正

img {
vertical-align: top;
}

と記入すると修正できる。

※vertical-align: top;はbottomとしてもよい。

phpmayadminからダウンロードしたsqlのデータをDreamweaverなどで開き

パスの置き換えを行う。

httpから始まるものや、/virtual/から始まるルートパスを置換する。

その際、xserver側であらかじめwordpressがインストールして使用しているものがあれば
そのDBをダウンロードして中を開いてみれば変更箇所の参考になる。

この2つのメソッド。
とても大切なものらしい。

wordpress3.1にバージョンアップするとログイン中はサイトとダッシュボード内の上部に管理バーが出るが、今回自作テーマに関してサイトの方に表示されなかった。

twentytenや人のテーマには表示されるのに、自分の作ったテーマには表示されない？
このままでは気持ち悪いのでいろいろ調べていくと、

この管理バーは<?php wp_footer(); ?>というメソッドで呼び出されているらしい。ということが分かりました。

この一文が抜けていたので表示されなかった。

header部の</head>タグの直前に入れる<?php wp_head(); ?>は
以前plugin関連で動作しない時に調べて入れていたのだが、

footer部の</body>タグの直前に入れる<?php wp_footer(); ?>に関してはまったく知らなかった。

今後自作テーマをつくる際は2つのメソッドは必須としておいた方が良いだろう。

記事抜粋で設定文字数を超えると表示される[...]これ。WordPress 2.9 以降では、excerpt_more フィルターを使って変更することができるらしい。

[php]
<?php
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
function new_excerpt_more($post) {
return ‘ … <a href=”‘. get_permalink($post->ID) .’”>’.'続きを読む>>’.'</a>’;
}?>
[/php]

以上のコードをfunction.phpに記述してサーバーにアップする。

なぜか画面が白くなるエラーが出る場合があるので、その場合は
[php]
<?php
function new_excerpt_more($post) {
return ‘… <br/><a href=”‘. get_permalink($post->ID) . ‘”>’ . ‘…続きを読む’ . ‘</a>’;
}
add_filter(‘excerpt_more’, ‘new_excerpt_more’);
?>
[/php]

こちらを使ってみる。

上の図のように装飾したい場合
CSSでtext-indentプロパティーとpadding-leftプロパティーを使って表現することができます。

【HTML】
[php]
<ul>
<li> 2010年10月26日  3つめのサンプルを入荷いたしましたが、
これについては後日発売日を発表いたします
</li>
</ul>
[/php]

【CSS】
[php]
ul li{
padding-left: 120px; /*120px分、右に動かす*/
text-indent: -120px; /*最初の行だけ120px分、左に動かす*/
}
[/php]

※ただし、下げ幅の値はブラウザによって見え方に誤差が生じるので注意が必要です。

blogやCMSには必ずといっていいほど検索フォームがでてきます。

wordpressの送信ボタンを画像に置き換えて装飾します。

【html】
<form method=”get” id=”searchform” action=”<?php bloginfo(‘home’); ?>/”>
<div>
<input type=”text” value=”Search” name=”s” id=”s” onfocus=”if (this.value == ‘Search’) {this.value = ”;}” onblur=”if (this.value == ”) {this.value = ‘Search’;}” />
<input type=”image” id=”searchsubmit” src=”<?php bloginfo(‘template_url’); ?>/img/button.png”  alt=”送信する” width=”45″ height=”25″ value=”<?php _e(‘Search’,'kubrik’); ?>” />
</div>
</form>

【CSS】
#searchform{
text-align:center;
width:205px;
height:35px;
position:absolute;
top:44px;
right:30px;
margin:0;
padding:0;
background:url(img/seach_back.png) no-repeat top left;
}

#searchform #s{
margin:9px 0 0 11px;
width: 130px;
height: 20px;
border:none;
float:left;
}

#searchform #searchsubmit{
margin:4px 4px 0 0;
float:right;
}

重用なのはCSSの中で
#searchform #sと#searchform #searchsubmitのところで
それぞれ
float:left;　float:right;
としているところ

marginがきれいにそろってくれます。