全ての写真ではなく一部が表示されなくなった場合、Jetpackのプラグインの「Photon」が原因かもしれない。
↓こちらはPhoton無し。↓
↓こちらPhotonを有効化した場合。↓
表示されていない画像を検証してみると、ファイルサイズが大きい画像が表示されなくなっていることが分かった。
基本的にWordpressでは、画像は小さくサムネイル化されるので、普段はあまり問題にならないが、画像素材などを並べている場合は、どうしても高画質のファイルをアップする必用があるので、この場合、Photonは使えない。
なお、解決策はない。
高画質ファイルを表示する時にこそ高速化したいのに、なんとも使えない奴だ！
ビックカメラで無料で申込みできる、JMB WAONカード。JALマイレージバンク、ビックカメラポイントカード、WAONの3つの機能がついているカードだ。
年会費無料、申し込み手数料無料、クレジットカード機能は無し。
1.ビックカメラで普通に買い物をした時
通常ビックカメラで買い物した時と同様にビックカメラポイントが貯まる。別のクレジットカードでの支払いも大丈夫。
レジでこのカードを見せながら「JALのマイルで」と言うと、JALのマイルを貯めることもできる（ビックカメラポイントは貯まらない）。
2.ビックカメラでWAONで買い物した時
現金で買い物した時と同じく、ビックカメラポイントが貯まる。
それに加えて、200WAONにつき1マイルのJALマイルが貯まる。
（注意！WAONポイントは貯まらない！）
3.その辺でWAONで買い物した時
ビックカメラポイントは貯まらない。
200WAONにつき1マイルのJALマイルが貯まる。
（注意！WAONポイントは貯まらない！）
買い物で貯めたマイルは、
JALマイレージバンクで確認できる。
パスワードの再発行、マイルの交換もこちらから。
ただし、ビックカメラポイントはここからら確認できない！なので、ビックカメラに問い合わせよう。
結論から言うと買い物では貯められない。
WAONポイントを貯めたいのならば、JMB WAONカードではなく、通常の300円のWAONカードを購入した方がいい。
ただし、JALマイルをWAONに交換はできるので、JALマイルを頻繁に貯める人なら、サブカードとして使い道はある。
年会費無料なので、ごくまれにWAONを使うだけの人でも安心だ。
もちろん、今までのJALマイレージプログラムと同じところに、追加でマイルを貯める事もできる。
だが、JALマイルの交換は10,000マイル以上なので、WAONの買い物だけで10,000マイル貯めるのは難しいのが現実だ。
レスポンシブデザインの簡単な説明は
レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するを参照の事。
レスポンシブデザインとは、簡単に言うとメディアの幅によって、CSSの挙動を制御すること。
今まではiPadだったらこのページ、iPhoneだったらこのページという風に、スマホサイト、タブレットサイト、PCサイトを別々に用意していた。
 
しかし、これではiPhoneでデカい画面のスマホが出てきたらどうするの？
小さいブラウザウィンドウで見ているPCはバカでかいPC用ページで表示、という問題には対応できない。
そこで、端末が何かにかかわらず、メディアの幅（ブラウザ・スマホ画面の幅）によって見え方を変えようというわけだ。
で、レスポンシブ（スマホ用とPC用で自動的に変える方法）で実装するの後半にも書いてある通り、メディアアンカーを使っていく。
でも、スマホでもPCサイトに切り替えたい！というニーズもある。
こういった場合には、レスポンシブサイトに対応した、PCサイト/スマホサイトの切り替えスイッチが欲しい。
CSSの中に、「画面が600ピクセル以上の場合はこれ、600ピクセル以下の場合はこれ」と記述しているので、これを切り替えるためには、メディアの幅が変わったと思わせればいい。
用意するものは3つ。
jquery-1.5.min.js
switch.screen.js
jquery.cookie.js
こちらから右クリックで保存したり、ダウンロードすることもできるし、どこかから探してきてくれてもOK。
なお、jqueryは1.5以外でも結構動作する。
まず、switch.screen.jsの3行目
$(“head”).append(“<meta name=’viewport’ content=”
+($.cookie(“switchScreen”) == 1 ?
“‘width=951, initial-scale=1.0′” :
“‘width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0′”)
+” />”);$(document).ready(function() {
$(“#btnPC, #btnSP”).click(function() {
$.cookie(“switchScreen”, $(this).attr(“id”) == “btnPC” ? 1 : 0);
location.reload();
return false;
});
});
“‘width=951, … の部分をメディアアンカーの幅に合わせる。
上記の例の場合、「メディア(スマホの画面)の幅を951pxとして考えてね」ということなので、仮に小さいスマホであっても、レスポンシブのPCサイトのスタイルシートが適用される。
そしてサーバーの適当な位置へアップロード。
下記、コード例では、jsフォルダへアップロードした場合の記述。
<head>…</head>の間に、下記コードをコピペ。
<head>
…
<script type=”text/javascript” src=”js/jquery-1.5.min.js”></script>
<script type=”text/javascript” src=”js/jquery.cookie.js”></script>
<script type=”text/javascript” src=”js/switch.screen.js”></script>
…
</head>
切り替えスイッチ（リンク）を設置したい場所に、下記コードをコピペ。
<p class=”switch”><a id=”btnPC” href=”#”>PCページへ</a><a id=”btnSP” href=”#”>スマホページへ</a></p>
以上。
使用例：
http://rakuichi-b.com/
パソコンのブラウザの画面幅を小さくしたり大きくしたりして確認できる。
なお、上記のサイト例では切り替えボタンはスマホでのみ有効となっている。
