operationservicebuの日記

日々の日記、Webサービスや書籍などのレビュー、スマホやパソコンで困ったことの操作方法など自由に書いているブログです。

訪問者の画面サイズに合わせて写真を表示するようにしました。

この記事は、現在作成中のWordPressサイトの作業記録です。

 

先日、以下の記事を書きました。

画像の読み込み速度の軽減を考えなければ。 - operationservicebuの日記

個別記事の写真サイズをいろいろ検討中 - operationservicebuの日記

 

記事を読んでくださった方、

「はてなスター」をつけてくださった方、

ソーシャルメディア(はてブ、ツイッターなど)に投稿してくださった方、

ご意見をくださった皆様、ありがとうございます。

 

皆様のご意見を基に、新しいWordPressサイトの設定や表示を変更したので、それを書いていきます。

 

訪問者の画面サイズに合わせて写真を表示するようにしました。

トップページの画像一覧表示について

はぴらきさんが教えてくださった「Lazy Load」を試してみました。

WordPressでは「Lazy Load」用プラグインがあり、Google検索し、以下の記事を参考に導入してみました。

【WordPress】スクロールしたら画像が表示される BJ Lazy Loadの使い方 | WordPress College

 

結果として、「採用を見送りました」

理由として、現在作成しているWordPressサイトでは、「Pinboard」というテーマを利用しています。テーマについては以下URLをご参照ください。

WordPress › Pinboard « Free WordPress Themes

 

どうやら、この「Pinboard」のテーマに、ある程度javascriptを使った速度向上策が適用されているようで、それらと競合してデザインが崩れてしまう結果となりました。

従って、テーマの設定をある程度行って、あとは画像一覧画面で使う写真は、出来る限り軽いものに加工して表示させようと思います。

 

また、画像一覧画面では、以下のような「Ajax Link」を表示するようにしました。

f:id:operationservicebu:20140614171130j:plain

 

上記画像の「Load more posts」をクリックすると、「次の画像一覧」が下に表示されるような形になっています。

f:id:operationservicebu:20140614171458j:plain

 

次の画像一覧を表示したい方はクリックし、そうでない方はクリックしないことである程度の速度向上になると思っています。

 

個別記事の画像表示について

画像一覧から写真または記事タイトルをクリックすることで、個別記事に移動します。以下の画像は、画像一覧画面のキャプチャーです

f:id:operationservicebu:20140614173555j:plain

 

個別記事ですが、はぴらきさん、す。さんのご意見を基に、ブログデザインに合わせて、横幅600ピクセルの画像を表示するようにしました。

横幅600ピクセルもあるので、これで十分写真の内容は理解可能と思います。

f:id:operationservicebu:20140614173644j:plain

 

その他、個別記事では、さらに大きい写真を見たい方がいると仮定して、写真をクリックすることで、大きい写真が用意されている記事では拡大表示が可能になっています。

拡大表示ですが、とある方からご意見をいただき、訪問者のブラウザ画面のサイズに合わせて、写真が拡大表示されるようにしました。

パソコンのブラウザ画面で拡大表示した画像が以下のものです。

f:id:operationservicebu:20140614175531j:plain

 

スマホの画面で拡大表示した画像が以下のものです。

f:id:operationservicebu:20140614175616p:plain

 

上記のように、端末やブラウザの画面に合わせて、写真が拡大表示されます。

従って、仮に高解像度の写真であっても、訪問者の画面サイズに合わせて写真が表示されるようにしました。

 

まとめ

ご意見をくださった皆様、ありがとうございました

おかげさまで、訪問者の環境に適した表示がされるように変更できたと思います。

あとは、1日でも早く実際にWebサイトを公開し、アクセス解析や問題点を見つけて修正していく予定です。

 

以上、ありがとうございました。