新デザインの機能について解説、レスポンシブデザインです!

※以下の情報は、2016年1月5日現在のものです。予告なしにデザインはころころ手直ししていきますのでご了承下さい。

レスポンシブデザインとは? どんな環境にも対応してます

(▲枠の素材はこちらを使いました)
ブログをWordPressに引っ越すにあたり、デザインを丸々リニューアルしました! スマホ/タブレットでお読みの方は、その変わりように驚いた方も多数いらっしゃることでしょう。それもそのはず、このテーマ(WordPressではデザイン一式を"テーマ"といいます)はレスポンシブデザインなんですから。

レスポンシブデザインとは、画面の大きさに応じて柔軟に表示が切り替わるデザインです。再読込しなくても、端末の向きを変えればほら! PC、タブレット、スマホ全てが一つのデザインに統一されているわけです。

スマホ/タブレット向けのメニューを設置しました

スマホ/タブレットでは、三本線のボタンを押すと左からメニューがスライドしてきます。各カテゴリーやタグのリンク、個別記事ページでは加えて「関連記事」も表示されます。PCの場合、関連記事は記事の左側に追従してきます。

この「関連記事」、実は同じカテゴリの記事をランダムに表示しているだけなので正確ではありません。(同じような記事を表示すると、例えば昔のバージョン向けの記事だとか読んで欲しくない記事が表示されるのであえてランダムにしています)

iPadを横向きにした時など、横幅広めの端末では「カテゴリー」「タグ」はスライドメニューの外に表示されます。

画面右上には検索ボタンがあります。タップ/クリックすると検索欄が出てきます。チェックボックスを使って、機種ごとに記事を絞り込むこともできます。ライブドアブログの時より検索スピードが格段に早くなってますので、ドシドシ検索してくださいね。

ブログの推奨閲覧環境。IEは非推奨です

▲IE(InternetExplorer)の最新バージョン「11」でブログを閲覧した際の画像です。IEだけ、文字の位置がズレてる... 行の高さを変えればよさそうに見えますが、すると他のブラウザではおかしい表示になりますし、アイコンとズレますし... 同じCSSを書いてもIEだけ挙動がおかしいんですよ。

そしてIE9では、メニューや「続きを読む」、フッターなど様々な箇所が崩れるんです。これは要素をきれいに配置する「Flexbox」という技術にIE9が対応していないのが原因なのですが、そういえばWindowsVistaで使えるIEはIE9までなんですよね。

とにかく何が言いたいかといいますと、IEを使っている方はChromeやFireFoxやVivaldiやらの新しいブラウザに乗り換えて頂きたい、ということです。これらのモダンなブラウザはどんどん更新されますし、動作もサクサクですしね。(更新されるということはセキュリティの面でも安心ですしおすし)