素人による非常識なスマホ対応状況その1【レスポンシブWEBデザイン】

spuspu-sumaho03

 今回はSpuSpu.jpのスマホに対応させるためにテンプレートをカスタマイズしていたのでその話をしようと思う。

 なお肝心の作っているブログの中身の生記事がしばらく更新できていないが、スマホの対応が完了するまでもう少しだけまってね。

それではレポートを始めよう。

WordPressの使用

spuspu-sumaho02

 このブログは以前にも話したとおりここと同じwordpressを使用して、その中の”twenty tweleve”というwordpressのテーマ(テンプレート)をカスタマイズして使用している。

完全なオリジナルというわけではなくしかも標準のテンプレートの使用しているが、実際はかなりプラグインの使用やCSSのちょっとした変更でかなり見た目を変えることができるので、7割ぐらいは作ったサイトということになるだろうか。

例としてはこのsec-404と今作っているSpuSpu.jpは同じワードプレスで同じTwenty Twelveを使用しているのでかなり作りこめることがわかると思う。

方針は使い勝手の最適化と機能の削減

spuspu-sumaho04 スマホ対応にやっていることに関してはこの製作レポートと同じように、スマホ専用のテーマを別に用意して表示させる方法をとっている。具体的にはMulti Device Switcherというプラグインを使用する。これは特定の端末のときに他のテーマを読み込むように指定できるもので、またPCとスマホように切り替えられるスイッチの導入もできる。

 モバイル用のテーマに関しては現在使っているtwenty twelveを丸々コピーしてモバイル用としてカスタマイズしている。改造内容はスマホ用にフォントサイズの最適化することやサイドバーの丸々の排除などとりあえずスマホにとって使いやすくそしてなによりも極力無駄を省いてサイズを小さくすることのふたつを柱に製作を進めている。

Sec-404との違い

spuspu-sumaho05 今回のSpuSpu.jpのカスタマイズからはトップページのレイアウトなどを変更をおこなっている。主にスマホ専用のウィジェット(フッターに人気記事一覧とか)の追加とか、ヘッダー画像を別のロゴ画像に差し替えるなどだ。

 正直前回まではWordpressのテンプレートがhtmlではなくphpで組まれていて、htmlやcssがちょっとかじってみたみかん魚本人にはわけわかめ状態で少し敬遠していたがネットの海にいろいろと情報を載せてくれていたおかげでなんとなくは読めるようになった(あくまでなんとなく)。

 仮にこのスマホ用テンプレートはテストサーバーで製作されており、とりあえずあとは適当な妥協点をみつけて本サーバーに移行させる予定。なお現在サーバーで利用しているのはWptouchというスマホ用テーマのプラグイン。

今後の予定は未定

spuspu-sumaho01

 スマホ対応をひとまず終わらせたら今度はゲーム日記以外の新しいことを始めていく予定だ。予定なのだが、いくつか案が思い浮かんでいるけどどれからはじめようかを決めかねている状態だ。つまり予定は未定。

ただひとつ言えることは、なにからやるかが大切だということだろうか。

ということで今回はここまでにしておこう。

それでは、またの機会に…。


The following two tabs change content below.
みかん魚

みかん魚

みかん魚は仄暗い水の底から這い上がってきたインスマス面の魚っぽい人、ポ○ョじゃないよ。好きな食べ物はサーモンのお刺身。あとここの管理人です。

コメントを残す

名前、メールアドレス、ウェブサイト欄の項目は必須ではありません。名前欄を空欄のまま投稿にするとデフォルトネーム(名無し)が設定されます。


*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>