ワードプレステーマSwellで画像に不具合が！原因はサーバーでのSSL化？

このサイトは無料のテーマ『Cocoon』を使わせてもらっています。

その前は、もちろん『シンプリシティ』。シンプリシティに決めるときとっても悩みました。あっちウロウロこっちウロウロ。頭がモウロウとしてきた頃、ようやくシンプリシティに決めました。搭載されている機能の2割も使えていなかったのでは?と思いますが、まさにシンプルに文章を書いていきたい私にピッタリのテーマでした。

今回わけあって、新しくサイトを2つ作ることになりました。

やっぱり悩むのはテーマです。

使いやすくて素敵に仕上げられるテーマを探していました。あふれる情報の中から、私の少ない知識と経験値でひとつのテーマに決断するのは、けっこうな時間がかかりました。ようやく、『Swell』がいいかも？と思いだしてからも、購入するまでにやっぱりあっちのサイトこっちのサイトと徘徊を繰り返しました。笑

最初に取り掛かったトップページで画像が反映されない

ものすごく細部にまで手が届く感じのテーマです。

サイトづくりの基本がしっかり身についている人にとっては、大満足以上の機能が揃っているのでは？と思います。

私のようにブログは書いてきているけれど、とりあえずというか何年も基本的なことしかしてこなかった人にとっては、機能の半分を使いこなすのにも学びが必要そう。笑

でも、記事をアップしていくことはそれほど難しくなさそうです。その手前の基本設定？ですね。そして、慣れてしまうときっと楽しくってしょうがなくなるんだろうなぁという予感がしています。

Swellならトップページを自由自在につくれます

Swellではサイトのトップページを自由に作れます。

サイトの顔でもあるトップページのメインビジュアルに何枚もの画像や動画が入れられることは、すでに珍しくないのでしょう。Swellの嬉しいところは、プレビュー画面を正面に見ながら、簡単にアレンジができるところではないでしょうか。

しかも、

・画像の大きさが簡単に変えられる
・一枚だけの静止画像だけではなく、5枚の画像が選べる
・画像の切り替えがスライドとフェードから選択可能
・切り替えスピードも設定を変えるだけでとってもお手軽
・画像の上にメインテキストやサブテキストに好きな言葉を入れるのも手間いらず

などなどです。

サイト全体を見たらさまざまな選択肢が用意されているので、無限に広がっていくのでは？

私はこれからひとつひとつ学びです。笑

メインビジュアルに画像を入れてみました

Swellの作者である了さんが、Swellを活用してサイトづくりをしていくためのマニュアルを丁寧に書いてくれています。

その流れに沿ってすすめていくとメインビジュアルはちょっと後の方でした。でも、読んでもきちんと飲み込めないこと(とほ 笑)とサイトの中心から作っていくほうが、やりやすいと思い、まずはメインビジュアルの画像から取り掛かりました。

左側にあるカスタマイズ画面から、簡単に操作ができます。

画像を選んで入れるだけです。

ところが、選択した画像が反映されません。出たと思うと、一瞬映るだけ。画像のサイズを変更してみたり、スピードなどの設定もいろいろ試してみました。画像自体に問題があるのかもしれないと思い、違うものと入れ替えても同じ。

スライド画像１は反応しないけれど、スライド画像２は表示されたり、画像３は消したのに、いつまでも残っていたり。何が問題なのかもわからず、お手上げ状態でした。でも、メインとなるところからつまづいていては、サイトづくりが始められません。

Swellの雑談部屋『Slack』に投稿

なにか根本的な部分で足りないことやおかしなことをしていると思い、Swellの購入者が質問などを交換しあえる場所である、雑談部屋『Slack』に現状を書いて助けを求めてみました。

すると、すぐにふたりのひとがアイディアを提案してくれました。ありがとうございます。

そして、なんと開発者の了さん自らが、状況を知りたいのでサイトのアドレスを教えてほしいと書き込みをしてくれました。

出口が見えない状態でしたので、この親切な申し出はほんと嬉しかったです。

そして、すぐに了さんから返信が。

SSL化が中途半端なことが原因ではないかと。

全く思いもしませんでした。どうしてそういうことに気がつけるのでしょうか・・

このサイトでも他のサイトを参考にしながら、SSL化をして特に問題はありませんでした。今回も、あたらにサイトを参考にしながら、慎重に進めたつもりです。URLにはちゃんと鍵マークがつき、SSL化されています。

どうしたら中途半端な状態のSSL化問題が解決できるのか？

まずは、契約しているエックスサーバーのカスタマーセンターにメールを送ってみました。

すると、調べたところSSL化はきちんとされていて、問題はないとのことでした。それ以上個別の確認はできないと。

何度サイトを開いて、画像を操作してみても、やっぱり反応に変化なし。

こうなったら、トップページには画像は使わない？なんて思ったりもしましたが、これはなんの解決にもなりません。

私なりにいろいろ調べてみました。インターネットとパソコンがあれば、自宅にいながら調べ物ができる。ほんとありがたい。

幸いにしてまだ始めたばかりのサイトだったので、選択肢は多かったのではと思っています。同じような状況に、何年もかけて育ててきたサイトがなってしまったら、ご飯が美味しく食べられないどころではないかもしれません。

私が候補として考えたのは、

１．ワードプレスを再インストールする
２．ドメインを再設定する
３．サーバー上の情報を消してしまう
４．SSL化を削除して再設定

でした。

確実なのかはわからないのですが、１と２の方法ではSSL化は残るようです。そうすると、可能な選択肢は２つ。この時点で、またエックスサーバーに状況を伝えながら、SSL化を削除する方法と削除したあとどのくらい期間をあければいいのか聞いてみました。

もう一度SSL化をするためには１週間開けること

エックスサーバーの人が教えてくれたSSL化を停止するときの手順です。

・.htaccess内の常時SSL記述を削除
・サーバーパネル内「SSL設定」より無料独自SSLの削除
・必要に応じてWebコンテンツを修正

今回のことだけではなく、エックスサーバーのカスタマーセンターの人たちにもたくさんお世話になっています。ありがとうございます。

教えてくださったとおりにすすめていくと、ちょっと気になる注意書きが表示されました。

『無料独自SSLの削除・追加を繰り返さないようご注意ください
短期間に同一サイトに対する無料独自SSLの削除と追加を繰り返すと、SSL証明書の発行元の判断により、最大で1週間程度、当該サイトのSSL証明書が発行されなくなる場合があります。その場合、SSL証明書の発行が可能になるまで、無料独自SSLの追加はできません。

無料独自SSLの削除・追加を不用意に繰り返さないよう、ご注意ください。』

短期間とはどのくらいなのかが、はっきり書かれていません。可能な限り慎重に行きたいです。

再度(一体何回目かは不明です)、エックスサーバーに質問を送ります。

通常、1週間程度時間をおいて設定いただければSSL提供元側の回数制限が
リセットされます。

私は実際には１０日ほど待ってから、再設定をしてみました。

SSL化を停止したら問題解決

ちゃんと画像が反映されます。

写ったかも思うとパッと消えてしまったり、消したのにデータがいつまでも残存していることもなくなりました。これで、原因がわかりましたが、問題が解決したわけではありません。

サイトをSSL化していくのなら１週間待ってから、再度SSL化をしなくてはなりません。

この間はこのサイトは触らずにそっとしておくことにしました。

もうひとつ同時進行のような形で始めているサイトがあります。こっちのサイトは特に画像にも問題はありません。同じようにSSL化をしたのですが、ほんの些細なことで大きな不具合につながることがあるようです。

これは私のことを棚に上げているのではありません。

今回のことだけではありませんが、なにか問題がるとインターネットで調べます。するとたくさんの人がさまざまな問題に向き合い、時には大変な思いをしながら解決されています。原因が見つかることもあれば、どうしてだかわからないこともあるようです。

問題が発生しないで快適にワードプレスでサイトづくりができることと血の気が引くような問題が目の前に現れることは、なんとなく紙一重のようにも感じます。

１０日待ってから再度SSL化はプラグインを活用？

ドキドキです。

また、SSL化が中途半端に終わってしまえば、画像に不具合が現れてサイトづくりが進められません。そしたら、また１週間開けて、再チャレンジになります。

今回はSSL化の設定は自分でするけれど、常時SSL化はプラグインを使おうと思っていました。プラグイン自体の設定は簡単そうだったので、安全にSSL化をしたいと思っていました。

私が使おうと思っていたプラグインは、『Really Simple SSL』。Swellのサイトにもこのプラグインのことは書かれていたので、ほぼ、使うつもりでいました。

でも、よくよく調べると少しばかり気になる点があることが書かれています。

・プラグインを停止するとSSL化も止まってしまう
・テーマによっては不具合が起きることがある

やっぱり、ひとつひとつ手作業でSSL化をしていくことにしました。

２度めのSSL化でサイトの画像は？

プラグイン『Really Simple SSL』は使わなかったのですが、万全の体制で設定できるように『Search Regex』を使ってみました。

このプラグインが原因だったのかどうなのかはわからないのですが、再度SSL化をしても画像がちゃんと映し出されませんでした。このプラグインを停止しても同じ。削除しても変化なし。エックスサーバーに聞いても、今回もSSL化はちゃんとされている。

もしかして、ブラウザとの相性が良くない？となんの根拠もないことを思い立ち、長男くんおすすめのファイヤーフォックスを設定してもらいました。ファイヤーフォックスに変えても、画像の不具合は変わりませんでしたが、長男くんがサイトのSSL化を消してページを見てみると、ちゃんと表示されました。

やっぱり問題は、SSLにある。

でも、私ができることはもうこれ以上なく、最後の手段？であるサーバー上の情報を消してしまうしかないかなぁと思いながら、入れてあった画像を全部消して、もう一度入れ直したら、ちゃんと表示されるようになりました。

いまのところほぼ問題なく、サイトづくりがすすめられています。

ほぼと書いたのは、私の知識不足から、うまく操作できないことがあるからです。まだまだわからないことがあり、解決できていないことがあります。でもそれは、トップページのメインビジュアルが表示されないような大きな問題ではないので、いろいろなことを試していくうちに解決できるのでは？と思っています。

今回の私の経験が、どこかでサイトづくりをされている人の役に立つことがあれば、とても嬉しいです。

SSLエラーチェック方法～ワイヒラさんのブログより

なぜかSSL化との相性があまり良くないようで、一番新しく作ったサイトでもSSL化がうまくいきませんでした。サイトのアドレスが表示されるところに、SSL化が完了している鍵マークにビックリマークが付随しています。

これはなにか問題があり、SSL化が妨げられている証拠です。涙

再度SSL化を削除して１週間またなくてはならなのかと思うと、気が進みませんでした。このときに出会ったのが、シンプリシティとCocoonの開発者である『ワイヒラ』さんのブログです。

SSLエラーの解決方法～わかりやすく詳しいワイヒラさんの『寝ログ』

手順通りに進めたはずなのに、エラーが出る。問題があるらしいことはわかっても、何が原因なのかわからないと悲しくなりますよね。もちろん、どこがおかしいのかがわかっても、どう解決したらいいのかわからなければ、やっぱり行き詰まってしまいます。

SSL化をしたときに起こり得るエラーを見つけて、その解決方法をわかりやすく説明してくれているサイトに出会えました。ワードプレスを利用している人なら、きっと多くの人が知っている『ワイヒラさんの寝ログ』です。

このサイトにはどこに問題があって、どんなふうに解決していけばいいのかが書かれていました。今回もSSL化が不十分であることがわかり、まさしくワラにもすがる思いでワイヒラさんのブログを読みました。

ワイヒラさん、どうもありがとうございます。

ブラウザをファイヤーフォックに切り替えて『開発者ツール』使用

アドセンスに申請をするときに、「ブラウザはグーグルクロームがよい」と書かれているのを見ました。アドセンスに合格したい一心で、ブラウザを変えました。今になって思うのですが、これは本当になることだったのでしょうか。

なんにせよ私がここ２年以上使っているのは、グーグルクロームです。子どもたちに「ファイヤーフォックのほうがいいよ」と何度か言われたこともあり、ファイヤーフォックスもいつでも使えるようになっています。私はよくわからないのですが、ブラウザによって備わっている機能に違いがあります。子どもたちはファイヤーフォックは「ロングスクリーンショットが使えて、軽くていい」と言っています。

グーグルクロームでもSSL化の不具合を見つけられる方法が、ワイヒラさんのブログに書かれています。でも、私が選んだのはファイヤーフォックスでサイトを開いて、ビックリマークのついている鍵マークをクリックして進める方法です。利用した画面は管理者が入れるところではなく、誰もが見られるページで試してみました。これでどこに問題があるのかがすぐに見つけられるのですが、これだと訪問者なら誰でもできるということなのでしょうか・・？

とにかく、この手順に沿って進めていくと、サイトの何が問題でSSL化に問題が出てしまうのかがすぐに分かります。

私の場合には、画像に問題がありました。でも、画像自体のURLを見ても『https』です。でも、この画像を外してみると、鍵マークからビックリマークがきれいに消えました。

ワイヒラさんのブログを載せておきます。同じように、SSL化に問題あり？のときには、参考にしてみてください。

WordPressをhttpからhttpsにSSL化した全手順まとめ（エックスサーバー環境）

エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。 この、エックスサーバーの「ユーザー…

nelog.jp