top

やっとレスポンシブに

最近はほとんどアーカイブと化していたWingMemoですが、遅ればせながらレスポンシブに対応しました。

実はメインサイトをレスポンシブ化した時、こちらもレスポンシブにするかどうか考えていたんですが、スマホ対応する必要性があまりない気がして延び延びになっていました。MTのカスタマイズはスマホでは無理だろうし、MTのカスタマイズネタを探す人がスマホで見に来るとも思えなかったし。
実際、運営中の3つのサイトのアクセス解析を見ても、

Webコミックサイト→スマホとPCが半々
アニメファンサイト→ほとんどスマホ
WingMemo →ほとんどPC

となっていて、他の2つと比べてもスマホの需要はないな…という状況。それでもスマホだと見辛いのも確かだったので、一応簡単な対応くらいはしとくか…ということで重い腰を上げてみた次第であります。

160830_1.jpg 160830_2.jpg

PCでの見た目は変えたくなかったので、Media Queriesでスマホ用の記述を追加。ほぼ並び替えてるだけですが(^^;。なおグローバルナビは、スマホではonmouseoverが効かないので、onclickで出るように変更してます。
この機会にXHTMLからHTML5へも変更。ただ、MTのエンジンはXHTML前提らしくて「改行を変換」だと<br>とかが<br />になって出力されちゃいます。そのため本文をグローバル変数で変換。

<$MTEntryBody replace=" />",">"$>
<$MTEntryMore replace=" />",">"$>
<$MTCommentBody replace=" />",">"$>

これでbrもimgも最後が「 />」ではなく「>」になってくれます。
フォトログと過去ログも一緒にレスポンシブ化しましたが、さすがにサンプル頁などはそこまではもういいや~てことで非レスポンシブのままです。

しかしレスポンシブ化してわずか数日でスマホでの検索でWingMemoに「スマホ対応」が付いたのにはびっくり。Google先生、お仕事早っ!!

 

トラックバックURL

トラックバックされる際にはこの記事へのリンクをお願い致します

コメントを投稿

 


 <注意>
 ご利用のブラウザ、設定ではコメントのプレビューおよび投稿はご利用になれません。
 コメント投稿の際はお手数ですがjavascriptをオンにして下さい。
 *javascriptオフのまま投稿ボタンを押すと送信内容が消えますのでご注意下さい。