WordPressをAMP HTMLに対応させる

WordPress AMP 02

複雑化していくブログなどのWebサイトを、モバイル端末向けにシンプルな表示に変換するフレームワークの「AMP(AMP HTML)」。GoogleとTwitterが共同で開発したもので、Googleは今後これをプッシュしていくっぽいので、早めに対応しておいても損は無さそう。

WordPressでは、これに対応させるプラグインがリリースされているので、それらをインストールして有効化するだけで簡単にAMPに対応できます。

続きを読む →

iPhoneやiPadの解像度でレスポンシブデザインの表示確認ができるChrome拡張機能

ResponsiveDesignView 03

レスポンシブデザインの確認を行うのに便利なChrome拡張機能「Responsive Web Design Tester」。

iPhoneやiPadの各機種を初め、Androidフォンやタブレットまで複数のモバイルデバイスの解像度でWebサイトやブログの表示確認が行えます。別にウィンドウが開くので通常表示との比較も簡単。

続きを読む →

[Web] スマホやタブレットなどでの表示確認が行えるマルチスクリーンテスト

MultiScreenTest

レスポンシブデザインのWebサイト作成時に便利なのが、各種デバイスでの表示サイズでの確認ができるマルチスクリーンテストサービス。

URLを入力すれば、デスクトップからスマホやタブレットの各機種での解像度で表示確認が行え、縦・横での確認もできるので、実機を持っていないデバイス向けのコンテンツ表示確認としても使えます。

Source: Multi Screen Test

[Js] レスポンシブ&スマホ向けな「Image LightBox」の設置方法

ImageLightbox

画像をポップアップ表示するLightbox系の「Image Lightbox」は、レスポンシブデザイン対応でタッチフレンドリーな操作が可能です。様々な表示方法があり、スワイプで画像を切り替えることができるのでスマホ対応サイトなどにも幅広く使用できます。(表示デモ

実装はかなり簡単で、1つのjsファイルとjQueryをヘッダーで読み込んで、CSSを追加するだけなので、FC2などの無料ブログサービスにも最適です。

ここでは一例としてFC2ブログへの実装を紹介しています。

続きを読む →