HTML or XHTML
XHTMLは、CSSが使用できるため様々な表現を必要とするモバイルサイトの制作を考慮すると、
XHTMLでの作成がオススメ。
DOCTYPE宣言
現状では、キャリアごとに異なった宣言を推奨しているがキャリアごとにサイトを作成するのには手間がかかるので、3キャリア共通のモバイルサイトを作成するには、
XHTML Mobile Profileか
XHTML 1.0 Transitionalに従って記述するのが望ましい。以下が、その設定例となる。
XHTML Mobile ProfileのDOCTYPE宣言
<!--XML宣言-->
<?xml version="1.0"?>
<!--文書型宣言-->
<!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">
XHTML 1.0 TransitionalのDOCTYPE宣言
<!--XML宣言-->
<?xml version="1.0" encoding="Shift_JIS"?>
<!--文書型宣言-->
<!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" lang="ja" xml:lang="ja">
コンテンツMIMEタイプ
XHTMLの場合は、
application/xhtml+xmlが推奨されているため、以下のように設定する。
metaタグ
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=Shift_JIS" />
また、DocomoでXHTMLを動作させるためにはサーバが送り出すHTTPヘッダーでも出力される必要があるため、
.htaccsessに以下の記述を入れておく。
.htaccess
AddType application/xhtml+xml .htm .html
これを入れるとPCでモバイルサイトを見た場合に閲覧できなくなることもあるが、モバイルでは問題なく見ることができる上、GoogleやYahoo!のクローラもこの形式に対応しているため、モバイルサイトという観点からみるとあまり問題はない。
なお、モバイルサイト作成に関するより詳しい解説は、以下の本を参考にするとよい。この本を1冊買えば、3キャリアに対応可能なタグの使い方をマスターできる．これからモバイルサイトを作ろうとしている人は是非手元に置いておいて欲しい1冊だと思う。
携帯サイト コーディング&デザイン (大型本)
ホームページ作成のためにロゴを作成する必要があり、フリーで使えるロゴ作成サービスをいろいろ試してみたので結果をまとめておく。
アイコンを使ったオリジナルロゴを作成可能
プロがデザインしたようなロゴを簡単に作成可能。豊富に用意されたアイコンとフォントを組み合わせることでクールなオリジナルロゴが作成可能。Web上での利用はフリーで、自由に利用が可能。インターフェースも分かりやすく、特にオススメのロゴ作成サービス。
日本語が使えるロゴメーカー
上で紹介したLogoMakerをはじめ、海外のサービスでは日本語に対応していないサイトも多い。日本語を使いたい場合は、以下のロゴメーカーが役立ちそう。
こちらもグーグルやヤフーのアイコンを作成できるが、1文字ずつ文字のサイズや色を指定できるため、自分にあったロゴを作りたい人にオススメ。日本語にも対応している。
Web2.0風のロゴが作成できる。こちらもフォントでMSゴシックなどを選ぶことで日本語の使用が可能。
そのほかオススメ
Ferrariやスターウォーズなど、映画などで見かけたことがあるロゴを作成可能。2009/04/30時点では、Ferrari、STAR WARS、Harry Potter, Monster’s INC、Yahoo、Nintendoのロゴが作成可能。
上のLogo54.comと同じように、企業や映画のロゴを作成できるサービス。こちらはGoogleやコカコーラ、マトリックスなどのロゴが作成できる。
Tシャツなどでおなじみの、「I Love NY」のロゴを作成可能。ハート以外にも様々なアイコンが使えるのでTシャツのデザインを頼まれた人には役立ちそう。
フリーでも様々なものが作れることが分かったが、やはり自分の手でデザインした方がよりイメージ通りのものを作りやすい。photoshopを使うのであれば、以下の本が説明が詳しいので参考にするといいかもしれない。
Photoshopプロフェッショナル ロゴデザイン CS3/CS2/CS/7.0対応
URLを書き換えようと思ってWordPressのアドレスをいじったらハマってしまった。管理画面にも入れず、MySQLと格闘すること1時間あまりでやっと復旧。やはりこういうことは、バックアップを取ってからやらないとダメ。
まずはSSHでMySQLにアクセス
今回使用したのは、
Poderosaというクライアントソフト。GUIベースで操作しやすいのが特徴。
Puttyとか
Teratermでもいいけど。
MySQL起動
% mysql -u [user] -p [database_name]
データ書き換え
UPDATE wp_options SET option_value='元のURL' where option_name='siteurl';
UPDATE wp_options SET option_value='元のURL' where option_name='home';
これで元に戻るはずである。もし戻らない場合は、
SELECT * FROM wp_options WHERE option_name = 'siteurl';
などで、正しいURLがセットされているか確認するといいだろう。
このブログにも少しだけAdsense広告を張っているわけですが、表示される広告を見るとなぜか英語の広告ばかり。せっかく張るなら日本語の広告で表示させたいと思い解決策を調べたらwebdogにて解決策が見つかりました。
解決策としてはアドセンス用のタグで、
＜script type="text/javascript"＞
google_ad_client = "12345678";
google_ad_width = 600;
となっているところを
＜script type="text/javascript"＞
google_language = 'ja';
google_ad_client = "12345678";
google_ad_width = 600;
に変更するだけ。
英語の広告にお困りの方はぜひ試してみてください。
※2009/08/31 追記
アドセンスタグを改変するのは規約違反になるみたいです．
Google八分を避けるためにも，タグを改変しないほうが賢明．
ちなみに自分も元のタグに戻しています．
WordPressで記事を編集している際に、編集画面で改行したところに自動で改行を入れてくれる便利なプラグイン、brBrbrを入れているのだが、記事中にソースコードを入れたいと思い、<pre>タグで囲んだところ、<pre>タグ内で改行したところにさらに改行を入れてしまい、
#include
main(){
printf("hogehogen");
}
といったように、1行おきにソースが表示されてしまい困っていたが、調べたところ同じように悩んでいる人がたくさんいるらしく、すぐに解決。
以下が、解決方法
『wp-content/plugins/brBrbr.php』を開き、26行目から以下を追加します。
$brbr = preg_replace(‘/()(.*?)<¥/code>/ise', "clr_br('$0')", $brbr);
$brbr = preg_replace('/()(.*?)<¥/pre>/ise', "clr_br('$0')", $brbr);
WordPressでは、何か問題があっても先に誰かが解決してくれているというのは便利だと思う。
とりあえずWordPressの設置が完了。
設定していく上で参考にしたサイトが、
- CORESERVER（XREA）でWordpressを構築する手順
- WordPressでブログを作ったらまずやる26項目―SEO・アクセスアップのためのカスタマイズ
の２サイト。
まずはインストール
１のサイトを見ながらWordPressをインストール。
インストール自体は驚くほど簡単。
しかし、少し迷ったのはMySQL作成時の文字コードの設定。
WordPressではUTF-8が推奨されているようなのでそちらを選択しておくのがよさそう。
ほかは特に問題なく終了。
所要時間は約５分。
プラグイン
WordPressのよい所は豊富なプラグインがあること。
豊富すぎてどれを入れたらいいか分からないくらいだが、２のサイトが参考になる。
この中でSEO的に特に重要だと思うものをまとめてみる。
A.基本設定
１．テーマ（テンプレート）を選ぶ。
２．URL（パーマリンク）設定を『/%category%/%postname%/』にする
３．Pingooに登録して、Pingooで送信できない分のpingも設定をする。
１はデフォルトのままでは寂しいので好みで選びましょう。
２はURLにキーワードを含められるためSEO的に重要。
３は検索エンジンやブログランキングにインデックスされるのを早めてくれる。
B.サイトマップ生成＆登録
１．Google XML Sitemap Generatorを有効化して、サイトマップ生成
２．Googleウェブマスターツールに登録。
３．Yahooサイトエクスプローラーに登録。
全て検索エンジンにインデックスされるために重要。
msnは……
時間があればしておいた方がいいでしょう。
C.アクセス解析設置
１．Google Analyticsにサイトを登録。
PC用のアクセス解析はとりあえずこれを入れておけば間違いないかと。
D.ソーシャル化する
全部
アクセスアップのために最低限このくらいはしておきたい項目。
WordPress以外でもブログを作成後はやっておきたい。
そのほか加えておきたいプラグイン
最後に個人的にここに加えて導入したプラグインをまとめておく
１．All in One SEO
２．MightyAdsense
１は個別ページごとにメタキーワード、デスクリプションを設定でき、SEO対策の上では重要。
２はアドセンスの導入を簡素化してくれるプラグイン。
アドセンスを導入するなら入れておくと勝手に広告を出してくれるので便利。
一応、こんなところでしょうか。
いろいろとやることがあり面倒そうですが、作業としては簡単なのでぜひお試しあれ。
