PC版とスマートフォン版テンプルナイツ統合のお知らせ

 本日、PC版テンプルナイツとスマートフォン版及びタブレット版テンプルナイツを統合しました。

 昨日まではスマートフォン版を「iphone.temple-knights.com」で運営していましたが、本日からは「temple-knights.com」となります。

1つのHTMLであらゆるデバイスに最適化

 統合に際しては、今注目の1つのHTMLであらゆるデバイスに最適化したWebサイトを実現する制作手法「レスポンシブWebデザイン」を採用しました。

 具体的には解像度が横1024以上をパソコン向け。横767以下をスマートフォン向け。横768以上1023以下をタブレット向けに最適化してあります。

解消した問題

 今まではTwitterで「ツイート」した際のアドレスがPC版とスマートフォン版で異なっていたり、パソコン版からスマートフォン版への転送(リダイレクト)が発生していましたが、それらの問題は無くなりました。

デバイス毎の表示サンプル

 今回はPC版トップページを3カラム(左サイドバー、メインコンテンツ、右サイドバー)から2カラムへ変更した程度。色や記事の配置などデザインはほとんど変わっていません。

 Windows 8+IE10、Windows 7+IE9、Windows XP+IE8での表示は以下の通りです。フルスクリーンではなくウィンドウ表示にすればタブレット向け、さらに小さくすればスマートフォン向けの見た目に変化します(IE10、Chorme、Firefox等)。なお、Chorme、FirefoxはIE10とほぼ同じ表示。PS3もパソコン向けを表示。

Windows 8+IE10 TOPページ
Windows 7+IE9 TOPページ
Windows XP+IE8 TOPページ

 iPadは画面上部にメニューを表示。今まで表示していなかった概要ページ、Profileページ、リンクページ等が選べるようになっています。PS Vitaもタブレット向けを表示。

iPad TOPページ

 iPhone、Androidは画面上部にメニューの表示は無く、ページ全体の真ん中当たりに表示されます。ニンテンドー3DSもスマートフォン向けを表示。

iPhone TOPページ

Web作成者向けに1点

 ちなみに「レスポンシブWebデザイン」でのWebサイト作成にあたって、私が気になった点を1点。

 IE10 プレビュー版では「Flexible Box Layout」が「display:-ms-box;」でしたが、IE10正式版では「display:-ms-flexbox;」になっていました。

 IE10はまだ情報が少なかった為、CSSの仕様の確認にマイクロソフト公式のWindows Internet Explorer デベロッパー センターが一番役に立ちました(苦笑)

テンプルナイツの閲覧割合:統合前

PC:スマートフォン:ガラケー

  • 72:22:6

PC版閲覧に使われるブラウザ

  • IE9 34%
  • IE8 14%
  • IE7 3%
  • Chrome 20%
  • Firefox 20%
  • Safari 3%
  • Opera 2%

投稿者: (公開日:/最終更新日:)

テンプルナイツ記事別アクセスランキング

1位ネタバレしか存在しない『Fate/Zero』のその後の話2012年06月24日
2位もう1つの第四次聖杯戦争『Fate/Accel Zero Order』内容と相違点2016年05月04日
3位TVアニメ『鋼の錬金術師』新シリーズは声優が11人も変更に!2009年03月06日
4位小説、ノベル、ゲームシナリオの書き方・作り方2005年10月29日
5位FGO 英霊剣豪七番勝負の『魔界転生』パクリ騒動に思うこと2017年10月22日
6位『HUNTER×HUNTER』の冨樫義博先生が離婚したらしい2010年08月23日
7位米マクドナルド、女性店員を全裸にして3時間半いやがらせ2007年10月08日
8位少年マガジン『デスノート』のパクリを認め、正式に謝罪!2007年12月22日
9位機動戦士ガンダムSEED DESTINY COMPLETE BESTでキラの階級が判明!2005年10月15日
10位ここ20年の放送自粛アニメ一覧2008年1月16日