2018年5月2日スポンサーリンク(2017/8/17更新)こんばんは~。皆さんは自分のブログって複数のブラウザでの表示確認はされていますか?私は少し前にこのブログのテーマを変更したのですが、どうやらSafariで正常に表示できていなかったようなんです。読者の方からの指摘で気付いてすぐに元に戻して事なきを得ましたが、今後のやり方はちゃんと考えないといけません。調べてみると複数のブラウザでの表示チェックが可能なサービスやツールがあることが分かりましたので今日はその紹介をしたいと思います。表示が崩れている夜寝る前に布団の中でTwitterを確認していたところ、こんなメッセージがきていました。~~~~~~~~ところでしろくまさんのブログテンプレ、safariで見ると左に一列になっちゃってます。いらぬお世話ですがご報告まで。いつもブログを拝見させてもらっているザブロー(id:zabro_tan)さんからのありがたいご指摘でした。なんだってーー!!!これはまずいと急いでPCにsafariをインストールして確認してみました。IEやChromeなどの正しい表示がこちら。Windows版safariで見た時の表示がこちらうえーー、左に一列に寄ってる・・・。本来あるべきサイドバーまで表示されてないし。スクロールしてみると、サイドバーは一番下にいました。一応iphoneのsafariでは確認はしていたのですが、デスクトップ版のSafariはさすがにノーマークでした。MAC版のsafariでも同じ表示だったのではないかと思います。これではまずいとテーマを元に戻しました。́;ω;`)根本的な対策テーマを戻してひとまずは大丈夫になりました。これからさらにテーマを変えたり、CSSを導入もする時に毎回複数のブラウザでチェックするのはなかなか面倒です。何か方法があるはずだと調べてみると、複数のブラウザでの表示を確認するサービスや便利な機能があることが分かりました。PCでの表示とスマホの表示チェックがそれぞれ違うサービスや機能なので分けて紹介します。PCの表示確認SAUCELABSこちらはWEBサイトの表示をチェックしてくれるサービスです。会員登録が必要ですが、数あるチェックサイトの中でも使いやすい部類に入ると思います。実際に使ってみた感じがこちらmacOSのsafariで表示してみました。ブラウザの中でsafariをエミュレートしている感じですね。対応ブラウザはmacの他にも、FireDoxやOperaもあります。難点もいくつかあります。スクロールさせようとしても重すぎてうまく動きません。時間帯なのか無料版だからなのか分かりませんが、とりえず表示が問題ないかをチェックするくらいであれば使えそうです。無料で使うには制限があること。月に30分だと思います。ブログのチェックくらいであれば1回で数分ですし、毎日確認するようなものでもないので月に30分で十分だと思います。無料で使えるのは最初の30日間だけに変更になったようです。私のアカウントではすでに使用できない状態でした。browserling会員登録なんか面倒くさい!という方には完全フリーなサービスもあります。それがこちらのbrowserling。サイトにアクセスするといきなりURLを打ち込む画面が出てきます。自分のブログのURLを打ち込んで、表示するブラウザを選びます。選べるブラウザはIE、Safari、Chrome、Operaと主要どころを抑えています。実際に使ってみた画面です。こちらも先ほどのSOURCELABSと同様にエミュレートしてるようです。こちらは左上にも時間が出ているように、1回3分以内です。説明を読むとブラウザもIE9オンリーで、OSもWindowsVistaのみと書いています。FireFoxとかで表示できるんですよね・・・まぁ使えるのであれば遠慮なく使わせてもらいますが(;^ω^)無料で会員登録もいらないので気軽に使いたい場合はこちらがオススメです。www.browserling.comスマホの表示確認Chromeのデベロッパーツールchromeを使っている方はデベロッパーツールという機能が便利です。chrome→右上のメニュー→その他のツール→デベロッパーツールするとこの画面になりますので、赤枠のスマホマークを押します。するとスマホ画面になります!しかも画面上部の「Responsive」を押せば、複数のモバイル端末を選ぶことができます。これはなかなか便利です。chromeを使っている場合はすぐに表示できるのでチェック作業もぐっと楽になります。BliskこちらはWEB制作者向けのブラウザです。Windows版とMAC版があり、間もなくLinux版も対応するようです。特徴1画面で、PCとスマホの両方の画面が一度に見れるPCとスマホの画面が同期してスクロースするなんといっても動作が軽い!インストールするだけで使える無料で使えるこちらが使ってみた画面です。見てもらうと分かる通りスマホの画面とPCの画面が1画面に表示されます。スクロールするとスマホとPCどちらの画面も同期して動きます。これは初めて使うと感動ものですね、同時に確認できるのでチェックの作業効率が上がります。画面の左側を見てもらえばわかる通り、スマホ表示は複数のバージョンから選ぶことができます。Nesus7,10などBliskを分かりやすく説明する動画もありました。www.youtube.com本来はWEB制作用のブラウザなのでもっと色々なことができるようです。ググるともっと詳細なことを説明しているサイトは見つかりますので、知りたい方は調べてみてください。ブログの表示チェックのためだけに使っても問題ないです。blisk.ioまとめ・ブログは複数のブラウザで表示チェックをしたほうがよい・PCの表示をチェックできるサービス『SAUCELABS』『browserling』を紹介した・スマホの表示をチェックできるツールとして、『Chromeのデベロッパーツール』と『Blisk』を紹介したPC表示チェックであれば気軽に見れるbrowserlingがオススメです。会員登録なしはうれしいですね。スマホ表示チェックであれば個人的にはBliskがオススメです。BliskだとAdsenseのレスポンシブルユニットがスマホで見る通りのサイズで表示されます。chromeだとPC用のサイズなんですよね。htmlやCSS表示は確認できるのでサクッと見たいならchromeのデベロッパーツールでもよいかもしれません。どれがよいかは実際に使ってみて判断してみるとよいと思います。それにしても今回はいい勉強になりました。転んでもただでは起きない精神で記事にもできましたし(;^ω^)ブラウザ表示チェックサービスは他にも色々あるらしいので時間が出来たらまた調べてみます。今回紹介したもの以上にオススメがあれば追記したいと思います。