カテゴリー: レンタルサーバー

WordPressの新しいカスタムHTMLウィジェットが保存できない

テキスト ウィジェットと違い自動で<p>タグで括らず、htmlを記述できる新しい機能ですが、セーブが完了しない事があります。

この他にも、カスタムcssや投稿記事内でjavascriptを記述した場合とかも同様にセーブできない。セーブできたように見えても、保存出来てなかったなどが発生することがあります。

SiteGuardが動作している環境では、次の対処で解決します。

SiteGuardが稼働中の環境での対処方法

SiteGuardはセキュリティ強化を手軽に強力にしてくれる便利で頼れるWordpressのプラグインですが、セキュリティ対策故に誤動作して悪さをしてしまう事があります。間違いはないはずなのに保存・実行の段階で期待通りに動かない場合は、次のように対処しましょう。

  1. レンタルサーバーの管理画面で、WAF機能のログを見てみましょう。
  2. 不具合が発生した時間にログが登録されていたら、その「URL」と「検出されたシグネチャ」をメモしましょう。
  3. WordPressの管理画面のSiteGuardのWAFチューニングサポートのメニューを開きます。
  4. 「新しいルールの追加」をクリックして、シグネチャとファイル名、コメントの入力画面にします。
  5. メモした「検出されたシグネチャ」をシグネチャへ、「URL」をファイル名に記入して保存します。

これで問題は解決するはずです。うまくいかない場合は、再度見直し(半角スペースやtabが挿入されていないか?など)修正は、一度削除して新規に入力し直すと良いと思います。修正だとうまく反映されない場合があるようです。WAFチューニングの設定方法の詳細はこちら

WAFチューニングをしても解決しない場合

SiteGuard以外にも要因になるプラグインはあると思います(定義が重なっている場合など)が、まずは、自分の作業内容を疑って、もう一度、丁寧に見直しましょう。もし新たに変数・関数定義をした場合などはユニークとなっているか?(簡単な確認方法は私は知りませんので、グローバルな定義は頭に特定のキーワードを付けるようにしています。)

そのうえで、やっぱり、不具合時にWAF機能にログが登録されているようなら、追加したWAFチューニングの設定を削除して、入力し直して見ましょう。

ロリポップで運用中のWordpressサイトを高速化をしよう!!

なにかと性能を問題にされるケースのあるロリポップ(Lolipop)のレンタルサーバーですが、価格、利便性、稼働率において、他社と同等かそれ以上の魅力のあるレンタルサーバーであるからこそ、話題に上るのだと思います。今では、大手では当たり前となっているようですが、paperboy時代からお客様に見えない部分でサーバーの多重化や回線の多重化などしっかりとした運用をしている老舗なので、私はたまにお試しで浮気はしますが、ほぼロリポップ一本で運用しています。

安心してデータを預けられるレンタルサーバー。
月額100円(税抜)~容量最大400GBでWordPress簡単インストールなど
多彩な機能がついて、バックアップ機能も完備!
 

WordPressのホームページに高速化施策の結果。いきなり結果から

高速化したのは、このホームページです。pure.css導入のテーマで作っていますが、ちっとも高速ではない(実際CSSフレームワークは全体のうちの極僅かなので、高機能のCSSフレームワークを高速なCDNを利用して使用した方が全体的には高速になるかもしれません。)ので、自家製テーマなので、テーマ自身の高速化を含め対策した結果です。

まずは、GTmetrixの結果から

Pingdom Website Speed Testでも、

そして、Googleのモバイルサイトの性能測定 testmysite では、

さすがにサーバが混むと5秒位になることはありますが、アフィリエイト広告(PCページよりは1枚減らしてますが^-^;)とFacebookページありでこれは優秀だと自己満足しています。

どうです、これなら満足できる性能ではないでしょうか。

WordPressのホームページの高速化のための施策

テーマ自体の高速化は、使用するテーマにより変わってくるのでここでは詳細は省略します。(高速なCDNが存在するフレームワークやアイコンなどは、CDNから読む、使用していないheader情報は削除するなど)

お使いのテーマによっては、ここでの施策を自前で内蔵していたり、優れたソース(wordpressはダイナミックにhtml/cssを生成しますので、phpの書き方一つで随分とレスポンスが変わります。)など様々な工夫で高速化されたものも存在します。私がお客様サイトの作成のペースで使用することの多いで、「BizVektor」などもその1つです。(よく使うもう1つ「Lightning」も比較的高速ですが、標準テーマの範囲で作成されている為か、ここでの高速化施策で、改善できます。)

まず最初にすべきは、

今のホームページの分析ですが、Googleの「PageSpeed Insights」でチェックして、ファイルを置き換えましょう。

テスト結果で、「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」と最適化されたデータを作成、ダウンロードすることができます。変更できるものは差し替えましょう。但し、2点注意が必要です。

  1. 共通の画像をモバイルもPCも使用している場合、圧縮画像のサイズを確認しましょう。PCではぴったりでもモバイルでは解像度が不足などの場合があります。
  2. ダイナミックにstyle.cssを生成するテーマの場合は、単純な差替えは有効でありません。場合によっては不具合の要因になるかもしれません。
  3. 画像読み込みにCDNを使う予定がある場合は、綺麗に見せたい画像は圧縮画像への置き換えは控えた方が良いと思います。CDN側でも圧縮しているのか画像の品質が低下する場合があるようです。

以下の様な項目で、対策状況と改善策を提案してくれますが、注意してダウンロードしたデータと差し替えると、「3.画像を最適化する」は改善されます。「4.CSSを縮小する、6.JavaScriptを縮小する」も若干改善します。差替えはFileZillaなどでftpで行います。

  1. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  2. ブラウザのキャッシュを活用する
  3. 画像を最適化する
  4. CSS を縮小する
  5. HTML を縮小する
  6. JavaScript を縮小する
  7. サーバーの応答時間を短縮する
  8. リンク先ページのリダイレクトを使用しない
  9. 圧縮を有効にする
  10. 表示可能コンテンツの優先順位を決定する

プラグイン「WP Fastest Cache」「Fast Velocity Minify」により高速化しましょう。

高速化のプラグインは沢山ありますが、多機能すぎたり依存性が強かったりとしますので、できるだけ単純軽量で稼働実績も多いものを選びました。

これらを適切に設定することで、「PageSpeed Insights」の指摘の1項、2項、4項、5項、6項、9項が改善されます。

2項、9項は、「.htaccses」を手修正することでも対応可能ですが、静的な設定ですのでプラグインを使用しても負荷とはならないので、間違いの少ないプラグインで設定しちゃいましょう!設定は簡単!「WP Fastest Cache」をインストール・有効にして、以下のようにチェックを入れます。

WP Fastest Cacheの設定

このままでもいいですが、念のため、キャッシュのフラッシュの設定をしておきます。

WP Fastest Cacheのキャッシュを1日に1回リフレッシュ

次に、「Fast Velocity Minify」をインストール・有効にします。この状態で無条件HTML/CSS/JavaScriptの縮小・結合をしてくれますが、テーマの作りや使用しているプラグインによっては不具合が発生するかもしれません。(出来れば、ローカルに公開サーバー同等環境を用意して確認しておくのが良いと思います。)

「WP Fastest Cache」でもHTML/CSS/JavaScriptの縮小・結合は出来ますが、無料版では、元のソースを残していたり、不十分ですので、この部分は「WP Fastest Cache」と連携して動作する「Fast Velocity Minify」に任してしまいます。(WP Fastest CacheはFast Velocity Minifyを無効にするように警告しますが、Fast Velocity Minify側は問題ないとしている)※

※警告が出た場合、設定がセーブされませんので、「Fast Velocity Minify」無効の状態で、「WP Fastest Cache」を設定します。その後「Fast Velocity Minify」を有効にして、キャッシュのフラッシュも「Fast Velocity Minify」側でするようにすれば、問題はないようです。

これまでに記述したツールで評価結果をよくしたり、不具合を改善するためには、3カ所チェックします。

Fast Velocity Minify設定方法

あと、うまく動作しないテーマの場合は、「JS and CSS Exceptions」のIgnore Listに記載しましょう。例えば、

/wp-content/themes/%テーマ名%/style.css

こんな感じで記載します。「BizVektor」の場合だと、私の事例では、以下のようにすると不具合なく動作するようですが、殆ど高速化は見られないので、使用しない方が良いかもしれません。(お客様のサイトなので使用を止めました)

/wp-content/themes/biz-vektor/design_skins/001/001.css

最後にFixしているホームページなら無料の画像CDNを導入しましょう

画像限定のCDNの導入は簡単で、画像はサイトデータの多くを占めますので、高速化に大きく貢献しますが、注意が必要です。意識的にデータの削除は出来ませんし、URLさえわかればだれでもアクセスできますので、個人情報にかかわる写真や頻繁に差し替える画像を扱う場合は、使用を控えましょう。対象外設定も可能ですので、部分的に採用することも可能です。

WP Fastest Cache設定 CDN by Photon

「WP Fastest Cache」で「CDN by Photon」を設定します。CDN Url:はランダムは避けてどれか選びましょう。設定後暫くするとCDN経由で画像アクセスするようになります。

ファイルアクセスの状況を分析すると

「Pingdom Website Speed Test」のFile requestsを見ると、レンタルサーバーのDNS/SSL/Wait(Wordpressのジェネレーション時間?)で100ms~1秒まで変動します。この部分がレンタルサーバーの性能によって大きく変わる部分と思います。現状、通常500ms程度で、100ms以下の場合もあり、理想的な高速なサーバーであれば、0.4S程度反応が早くなるかもしれません。

File requests 結果

 

今後の課題

実は、「pagespeed」での測定結果が微妙なんです。PCでは90/100なんですが、モバイルが71/100と微妙な結果となります。モバイルのスコアをせめて80台にしたいと思っていますが、提案してくれる改善策は、限界でどうしたものか....サイト全体のCDN化は避けたいので、考え中....

 

その後

コメントに書いたようにCSSフレームワークとstyle.cssをインライン化、「WP Fastest Cache」と「Fast Velocity Minify」を正しい手順で設定(上記※)、画像CDNは使用したままで、「pagespeed」の完全なレポートでのスコアが、モバイル/パソコンともに98/100となり、一応の満足な結果となり、今後の高速化への施策も見えてきましたので、今回の追求はここまでとします。(facebookとgoogle Analyticsを無効とすれば、100/100

 

覚書・補足

SNS系のプラグインは、意外に重いので、できればテーマ内で処理したほうが良さそう(今後の課題:今後の弊社テーマ「pureframe」の残項目に追加)。今回は、「Seed Social」で対応、このプラグインは’the_excerpt’を書き込んでいるようなので、’get_the_excerpt()’の使用には注意が必要。

‘Crayon Syntax Highlighter’などテキストをスキャン、ハイライトしてくれるようなプラグインは大変見やすく利便性は高いのですが重いので、必要なページのみ有効とする等工夫が必要かもしれない。このプラグインに関わらず、’Contact Form 7’など使用しているページ以外に不要なものも同様に

専門の担当者のいない企業・店舗のホームページについて

専門の担当者をアサインできない企業・店舗様が自社や自社製品のホームページを構築する場合、外注するのが最も確実な方法ですが、費用削減、人材育成など様々な理由であえて、自社内で作成する場合のどのようにすれば良いでしょうか?

目的を明確にしましょう。

何のためにホームページを作成しようとしているのか明確にして、ゴールを明確にしましょう。

  • 会社の名刺・看板として
  • 新製品の広告塔として
  • 人材募集・協業者募集の案内

別に広告を出す等、誘導は別でパンフレット的なレベルであれば、不慣れな担当者でも実現できる手段はあります。

それ単独で集客を考えているなら、かなりハードルが高くなり実現性は低くなります。但し、店舗販売のローカルビジネスや、極めて特殊で競合他社がいないビジネスであれば、実現性は高くなります。

社内で実現性が低い目的・ゴールの場合は、教育期間・費用などトータル的に検討して、外注をご検討されるのが良いでしょう。外注する場合も対応範囲で2万円台から数百万(本格的?ホームページの場合、60万~150万程度)の費用と様々ですので、管理する人件費・工数を考慮すると外注に委託する方が費用を抑えられるかもしれません。(内容にもよりますが、弊社の場合だと作成費+年間のサーバレンタル費・管理費を含めても10万円前後だったりします。)

お気軽にお問合せ下さい
(ご要望の内容如何で、愛媛県以外の事業者様も対応させて頂きます。)

予算と期間は?

ホームページを作成するには公開するための場所が必要です。契約プロバイダーでホームページが作成できる場合にはそれを利用する方法もありますが、使用できるToolが自由度がなかったり、営利目的で使用は制限されていて、独自ドメインの使用や広告の非表示には有料サービスの利用が必要だったりします。

最近では安価なレンタルサーバーや格安でホームページを立ち上げられるサービスがあり、ホームページ専門のサービスを利用する方がより本格的なホームページは作成しやすいと思います。人件費を除き、作成費・維持費を0円とするならば広告が控えめで見栄えも良いAmeba Owndがおススメです。(独自ドメインは将来的な会社の財産となります。年間数千円なので必ず取得しましょう。)

(ドメイン取得は、こちら ↓)

但し、いくつか単独では機能不足(問合せフォーマットがないなど)もありますので、他のサービスを利用して補うテクニックが必要だったりはします。予めビジュアル素材(写真など)や記載すべき内容が明確であれば、作成期間も極めて短期間で公開できるでしょう。(事前準備が十分できていれば、1日で公開も十分可能です。)

月々1,000円前後であれば、選択肢は相当に広がります。Wix(無料サービスもありますが、本格的利用には有料サービスが必要)やGoopeなど初心者でもホームページの作成が容易なサービスが利用できます。WiXはレゴブロックのようにパーツを並べて自由度に構築できます(別記事で書きましたが、頻繁に保存しましょう。折角の苦労が一瞬で消えますので)。飲食店などローカルビジネスにはGoope(グーペ)がおススメです。

グーペの場合、ページを追加したいなどの場合に階層メニューが作成できないなど窮屈に感じる場合があります。

そんな場合は、低価格のレンタルサーバを使ってbaserCMS(4.0以降)で構築されると本格的なホームページが意外に簡単に作成できます。baserCMSは日本語のコーポレートサイト用に開発されたCMSですので、大変日本語にフレンドリーで4.0になって大変洗練されていますし、比較的軽いので月額100円の超低価格のレンタルサーバーでも運用できます(SSLが使用できない、高トラフィックは不可など制限はあります。)ので、リスクも低いといえます。セキュリティ対策ももともと十分考慮されている上に世界的にはシェアが低い(日本語専用なので)こともありターゲットとされる可能性も低く比較的メンテナンスも楽だと思います。

◆とにかく安い。時間帯で重い場合もありますが、連続運用の信頼性は十分

◆比較的安価で安定した性能が好評で、シマンテックグループのSSL証明書【0円】

◆お値段は少し上がりますが、安定した高性能が好評

CMSといえば、Wordpressもお手軽で、テーマの範囲でとりあえず立ち上げるだけであれば、担当者不在でも不可能ではありません。しかし、セキュリティ対策を怠ることができないので、しっかり面倒を見る必要があることと、さすがに100円サーバー(Lolipopのエコノミープラン100円プランではそもそも動きません。)では重く実用的ではなく※、ある程度の快適な運用には経験と知識が必要となりますので、専任者がいない場合は、お勧めできません。

※ レンタル費が高いサーバー程、高速・高機能ではありません。遅いから高いサーバーへ移設しても必ずしも早くはなりません。(もちろん早くなる場合もありますが、ホームページから無駄を省いたり、CDNを利用するなど高速化する工夫をされる方が効果的です。)実はこのサイトも「PageSpeed Insights」の評価が50/100(立ち上げた直後はもっと良いスコアだった(-_-;))を切るほどになっていましたが、自作テーマに変更し、無駄を省いて、キャッシュや圧縮を利用することで85/100、サーバーのレスポンスが良い時には90 overまでに改善しました。(ちなみにフレームワークとフォント以外はCDNは使用していません….現在は、画像もCDN使用)

このあたりのWordpressサイトの高速化については、別途記載したいと思います。

CSSフレームワークpureの概要

CSSフレームワークといえば、Bootstrapがまず思い浮かびますが、ご存知の通り他にも沢山の種類が存在します。その中でもpureはかなりサイズが小さく、その割に必要なフレームワークはしっかり押さえていて、使いやすいフレームワークになっています。

 

PUREの機能概要

BASE

Normalize.cssがベースになっていますので、別にリセットの用意は必要なくブラウザの違いによる表示の差分も最小限になるようにできています。

Hiding Elements

class=”hidden”; /* display: none !important;  */

 

Responsive Images

class=”pure-img”;/* responsive imge */

example:

<img src="/wp-content/uploads/2017/09/a0001_000375_m.jpg" alt="クリスマスの並木道" class="pure-img" />

 

クリスマスの並木道

FORMS

各種タイプのFormが予め設定されていて、「class=”pure-form”」と指定するだけでformが使用できます。細かいデザイン設定する場合は、デザイン設定用のclassを合わせて予め設定して、そちらでアレンジするだけです。

.pure-form input[type=”text”],
.pure-form input[type=”password”],
.pure-form input[type=”email”],
.pure-form input[type=”url”],
.pure-form input[type=”date”],
.pure-form input[type=”month”],
.pure-form input[type=”time”],
.pure-form input[type=”datetime”],
.pure-form input[type=”datetime-local”],
.pure-form input[type=”week”],
.pure-form input[type=”number”],
.pure-form input[type=”search”],
.pure-form input[type=”tel”],
.pure-form input[type=”color”],
.pure-form select,
.pure-form textarea 

コンパクトな 1 lineの入力フォームならこんな感じで簡単に記述できます。(「pure-button*」は後程記述する)

<form class="pure-form">
<fieldset>
<legend>A compact inline form/ログインフォーム</legend>

<input type="email" placeholder="Email">
<input type="password" placeholder="Password">

<label for="remember">
<input id="remember" type="checkbox"> 記憶する
</label>

<button type="submit" class="pure-button pure-button-primary">サインイン</button>
</fieldset>
</form>

 

 

A compact inline form/ログインフォーム

ラベル付き入力BOXを表示するようなFormの場合、calssに’pure-form-stacked’を追加します。

.pure-form selectがdefaultで、2.25emに設定されていますが、高さが足りないようなので、調整が必要かもしれません。ここでは、2.7emとしています。

こんな具合に

<style type="text/css"><!--
.pure-form select {height:2.7em;}
--></style>

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>A Stacked Form/ラベル付きアカウント入力フォーム</legend>

<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
<span class="pure-form-message"> 必須  </span>

<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">

<label for="state">都道府県</label>
<select id="state">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select>

<label for="remember" class="pure-checkbox">
<input id="remember" type="checkbox"> 記憶する</label>

<button type="submit" class="pure-button pure-button-primary">ログイン</button>
</fieldset>
</form>

 

A Stacked Form/ラベル付きアカウント入力フォーム 必須

入力BOX表示位置を揃えたい場合は、calssに’pure-form-aligned’を追加します。そして、ラベルと入力フォームを’ class=”pure-control-group” ‘で括ります。

こんな具合に

<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
<span class="pure-form-message-inline">必須項目</span>
</div>

<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>

<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" type="email" placeholder="Email Address">
</div>

<div class="pure-control-group">
<label for="foo">任意のラベル</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>

<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">利用規約を確認しました
</label>

<button type="submit" class="pure-button pure-button-primary">送信</button>
</div>
</fieldset>
</form>

 

必須項目

‘Pure Responsive Grid’を併用することで、レスポンシブデザインに対応した入力フォームとなります。

このような具合に

<form class="pure-form pure-form-stacked">
<fieldset>
<legend>レシポンシブ 入力フォーム 用例</legend>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"><label for="last-name">苗字</label> <input id="last-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="first-name">名前</label> <input id="first-name" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="email">E-Mail</label> <input id="email" class="pure-u-23-24" required="" type="email" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="city">市町村</label> <input id="city" class="pure-u-23-24" type="text" /></div>
<div class="pure-u-1 pure-u-md-1-3"><label for="state">都道府県</label><select id="state" class="pure-input-1-2">
<option>愛媛県</option>
<option>高知県</option>
<option>香川県</option>
<option>徳島県</option> 
</select></div>
</div>
<label class="pure-checkbox" for="terms"> <input id="terms" type="checkbox" /> 利用規約を読みました </label> <button class="pure-button pure-button-primary" type="submit">送信</button></fieldset>
</form>

 

レシポンシブ 入力フォーム 用例

テキストベースの入力フォームのセットを’ class=”pure-group”‘で括ることで、サインアップフォームやモバイルデバイスに適した入力フォームとなります。

このような具合に

<form class="pure-form">
<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="Username">
<input type="text" class="pure-input-1-2" placeholder="Password">
<input type="email" class="pure-input-1-2" placeholder="Email">
</fieldset>

<fieldset class="pure-group">
<input type="text" class="pure-input-1-2" placeholder="A title">
<textarea class="pure-input-1-2" placeholder="Textareas work too"></textarea>
</fieldset>

<button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign in</button>
</form>

 

To be continue  

WordPressのローカル開発環境を簡単に構築

WordPressのホームページを作成したり、テーマ作成も実際のレンタルサーバー上でできなくもないですが、運用中や移設準備中だったりすると、ダーミーサーバーを構築して試したりとなります。 そんな時にやっぱりローカルで適用予定のサーバー上と同じことができれば、リスクなしにいろいろトライでき、ほぼ完全な形でサーバー上で公開できます。 ローカルでWordpressを動かすとなると様々な先人たちが比較的簡単に構築できるツールを公開して下さっていますが、ある程度専門的な知識を要求されたり、サーバーごとのリビジョン違いなどへの対応となるとなかなか難しいと思います。最近では、展開するだけでサーバーが構築できるinstantwordpressが登場してお手軽に試せますが、残念ながら、これはリビジョンが固定となり、2017年8月時点でphpは、最新の7ではありません。

そこで、おススメなのは、Windows版は最近リリースされたばかりですが、「Local by Flywheel」。これがなかなかの優れものです。このソフトをインストールして構築したいサーバー名と環境を選べば自動でローカルサーバーを構築してくれます。複数構築ができるので、サーバーごとに構築することで、いつでもネット上のサーバーと同じことを試すことが可能となります。 ホームページ作成・修正にあたり、ローカル画像・ファイルは、(書き換えてくれるようですが、念のため)相対パスで記載することだけ注意しておけば、Wordpressのプラグイン「All-in-One WP Migration」を使って、Export/Importで簡単にローカル環境とインターネット環境が相互に適用できます。  

ロリポップが無料の独自SSLを提供開始!

待ってました!
実は、最近重くなったので、サーバーごと引越しを検討していました。どういうわけか、動作が重かったのも急に改善されたようで、高速を謳っているZ.comと性能差は感じないレベルまで回復しています。暫くは引越しは見送りとなりそうです。

いつもロリポップ!をご利用いただき、ありがとうございます。
ロリポップ!では本日より、無料独自SSLの提供を開始いたしました!
それを記念して、10日間限定の【全プラン初期費用無料キャンペーン】を開催中です。
詳細はこちらをご確認ください。
訪問者も安心できるホームページをお得につくるチャンスです♪

「Let’s Encrypt」なので、個別認証のSSL認証ではありませんが、手軽にSSL化できるのは大変ありがたい。

問合せページや、現時点でのSSL差別化の動きには十分なSSL化が無料でできるのは大変うれしい。他社も無料・格安提供を始めているのでいずれはとは思ってましたが….

早速、主なページや、お客様のページもSSL設定をしました。

ん~、完全に対応させるには、最低限以下の設定が必要なので、まだ完全に安全表示は一部だけ.....

SSL化にあたりやること

  • WordPressの設定(WordPress アドレス (URL)、サイトアドレス (URL))の変更。変更すると一度Logoutさせられるが、慌てない。ただ、ミス修正は直接変更が必要になるかもしれないので、DBの修正箇所くらいは事前に確認しておくと安心です。
  • 301の対応、SEO対策ですね。
RewriteEngine On RewriteBase /
RewriteCond %{HTTP_HOST} ^himeport.co.jp
RewriteRule ^(.*)$ https\:\/\/www\.himeport\.co\.jp\/$1 [R=301,L]
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]

こんな感じ、下の2行が今回追加。これで、httpでアクセスが、httpsに

  • 画像やリンクで、httpsでないものは、httpsへ変更。

(ほとんどの画像はあらかじめ相対アドレスにしていたつもりですが、漏れがいっぱい。外部リンクはダメなのがいっぱいなのでどうするか検討中。)

まぁ、こんなところで、最低限、問合せページと出来れば導入ページはグリーン▲(保護された通信・安全な接続)にして体裁を整えましょう。

ECショップ・モールも、BASE、Yahoo、楽天、ポンパレとSSL化しています(Amazonは以前から)。この流れ乗り遅れると気が付けば訪問者が1/10なんてことになるかも

同じドメインでメールを使わないWordpressだけなら、SSL化100円のこちらもおススメです。Wordpressで必要なことはすべて料金内で設定済み、あとは中身を作るだけ。メールも使うなら、Z.comのレンタルサーバーも契約してこちらでメールを使用することになります。このレンタルサーバーは企業向けクラウドサーバーの延長線の感じで、こちらでWordpressなど様々なAppを動作させることもできますが、すべて自身で設定が必要となりますので、やや専門的な知識が要求されます(ロリポップの自動で7世代バックアップが当たり前となった私的にはバックアップが一番問題で、当面はロリポップへ定期バックアップで運用予定。将来的には事務所のファイルサーバーに….)

2014年にGoogleが「httpsをランキング アルゴリズムでのシグナルとして使用する」とアナウンスされて、ついに本年度から本格化します。その流れに従い、Yahooショップや楽天市場などのモールも常時SSL化されます。

ローカルビジネスで地域検索で見つけて頂ければOKなホームページを除いて、Google検索を重視するホームページは常時SSL化を遅ればせながら、急がなければならない状況になっています。

弊社ホームページは、現在ロリポップ!のレンタルサーバーを利用しています。

【スタンダートプラン】

  • 独自ドメイン利用可/マルチドメイン100個まで
  • 30個までDB利用可のためWordPressはもちろんEC-CUBEで複数ECサイト作成も可能!
  • 独自SSL、SSH利用可!のパワーサーバーです!
  • 月額500円~  の【スタンダードプラン】は大容量の120GB!

弊社の運用実績から、非常に安定しており、性能改善も行われており、格安価格ですし、大変魅力的なレンタルサーバーとなります。しかし、残念ながら、現状は、常時SSL化にドメイン当たり別途2,000円/月(長期契約割引あり)必要となってしまいます。(年間契約で、常時SSL込みでスタンダードプラン2,170円/月~)

そこで、今現在、格安で常時SSLが導入できるレンタルサーバーをピックアップしてみました。(弊社が移行も視野にいれて検討しているサービス)

なんと年間4,680円(税別)で常時SSLホームページが構築できます。

■Z.comレンタルサーバーの各種プラン

  • 全プラン ~初期費用無料!!~
  • 【Zeroプラン】は月額290円で容量10GB  初めてホームページを作る方やコストを抑えたい方にオススメ
  • 【Zetaプラン】は月額680円で容量100GB  複数のサイトや法人サイトの運用にオススメ
  • 【Zeusプラン】は月額1,430円で容量なんと無制限!  動画や高画質写真など大容量ファイルの公開にオススメ
  • 【Z.com for WordPress】は月額720円で容量10GB  安心、高速なブログ環境をお探しの方にオススメ

■サービスの特長

◇Zero/Zeta/Zeusプランの特長

  • 訪問者の閲覧をより快適にし、離脱も防ぐ【超高速SSDストレージ】
  • 140種類以上のアプリケーションを1クリックでインストールできる【かんたんインストール】
  • 世界最高水準の技術をもって撃退する【迷惑メールフィルター】etc・・・

◇Z.com for WordPressの特長

  • インストール作業不要ですぐにWordPressが利用できる【自動セットアップ】
  • 何かあったときは1クリックで元に戻すことができる【自動バックアップ機能】
  • 本番とまったく同じ環境でテストすることができる【ステージング環境】
  • WordPressサイトの部分的なコピーも丸ごとコピーも1クリックで!【サイトコピー機能】etc・・・
  • セキュリティ対策もしっかり出来る【独自SSL】は月額100円!! 

高速性と高い技術サポートが評判のサーバが、常時SSL無料で月額900円(税抜)で使用できます。マルチドメインで運用ならこれで決まり

■エックスサーバーの特長

エックスサーバーは高速・多機能・高安定性のそれぞれの観点において、 下記特長を備えています。

▼ 高速サーバー

  • 高速性を重視し、最新16コアCPU(Xeon E5シリーズ) +192GBメモリ+RAID10を採用!
  • 快適232Gの国内高速バックポーン!
  • FastCGIやキャッシュモジュールに対応! PHP高速化や負荷軽減を図ることが可能!

▼ 充実の多機能 ・月額900円(税抜)から、大容量200GBからの高コストパフォーマンス

  • マルチドメイン・メールアドレス無制限!
  • 独自SSLを無料で利用可能!
  • 操作性を重視した簡単操作のサーバー管理ツール!
  • PHP7などの幅広い言語に対応!
  • SSHやcronによるコマンド、プログラムの実行も可能!
  • 人気のブログやショッピングカートを簡単インストール!

▼ 高い安定性

  • 安定のサーバー稼働率99.99%以上
  • お客様の大切なデータが消失してしまう可能性を大幅に 減らすことが可能な『自動バックアップ』機能に標準対応!
  • 初心者でも安心の24時間365日メールサポート!
  • 電話サポートあり!専任スタッフが対応

「プランS」(2017年6月30日までの期間限定)ディスク容量300GBで独自SSLも無料で上記の2サービスよりお得感がありますが、上位プランの様子からマルチドメインよりデータサーバ的な運用に向いていると思われます。

Yahoo! JAPANグループならではの高品質なサーバー環境で低価格&大容量。 容量、メモリ、CPUを自由自在に拡張OK。保守管理はファーストサーバにすべておまかせで安心です。

●Zenlogicの特長●

  • 初期費用:0円/月額:890円 【2週間無料トライアル付】
  • 最大ディスク容量2TB(2,000GB)
  • 電話&メールサポート無料
  • シマンテックグループのSSL証明書0円+無制限<Zenlogicだけ>
  • マルチドメイン、メールアドレス無制限
  • ビジネスに必須のセキュリティ機能標準搭載
  • 専門スタッフによる個別サポート、作業代行サービス
  • 継続的に機能強化・改善し、常に最新の環境をご提供

 

これまで上げた3件は、構築にはそれなりの知識と経験が必要ですが、こちらは簡単にホームページが構築できます。

兎に角、簡単に構築できて、常時SSLで2,000円/月。但し、テンプレート以上のことをするには知識が必要で、制約も多くなります。

ブログのように更新ができるお知らせ更新、 メニュー一覧やアクセスマップ、ネットショッピング機能など、 ホームページ作成に必要なコンテンツがあらかじめ用意されているため、 情報を登録すれば、すぐにオリジナルのホームページが完成します。 デザイン作成は、4,000通りものデザインパターンから、 イメージに合ったデザインを選択できるほか、 HTMLとCSSでカスタマイズすることも可能ですので、 初心者だけでなく、中・上級者の方も満足。 もちろんスマートフォン・タブレットも対応!

 

裏技的ですが、通販もされるのであれば、ネットショップでホームページを構築する方法もあります。

カラーミーショップなら、テンプレートをかなり自由に変更できますので、トップページをホームページの体裁にすることは比較的容易です。常時SSLは独自ドメインの場合、残念ながら、1,000円/月必要ですが、エコノミープランであれば、常時SSL込みで1,900円/月でショップ兼ホームページが構築できることになります。

但し、いくつか注意点があります。

  • エコノミープランだと自由ページが10ページまで(年ごとに増えて100ページまで)ですので、大規模なホームページの作成には向きません。
  • ホームページ化には、テンプレートを編集できるhtmlの知識が要求されます。
  • クレジット審査を受ける場合にショップとしての記載以外部分が不適切と判断されるリスクがあります。

 

GMOペパボから「ロリポップ! スタジオ」のリリース通知が来たので、ちょっと覗いてみました。

グーペ の焼き直しみたいなものかと思ってましたが、その機能を見てみて裏切られました。

グーペ とは全く違い、かなり自由度が高いようで、どうもレゴブロック的に構築できるようです。メニューの階層構造はもちろん、SEO対策もしっかり考慮されているようです。

ロリポップ! スタジオ」が月額980円(年内は無料)で、ロリポップ! のエコノミープラン(月額100円エコノミープラン 詳細はこちら )でも使えるので、月額1080円でかなり自由度の高いホームページが簡単にできてしまうとなると、なかなか魅力的なので、いろいろと忙しいこの時期ですが、時間を作って年内の無料期間にいろいろと試したいと思います。

ざっと機能を見たところ、「グーペ 」にあって「ロリポップ! スタジオ」にない機能は予約機能だけのようですが、おそらく競合となるであろう「WIX」が予約機能を備えているので、近い将来サポートされるかもしれないですし、とりあえずは外部の予約システム「Coubic」などを利用すれば事足りると思います。

グーペ 」で物足りない方は、「ロリポップ! スタジオ」でって感じでしょう。

スキルのある方がWordpressを使用するには及びませんが、通常ホームページに要求される要件はほぼ構築できるほど、ポテンシャルは高そうな印象です。マニュアルの機能からだけの印象ですので、実際に使用して使いやすいか、信頼性、レスポンスはどうかなど、実際に使って確かめてみたいと思います。

年内は無料ですので、多くの方が試されて、実力を確認して頂ければと思います。

私自身も含め、確認された結果を踏まえて、今後のお客様へのホームページ構築の提案に加えるか検討したいと思います。