5月 172014
 

今までこのブログはレスポンシブデザインに対応していませんでした。PCからの閲覧しか想定してなかったのですが、スマートフォンから見づらいって言われたので、手軽に対応できそうならやっておくかと。で、対応させました。普段PCからしか見ない人にはほぼ無関係の話だと思いますけどね。

レスポンシブデザインとは

昔はモバイル向けサイトなどは、リクエストを送信したユーザのユーザエージェント情報を見て、PCか携帯かを判断して専用のレイアウトで組まれたページをレスポンスとして返すことをしていました。レスポンシブデザインは、表示幅に合わせてレイアウトを切り替えることを同じファイルで実現します。これによってユーザーエージェント情報をいちいち調べなくていいし、ユーザ環境の中で動的にレイアウトを切り替えられるし、別々にデザインすることによる不整合の発生を防げます。近年のトレンドですね。

要は、スマートフォンの縦持ちや、PCでブラウザの窓を狭くした時とか、その幅に合わせたレイアウトになります。サイドバーが記事の下に回るとか、そういう対応ですね。スマートフォンなんかは縦持ち横持ちの切り替えがページ読み込み後にできるので、ここでレイアウトを切り替えるにはレスポンシブデザインが都合がいいわけです。

Suffusionでレスポンシブレイアウト

今使ってるSuffusionテーマは人気が高く更新も活発に行われるため、対応してるんじゃないかな?と思い、調べてみたら、

バージョン4.4.0(2012年12月リリース)からサポートされているようです。私がWordPressに移行した時点で既に対応されてましたね・・・。ということで、レスポンシブレイアウト機能を有効にしておきました。

管理画面→外観→Suffusion Options→Layouts→Responsive Layouts まで移動して、「Enable responsive layouts」にチェックを入れて設定を保存するだけ。うわー、簡単すぎる・・・。

とりあえずスマートフォンから見やすくなったからもういいやってことで、細かい設定はいじってませんが、どのブレイクポイントを有効にするかとか、各ブレイクポイントごとの設定があります。ブレイクポイントはレイアウトを切り替える表示幅のことですね。デフォルトでは、980px、650px、480px、320px、240pxすべてが有効になっています。幅240pxは初代iPhoneとかですね。今頃そんな環境の人あまりいないと思うけど。

はい。最初にやっておけばよかったですね。デフォルトで有効にしてくれても別に困らないのだけど。

8月 162013
 

WordPressには色んなテーマがあるんですが、多すぎてお目当ての物を探すのには苦労します。そこらへんに転がってる野良テーマを使うとセキュリティ面で問題があるという話もあるし、公式に配布されているものを使うのが無難でしょう。タダだし、更新チェック効くし。そうして私が探した中で、唯一これだ!と思えたのが、現在使っている「Suffusion」です。

Suffusionはカスタマイズ項目が豊富なのですが、ほとんど手つけてないです。ヘッダの下にメニューバー追加したぐらいですかね。あとは直接コード書いてたりしてますが、それについてはあとで触れます。ともかく、ほとんどいじらなくていいぐらい完成度が高く気に入ってます。シンプルで見やすいのがいいんですよ。

WordPressは本体・テーマ・プラグインの最新版がないか自動でチェックしてくれます。Suffusionの開発は盛り上がってるみたいで、全然更新されなくて放置ということがないのも魅力だと思います。ただ、テーマを更新するとカスタマイズした項目がリセットされてしまいます。その度に設定し直すのはしんどいので、スマートな解決手段として、WordPressには子テーマというものが用意されています。

子テーマ(child theme)とは、ある既存のテーマを親として、親テーマの一部を書き換えたり、内容を追加したりすることができます。既存のテーマを拡張することになるので、一からテーマを作るより手間がかかりません。そして、親テーマに対するカスタマイズを子テーマとして切り出すことで、設定項目は子テーマとして管理されますから、親テーマを更新してもカスタマイズ内容が失われないわけです。便利ですね。なので、何らかのカスタマイズをしたいならば、子テーマで対応するのがいいでしょう。ということで、やったことをメモ書きの意味も兼ねてまとめます。

Continue reading »

Top