ブログリニューアル!MTにjQuery mobile導入、文字の可読性など使い勝手重視に作りました

前回リニューアルしたのは東日本大震災のすぐ後ぐらいなので1年経たずに更新となりました!('A')ノ 相変わらず2chまとめサイト??っと勘違いされる当ブログですが、今回は見やすさ&使いやすさ&スマホ対応を重視して作りました。

【2012.2.19】追記しました。各ページごとのスマホ転送について

リニューアルしたきっかけ

去年の今頃はこんなブログだったのか・・・(ひどすぎワロタ)

nodu002048

あまり見かけなくなった3カラム構成となってます。ブログパーツも多々追加していたので非常に重たかったですね。

 

前回のブログデザインはこちら。

nodu002046

2カラムにしてスッキリ。おかげでアクセス数もアフィリエイトも大きく伸びました。が、色々なサービス(サイト)を作っていくうちにソースもサイドメニューもごちゃごちゃしてきたのですね。

 

それで、今回のリニューアルとなりました。('A')

nodu002070

 

きっかけは、WEBクリエイターボックスさんがサイトのリニューアルを行った際に設置されたスムースなタブメニューが秀逸で、その解説を書いたウェビメモさんの記事を読んでいたら『自分もリニューアルしたくなってきたぁあ。(V)(๑◉∀◉๑)(V)うぉおおおおおおおおおおお』っという感じでDw起動!

 

ちなみにウェビメモさんのサイトは細部まで作りこまれていてすごいです。

nodu002049

雰囲気も素敵だし、記事の内容も面白くて大好きなサイトのひとつとなっております。

 

1.エントリー部分を468px幅から⇒630px幅に変更しました。

以前はアドセンスの関係でエントリ部分の横幅を468pxにしておりました。

adsense_185665_adformat-text_468x60_ja

【このバナーがすっぽり入る感じの横幅でした】

 

これを630pxまで広げて(本当はPAKUTASOと一緒の728pxまで広げたかったけれど)文章を読みやすくしました。その影響で右にあるサイドバーが336pxから

adsense_185665_adformat-text_336x280_ja

【336px幅の原寸 ※これはPRじゃないよ。】

 

250pxに変更しています。広告サイズが小さくなったのでアフィリエイトの収入も減ってしまうかなと懸念する部分ではありますが、その分デザインでカバーしてみたいと思っています。('A') (サイドバーはシャドウで囲ってますけども一部ブラウザからだと見づらいのですよね・・・やっぱり画像に戻そうかな・・・検討中)

 

2.フォントや文字組について(行間やフォントサイズ)

メインのフォントをヒラギノ角ゴからメイリオに変更しました。リアル仕事のクライアントがメイリオ指定で制作依頼してきたので使ってみたら、 『あら見やすい』っという理由で決定しました。文字間空けるとヒラギノよりも読みやすいですね。('A')

reading_00

この辺はYATさんのブログWeb制作における文章の可読性について考える - YATのBlogを参考にさせてもらいました。YATさん良記事ありがとー。

 

エントリ部分のフォントサイズは16px、line-heightは1.4emと強引ですが見やすかったのでこれで決定です。

 

3.Lazy Loadで画像ファイルの遅延読み込み

横幅を広くしたおかげで以前よりも大きな画像を貼り付ける事がことができるようになりました。しかし、画像の読み込みに時間がかかってしまうと離脱率に直結する ので、lazyloadというjQueryプラグインを導入しました。保留中

nodu002050

Lazy Load Plugin for jQuery

これでエントリー上に画像が沢山貼られていてもスクロールするごとに読み込んでくれる(フェードインして)ですね。

【ここから追記】

mr_myself00 さんから、ご指摘ありましたので引用

最新版のlazyloadはsrc属性にダミー画像を入れてdata-original属性に本来の画像を指定するということで対処した微妙な感じのものですよ...いや微妙かどうかは人によるでしょうが

っということです。このlazyloadについて5509さんのブログにも追記されています。

pasiks001437

http://5509.me/log/lazyload

 

という事で導入する方は今後の修正があるか要確認が必要っぽいですね。

pasiks001438

GIGAZINEも導入しているっぽいので、どう対応するのか期待しておきます。

 

4.ソーシャルボタン一覧にてんこもりを追加

最近どのサイトを見るときでも使っているソーシャルてんこ盛りをエントリーのフッター部分に追加しちゃっています。w

nodu002052

先日、うちのブログで紹介した【超・愛用中】サイトのソーシャル数を瞬時に確認できる"てんこ盛り"が便利で可愛すぎ!製作者のactyさんインタビュー|susi-paku.com ソースをそのまま貼っているだけですが、これがまた便利なんです。このボタンを押すことで記事のソーシャル情報がブラウザ上で開いてくれますからね。試にこの記事のフッターにあるてんこ盛りをクリックしてみて下さい。

 

<a href='javascript:(function(){var d = document; var s=d.createElement("script"); s.charset="UTF-8"; s.src="http://actyway.com/bookmarklet/tenkomori.1-p.js?"+(new Date()).getTime(); d.body.appendChild(s)})();'><img src="tenkomori.png" width="60" height="61"></a>

 

今後、てんこ盛りをブログに貼って使う人が増えてくれたら嬉しい限りです。現在、てんこ盛りアイコンを作ってもOKと制作者のあくちーさんから許可もらった ので頑張って制作中です。出来上がったら公開する予定なのでお楽しみ―。('A')

5.jQuery mobileを利用してスマホサイトを作った。

スマートフォンだからスマフォなのかスマホなのか分らないけれど、ブログをiPhoneとかAndroidに対応させました。(movabletypeで作りました)

nodu002051

トップページにアクセスした際、PCからのアクセスかそれともスマートフォンからのアクセスかをhtaccess で判別して各々のページを表示させる仕組みです。

nodu002053

書き方としては、どこのサイトでもソースが出ている通り

 

# iPhone 

RewriteCond %{HTTP_USER_AGENT} iPhone 

RewriteRule ^$ /m_index.html [R]

 

を各スマートフォンごと設定していく感じですね。一応iPadだけはPCサイトを開くようにしています。画面大きいしね。

 

このようにhtaccess による判別を行った場合、スマホからPCサイトを見たくても自動的にスマホサイトに飛ばされる為閲覧することができない状態に陥ります。

nodu002054

が、やっぱり同じような事を考える人がいるもんで to-Rさんの記事PC用とiPhone用のサイトを切り替える.htaccess[to-R]のパラメーターを記述することにより解消されます。html 以下に?mode=pcを付与するという方法でスマホからのアクセスでもPCサイトが表示されるわけですね。これは便利です。('A')

【追記;2012.2/19】
上記設定の場合トップページのみしかページ振り分けされませんので、各ページで設定する場合、<HEAD>内にJAVAにて転送するよう記述します。

 

<script type="text/javascript">
if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) {
location.href = '/sp_<$MTEntryBasename$>.html';
}
</script>

 

上記をPC用エントリに入れるだけで、各ページをスマホで開いても自動的に転送されるようになります。

 

PCサイトとスマホサイトの記事が重複する為、検索エンジン的にスパムにならないよう区別

先日、スマートフォン版のGooglebot-mobile が導入されたようでPC版とスマートフォン版で異なるURLで同じ内容の記事を書いている人にとっては必読の内容となっています。

pasiks001435

スマートフォン版 Googlebot-Mobile の導入について

Google Googlebot mobile の質問スレ

 

上記の内容を読んでいると、htaccessでリダイレクトされる際はどうなるとか、色々質問が上がっている状態なので今後要確認ですね。現状では、rel="canonical"を設定する方法が最良ではあるみたい。

 

スマートフォン用ページに振り分けるときはrel="canonical"を設定する | 海外SEO情報ブログ

 

これで重複コンテンツの発生を防止することができますね。('A') あとはウェブマスターツール用のモバイル用XMLサイトマップの書き方も変えないといけませんね。

 

モバイル用sitemap.xml(XMLサイトマップ)|モバイルSEO|SEOまとめ

Google、PC版と同じURLでもモバイルサイトマップ送信を推奨 | 海外SEO情報ブログ

 

この辺を参照にモバイル用(スマホ用のサイトマップを作って送信する必要がありそう。

 

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" 

xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0">

 

サイトマップのurlsetをモバイル用に書き換えて送信するURLの前にmobileタグを貼る感じになっています。

 

<mobile:mobile />
</url>

 

pasiks001436

とりあえず、これで重複コンテンツとして判別されないようにはなりますかね。アフィリエイトも含んだブログを運営している人は気にしなくてはならない項目なのかな。

6.movabletypeでプラグインとか利用せずにスマホサイトを作ってみる

MT上でjQuery mobileを使っている人の記事がほとんどなくて自分なりに作ってみました。

nodu002055

通常ならブログ記事1つでPC用とスマホ用兼用でCSSの呼び出し方変えたりして構築するのだろうと思うのですが面倒なので、ブログ記事を2つ作ってみました。

 

PC用のブログ記事のパスにスマホ用のブログ記事パスの一部を追加すれば、相互間も簡単にできるんじゃないかと前々から思っていたので作ってみたら簡単にできて笑いました。

nodu002056

【記事のフッターにある"この記事をスマートフォンで見る"はPCとスマホ相互が確認できます。】

 

MTのソースはこんな感じ。

<a href="<$MTBlogURL$>●●●<$MTEntryBasename$>.html">

エントリによってはアンダーバーにより404が出ちゃうのでseparatorを付与しないといけないかもです。

 

もちろん、basenameにしたのはパーマリンクを設定してしまうと追記できる部分がなくなる為ですね。

nodu002058

逆にスマホ側から この記事のPC版を見るの際はPCのパーマリンクを振っておけばOKだから楽ですね。

 

こんな簡単にMTでjQuery mobile使えるのかよっと本人が一番驚いてます。制作日数は賞味2日くらいなので、この程度であれば誰にでも導入できると思います。('A')

7.スマホサイトの画像解像度の変更

記事内に貼られている画像サイズのままスマホで確認した場合、大きすぎて横スクロールが必要になったら見づらいですよね。(スマホ対応していないサイトに多いですよね)記事内の画像を自動的に各スマ―トフォンサイズにリサイズしてくれるjQueryでスマホサイト向けに画像サイズを縮小する方法: 小粋空間 という素敵なサンプルがあったので導入してみました。

 

先日の鬼怒川旅行の写真で比較してみます。

この記事のスマホサイト:https://www.susi-paku.com/sp_post_107.html

nodu002060

PCサイトはこのように画像の解像度はPC版と同じままです。

nodu002059

iPhoneでアクセスするとこのように280px幅に等倍縮小して表示してくれます。これは便利ですね。

 

コードは下記を追加すればOK

 

<script type="text/javascript">

jQuery(function(){

$('img').each(function(){

var max = 0;

if (navigator.userAgent.indexOf('iPhone') > 0) {

max = 280; // iPhoneの最大幅

} else if (navigator.userAgent.indexOf('iPad') > 0 ) {

max = 768; // iPadの最大幅

} else if (navigator.userAgent.indexOf('iPod') > 0 ) {

max = 280; // iPodの最大幅

} else if (navigator.userAgent.indexOf('Android') > 0) {

max = 280; // Androidの最大幅

}

var w = $(this).width();

var h = $(this).height();

if (max != 0 && w > max) {

$(this).width(max).height(Math.round((max/w)*h));

}

});

});

</script>

 

スマホごとに解像度を変更してあげる感じですね。自分の場合は280pxがちょうどよかったのでiPhone、Androidともにその解像度にしました。LightTabのようなAndroidタブレットの場合ちょっと小さい気がしますが(Android tabって無いのかな)これによって画像の横スクロールは防げるので重宝しますね。('A')

 

ちなみにiPhoneのジェネレーターはAdobe AirのMobilizer | Springboxを使ってます。

 

8.404NOTFOUNDもつくっておいた。

WEBクリエイターボックスさんのリニューアルに影響を受けたのなら404作らないといかんでしょう!('A')

nodu002061

【WEBクリエイターボックスさんの404!インパクトあるよねー】

 

404notfound

404のっとふぁうんど。('A')<そんなページないよ

非常にシンプルですみません。w 404にサイト内検索を設置するって良いアイデアですよね。参考にさせていただきました!

 

9.その他もろもろ

ブックマーク用のアイコンもてんどんまんに変更したり、フッター部分にあるバナーも作ってみたり、めざせ1000枚の所に画像を入れ替えで表示するようにしていますけども、特に面白いアクションを起こす仕掛けはありません。('A')ザンネン

 

サイトリニューアルについて長くなりましたがこんな感じで昨年末せっせこ作ってみました。この次は Google Feed APIで作ったアンテナサイトをjQuery mobileを利用して作り変えながらWEB屋のアンテナサイトを作ってみようかと目論んでいたりします。お楽しみに―、やる事いっぱいだわぁ・・・('A')おしまい