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

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

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

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

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

nodu002048

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

 

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

nodu002046

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

 

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

nodu002070

 

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

 

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

nodu002049

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

 

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

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

adsense_185665_adformat-text_468x60_ja

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

 

これを630pxまで広げて（本当はＰＡＫＵＴＡＳＯと一緒の728pxまで広げたかったけれど）文章を読みやすくしました。その影響で右にあるサイドバーが336pxから

adsense_185665_adformat-text_336x280_ja

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

 

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

 

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

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

reading_00

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

 

エントリ部分のフォントサイズは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.ソーシャルボタン一覧にてんこもりを追加

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

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>

 

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

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

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

nodu002051

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

nodu002053

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

 

# iPhone 

RewriteCond %{HTTP_USER_AGENT} iPhone 

RewriteRule ^$ /m_index.html [R]

 

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

 

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

nodu002054

が、やっぱり同じような事を考える人がいるもんで to-Rさんの記事PC用とiPhone用のサイトを切り替える.htaccess[to-R]のパラメーターを記述することにより解消されます。html 以下に?mode=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つでＰＣ用とスマホ用兼用でＣＳＳの呼び出し方変えたりして構築するのだろうと思うのですが面倒なので、ブログ記事を２つ作ってみました。

 

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

nodu002056

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

 

ＭＴのソースはこんな感じ。

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

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

 

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

nodu002058

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

 

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

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

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

 

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

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

nodu002060

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

nodu002059

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

 

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

 

<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もつくっておいた。

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

nodu002061

【ＷＥＢクリエイターボックスさんの404！インパクトあるよねー】

 

404notfound

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

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

 

9.その他もろもろ

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

 

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

前の記事

新年！写真素材の旅行で鬼怒川温泉と初詣に日光東照宮へ行ってきました。

次の記事

良い記事やサイトへamazonポイントと交換可能なチップが贈れるGrow!ボタンを導入！各種設定や退会方法も

「Web制作に役立つネタ」に関連する記事

1年間コツコツ続けたハウツーサイト、立ち上げて大手から案件をいただくまでのお話.

指定した範囲の背景を動かしちゃうj-query『backgroundPosition』を導入してみた。.

増刷が決定した「Web制作の最新常識」の評判ってどうなの？レビューを読んでから、レビューしてみた.

Web制作のトレンド追うなら見逃せない！厳選ブログ70サイトに各RSSと推薦記事まとめ.

手書きフォントで抜群の安定感。susi-pakuの愛するフォント「ふい字」を紹介　#LOVEFONT.

Dwの可変グリッドレイアウトを使ってブログを構築した際に気をつけた事など.

【動画あり】HTML5に使われる108個のタグでカルタをしよう！遊んで学べて一石二鳥！.

何をすればホームページの表示速度が向上されるのか？検索順位にも関係する改善方法3つとチェックツールまとめ.

Movable Type6 のリリースを真剣に考えてみた。（対談）.

オススメの記事