当ブログで利用のWordPressテーマ “Mag” をレビュー。カテゴリーが特化していないブログやサイトにおすすめ

当サイトではThemeforestで購入したWordpressテーマ “Mag” を利用しています。

WordPressテーマ Magの詳細はこちら

もともと、当ドメインにはWEBの仕事に関連した記事はなく、ロシア語、海外生活にWEB関連の記事がごちゃまぜになることは本当は嫌だったのですが、事情あって約2年ほど前に、二つ運営していたブログを一つにまとめることにしました。

その時の記事はこちら:ブログ統合のお知らせ

ただ、その時から、ブログのテーマが一貫していないことがとても気になっていました。WEB関連の記事を読んでくれた方のサイドバーのアクセスランキングにロシア語関連の記事が載っているのも変だし、トップページに来たと思ったら、WEBの記事とロシア語の記事と、さらに海外生活の話なんかがごちゃまぜになって時系列順に並んでいる…そんな当時のブログテーマには嫌気がさしていました。

それで何かいい方法はないか…と思って、思いついたのが、ブログ用のテーマを使うというより、ニュースサイトやWebマガジンに適したテーマを使うということです。

ニュースサイトでは、ありとあらゆるカテゴリーの記事が、毎日何記事も追加されます。そういうサイトでは、多くの場合、トップページはカテゴリーごとに分類して新着記事一覧を表示しています。個人ブログでも、同じように、カテゴリー別に新着記事やランキングを表示させることができれば、特定のカテゴリーに興味のある方がそのカテゴリーの情報を探しやすくなるわけです。

そういうわけで、私が使ってみることにしたのが、現在も使用中のWordpressテーマ “Mag” です。Magを選んだ時のポイントは、前述の「ニュースサイト」的な形でトップページを表示できるというののほかにも、以下のような理由がありました。

  • AMPプラグインに対応
  • デザインが気に入った
  • SNSシェアボタンプラグインを同梱
  • ビルダープラグイン(Visual Composer)を同梱
  • レスポンシブ対応
  • Themeforestで高評価

ブログを運営するうえでもはや必須なのがAMP対応ですね。AMPとは、Googleが推奨しているモバイル端末でのページ表示速度を高速化するための手法です。モバイルからのアクセスは特に、ページ表示に時間がかかるとすぐ閉じられてしまうという機会損失が起こりやすいので、ブログのAMP対応は重要です。実際、当ブログへのAMPページへのアクセスは全体の約半数に上ります。なので、AMPプラグインとの相性がいいWordpressテーマを使うことは個人的には一番重要なポイントでした。

その他にも、SNSのシェアボタン、フォローボタンを設置できるプラグインEasy Social Share Buttons)が同梱されているのも魅力です。このプラグインのいいところは、日本のSNSシェアでよく使われるLINE、Hatenaブックマーク、Pocketのシェアボタンが使えることです(といっても、その中のLINEしか今のところ使ってませんが…汗)。無料プラグインだとLINEとかHatenaとか、なかなか無かったり、あってもシェアボタンのデザインが微妙だったりするので、このプラグインは単体でも購入する価値があるくらいです。プラグイン単体で購入すると20$ですが、Magテーマには無料で同梱されていますので、お得ですね。

Easy Social Share Buttonsの詳細はこちら

あとは、おなじみのページビルダーVisual Composerも無料でテーマに同梱。記事内ではあまり使いませんが、トップページにはやはりビルダーがあると自由にレイアウトしやすいですし、各パーツの設定も楽です。

レスポンシブ対応はもはや当たり前ですが、やはりチェックしておきたいポイント。そして、テーマを販売しているThemeforestでのユーザ評価がよかったこと、定期的にアップデートがあること、デザインが個人的に気に入ったといったことも、Magを選んだ要素でした。

もちろん、Themeforestにはニュースマガジン系のWordpressテーマがたくさんありますので、機能面、デザイン面の両方で気に入るものを見つけてみてください。

ニュースマガジン系でよく売れているWordpressテーマはこちら

WordPressサイトのサーバー引っ越しならぜった知っておきたいhostsファイルの使い方。

WordPressサイトのサーバーのグレードを上げるためにサーバーの移転をするとか、移転のついでにデザインを変更するといった作業は、とてもフレッシュな気分になっていいのですが、切り替え当日だけは困ったサプライズが起きないか、不安になります。サーバーの切り替え作業で予想外のことが起きると、DNSを古いサーバーに戻したり、サイトアクセスを半日以上拒否しなくてはいけなかったり、デザインの崩れたサイトが公開されてしまう…なんていう失態もありえます。。

そんなリニューアル版への切り替えですが、これをやればほぼ100%間違いなくスムーズにできる!という方法がありました。リニューアル版に切り替える前に、リンク切れとかプラグイン設定がおかしいとか、起こりうる問題点をすべて確認し、必要なら修整して、完璧になった状態でDNSを切り替えられます。

何で今まで知らなかったんだろう…と思うくらい、シンプルなことなのですが、備忘録という意味も含めて、この記事に書いておきたいと思います。

 

今回のリニューアルにおける前提条件

サイトの「リニューアル」にも色々あるので、以下のような状況でリニューアルすることを今回は想定します。

  • 既に公開中のWordpressサイト(orブログ)がある → mysite.com というドメインのサイトとする
  • 別サーバー(移転先サーバー)は既にレンタル済みで、そこにリニューアル版を別ドメインで作成している → newsite.comとする
  • mysite.comというドメインでの運営を継続する(つまり、newsite.comというドメインに切り替えるわけではない)

 

私がやっていたサーバー切り替え手順

上記の条件でサーバーを引っ越しする場合、移転先サーバーには新しいデザインでのリニューアル版が完成した状態で、旧サーバーからのDNS切り替え(ネームサーバー変更)となります。

いつも作業はアクセスの最も少ない深夜に行います。そして、以前行っていたのは以下のような手順でした。(分かっている方には「こんな危険なやり方をするか!!」と怒られてしまいそうですが。。)

1.以下のサイトからダウンロードできるSearch&replaceツールを使って、newsite.comのデータベース内にあるnewversion.mysite.comという文字列をmysite.comに書き換える

ツール→ Database Search and Replace Script in PHP
ツールの使い方はこちらの記事が大変参考になります→ WordPressサイトのドメイン一括置換には「Search Replace DB」が良い!

2.mysite.comのネームサーバー(DNS)を移転先サーバーのものに書き換える

3.数時間もたてば切り替えが完了するので、newsite.comから切り替わったmysite.comの表示を確認する。画像やページのリンク切れエラーなどがないか、目視とブラウザの開発者ツールにて確認。

手順1で紹介したツール自体は非常によくできていて、ほぼ確実にすべてのDBの文字列を書き換えてくれます。このツール以外の方法(Search Regex等のプラグイン)でURL文字列を書き換えようとすると、置換が不十分になる可能性が高いです。

問題点は2~3の手順です。上の手順でやると、DNSが切り替わったあとに初めてmysite.comの新しい状態を確認することになるわけなので、万が一、1の手順でのドメインの書き換えが間違っていた場合に、表示が崩れる、リンク切れが多発するなどといった事態が生じます。

 

本来は、新サーバーのデータベースでnewsite.comからmysite.comに書き換えを行った後、自分で新サーバーでの表示を確認してから、最後にDNS書き換えをするのが理想です。

それが、以下の方法を使うことでできるようになります。

 

hostsファイルの変更で新サーバーのmysite.comの表示をDNS切り替え前に確認

まずは、先ほどと同じように、このサイトからダウンロードできるSearch&replaceツールを使って、newsite.comのデータベース内にあるnewversion.mysite.comという文字列をmysite.comに書き換えます。(ツールの使い方はこちらの記事が大変参考になります。)

次に、hostsファイルを管理者権限で開き、以下のような一行を追加します。

hostsファイルの場所はWindowsのバージョンによって異なります。以下の記事を参考にして見つけてください。
→ 【Windows】hostsファイルとは、hostsファイルの場所、hostsファイルの編集・書き換え方法

例えば、移転先サーバーのIPが123.467.897.222なら

という一行を追加し、hostsファイルを保存します。

こうすることで、自分のPC(ブラウザ)からmysite.comにアクセスしたときは、旧サーバーではなく、移転先サーバーのmysite.comにアクセスするようになります。この状態で、移転先サーバーでmysite.comがデザイン崩れなどなく正しく表示されているか、リンク切れ等を起こしていないか、問い合わせフォームなどがちゃんと使えるかなどをあらかじめチェックすることができます。

これで確認が完了となり次第、mysite.comのネームサーバー(DNS)を移転先のものに変更します。先ほど追加したhostsファイル内の一行は消しておきます。

あとはコーヒーを飲みながらDNSが切り替わるのを待つだけです♪

 

 

作業手順としてはちょっとした違いしかないのですが、hostsの設定であらかじめ新サーバーでの表示確認ができるというのは、かなり安心感があります。うまく説明できたかどうかわかりませんが、実際にやってみると、とても簡単なので、ぜひ活用していただければと思います。

hostsファイルの扱いには気を付けないといけないようなので、設定を追加したら消し忘れないように注意してくださいね。

 

 

海外レンタルサーバーFastCometを使ってみたらなかなか良かった!Mixhostから引っ越すまでの経緯

昨年末に1年間使ったMixHostをやめて、海外レンタルサーバーFastCometに引っ越しました。少し勇気がいりましたが、なかなかお得感のある良いスペックのサーバーに出会え、ほっと胸をなでおろしているところ。せっかくなので、これまで1年お世話になったMixhostとの比較をしてみることにしました。

そもそも海外サーバーに引っ越した理由

わざわざ日本のレンタルサーバーをやめて海外のものにしたのには理由があります。これまではMixHostで当ブログの他に幾つかのサイトを動かしていました。さらにMixHostの前は、さくらサーバーのスタンダードプランだったのですが、さすがに重い…ということで、当時、爆発的に人気が出ていたMixHostに乗り換えました。

ただ、以前の記事(→ さくらのレンタルサーバーからMixHostに移転しました。良かったこと、イマイチだったこと色々。 )にも書いている通り、Mixhostで表示は速くはなったのですがなんだか、思ったほどの「速い!」っていう爆速感がなく、言ってみれば「可も不可もなし」程度だったのが正直なところ。比較的新しいサーバーということで、一時的にダウンすることも最初のほうは結構あった気がします(Google Analyticsでアクセスをみると、不自然にアクセスが激減する時があり、調べてみるとサーバーに問題が起きていたということが何度かありました)。

とはいえ、当ブログは日本語のブログで、90%以上は日本からアクセスしていただいています。なので、本来なら

  • 日本語ブログ用に日本のレンタルサーバー
  • 海外サイト用に海外のレンタルサーバー

という風に二つサーバーを持つのがいいんですが…。バカ高いわけじゃないとはいえ、毎年かかる経費ですので…できれば借りるのは一つだけにしたいという気持ちがありました。

日本のサーバーでも、Xサーバーなんかはヨーロッパからアクセスしてもかなり表示がサクサクでいいなとは思っていたのですが、なんだか「もう少し選択肢はないものだろうか」と思ってしまい、海外のレンタルサーバーもひとまず探してみることに。

そんなこんなで海外の比較サイトを見て一番、評価が高かったのがFastCometでした。(Blue Hostとか有名ですが、評価は分かれるようです。)

MixHostとFastCometのスペックと価格差

海外のサーバーにするなら、当然、日本からのアクセスにも十分な速度で応答するサーバースペックがないといけません。まずは、これまで使っていたMixHostと気になっているFastCometの価格とスペック差を見てみることに。すると、ちょっと驚く結果が。

MixHostスタンダード FastComet SpeedUp
価格(36ヶ月契約) 880円/月 9.95 USドル/月
価格(12ヶ月契約) 980円/月 12.95 USドル/月
 お試し期間 30日間無料お試し  45日間の返金保証
 SDDディスク容量  150GB  35 GB
 CPU  2 仮想コア  3仮想コア*  6 仮想コア
 RAM  1 GB 4GB*  6 GB 
ドメイン数 無制限 無制限
 SSL証明書 無料(Comodo) 無料(Let’s Encrypt)
 プライベートSSL証明書 なし グローバルサイン(契約が続く限り無料)
 無料独自ドメイン なし 1ドメイン(契約が続く限り無料)
 コントロールパネル cPanel cPanel

価格はFastCometのほうが少し高め。最近の為替レートで考えると、月当たり500円弱、FastCometのほうが高いですね。ただ、スペックは、500円高いこと以上にかなりいいと思います。特に注目したのは、CPUとRAMの違いMixhostが2仮想コア、RAM1GBだったというのに逆にショックを受けました。。これで複数サイトを動かすほうが無謀か…。

*2018年12月9日追記:MixHostのスペックが改善されていました。最新情報はこちらから確認してください。

FastCometは6仮想コアにRAM 6GB、とスペックの差は歴然。Mixhostでビジネスプランだと4仮想コア、RAM4GBになりますが、12カ月契約で月当たり約4000円かかります(SSDも80GBに増えることもありますが)。個人的にはSSDは35GBもあれば十分だと思っているので(現在10GBも使っていない)、ディスク容量よりもCPUやメモリを増やして欲しい派。そう考えると、FastCometはお得感があるなと。

さらに、契約時に1つ独自ドメインを無料で取得でき、SpeedUpプランの契約を続ける限りずっと無料で使えます。最初の1年だけ無料とかじゃないのも嬉しいところ。

必須のSSL証明書は、MixhostもFastCometも無料で使えるのがありますが、FastCometのほうでは、一つのドメインにグローバルサインの証明書が無料で使えます。

サーバーを引っ越しするときにネックになるのが、サイトコンテンツの移動ですが、これもSpeedUpプランなら3サイトまで無料で引っ越し作業をしてくれます。(私は結構この作業が好きなので自分でやりましたが)

あと、重要なのが、コントロールパネルですね。MixhostでcPanelに慣れていたので、FastCometもcPanelだったのがありがたかった。海外レンサバは結構cPanelを導入しているところが多い感じですが、cPanelだと日本語化できるし、サーバーの契約さえ済んでしまえば普段は日本語のコントロールパネルで気軽に使えます。

SpeedUpプランは、FastCometのレンタルサーバーの3つのプランのうち、最上級プランになります。このプランの一番の目玉は、SpeedUpという名の通り、サイトの表示速度を早くするためのキャッシュや圧縮などの機能が充実していること。実際Wordpressをインストールして、CloudFlareを有効にしただけで、特にキャッシュプラグインを使う必要もなくGTMetrixでの評価はAAとかABとか、かなり高い評価になりました。

FastCometのいいところは、本拠地はアメリカなのですが、ヨーロッパやアジア方面にもサーバーがあって、お好みでサーバー拠点を選べること。今回はドイツのフランクフルトを選びましたが、日本(東京)にも拠点があるようですし、シンガポールなんかも選べます。

で、実際に日本からのアクセスの多い当ブログの平均読み込み速度はどうなったかというと…

当ブログの表示スピードはどうなったか

Google Analyticsでの平均読み込み時間を見てみると、FastCometに切り替える前と後では、若干遅くなったかなという感じですが、さほど大きな差はないかなと思います。
表示スピード全体

ただ、サーバーの平均応答時間だけは目に見るように長くなっていて、やはりサーバーの拠点が日本にあるか、遠いヨーロッパにあるかの違いを感じさせられました。

サーバー応答時間

GTMetrixで、日本から一番近い香港のサーバーをアクセス地点にして、図ったときの評価はこんな感じ↓

やはりロードタイムは日本からだとそんなに爆速感がないんだろうなという感じですが、そんなにひどくはないなと思います(今度日本に行ってチェックするのが待ち遠しい)。当ブログは45%くらいのアクセスがすでにAMPになっているので、スピード重視の方はAMPで見てくれているでしょうし。

日本からヨーロッパのサーバーに引っ越してもそこまで遅くならなかったので、やはりFastCometのスペックの良さのおかげだなと思っています。もちろん、ヨーロッパからのアクセスを中心とする他のサイトは爆速になっています。あと、サイトを管理する側としては、Wordpressの管理画面の表示がサクサクになったのもありがたい。

日本で日本語のブログやサイトを運営する分には、海外サーバーをわざわざ選ぶ必要は全くないと思います。英語など、日本語以外の言語でのサイト運営が必要な方や、サーバー管理者やサイト運営者の中に日本語以外を母語とする方が含まれる場合などは、こういう海外サーバーも視野に入れると選択肢が広がっていいと思います。

もちろん、もっとしっかりしたサーバー管理者ならAWSでリージョンを自由に選んでサーバーを立てられるのでしょうが、個人ブログや小規模サイトの運営で、私のようにサーバーの知識がそこまでないという方には、海外のレンタルサーバーが手っ取り早くていいかなと。中でもFastCometはなかなか良かったので、おススメです。

High-Performance SSD Cloud

MixHostサーバでのWP SMTPプラグインの設定方法

ContactForm7での問い合わせメールや、Wordpressプラグインを使ったニュースレターなどが迷惑メールフォルダに入ってしまうことがあります。これを解決するために、SMTP経由でメール送信を行う設定をしていたのですが、以前使っていたさくらサーバと、現在使用中のMixHostでは設定の仕方が幾分違うようです。

さくらサーバーでの設定についてはこちらの記事で書いています
→ 自分の配信するメルマガが迷惑メールにならないためのプラグインWP Mail SMTP

今回はMixHostサーバ上のWordpressで、プラグイン WP Mail SMTP by WPForms を使う場合の設定について覚書を書いておきます。サイトはSSL通信になっています。

プラグインのインストール

プラグインページ: WP Mail SMTP by WPForms

上記のプラグインをインストールし有効化。Wordpress管理画面のメニューから、設定 > メールを選択します。

 

サイトドメインと同じメールアカウントを作成

メールアドレスは、サイトのドメインと同じものを使う必要があります。つまりサイトURLがabc.comならメールアドレスがxxx@abc.comになっているものを使うということです。そうでないと迷惑メール扱いになる可能性が非常に高くなります。

このようなメールがまだない場合は、MixHostのcPanelよりあらかじめ作成しておきます。

 

WP SMTPプラグインの設定

以下のように設定します。

WP SMTP設定1

From Email メールの送信者アドレス。ここは前述にあるとおり、サイトのドメインと同じドメインのメールアドレス(ruuski.netならinfo@ruuski.netなど)。

From Name  送信者の名前を設定。空欄にするとWordPressになる。

メーラー「WordPressの全てのメールをSMTP経由で送信する。」にチェック

Return Path チェックしないでOK

 

SMTP設定

以下に入力すべき情報はcPanelのメールアカウント情報から取得可能です。(以下のSet Up Mail Clientリンクをクリックすると情報が表示されます)

 

以下がWordpress側での設定項目

WP SMTP設定2

SMTP Host  通常サイトと同じドメイン名(上のキャプチャではmail.ruuski.netですがより正しくはruuski.netです)

SMTP Port 465

Encryption  「SSLを使用する。」にチェック

Authentication 「 はい: SMTP認証を使用します。」にチェック

Username 送信者メールアドレスと同じ 例)info@ruuski.net

Password 上記のメールアドレスにcPanalで設定したパスワード

 

以上で、設定を保存したら、テストメールを送信してみます。正しく設定されていればtrueが返され、テストメールがちゃんと届くはずです。

WordPress画像圧縮プラグイン(無料版) 5つの中でどれが一番圧縮できるかを比較してみた

画像が豊富に使われたサイトやページは、コンテンツを分かりやすく豊かなものにし、また重要なポイントを視覚にアピールすることができます。一方で、画像を多く使いすぎたり、サイズの大きな画像を使用することでページの読み込み速度が落ちてしまうと、逆にユーザビリティを下げてしまう恐れもあります。

サイトスピードの高速化はSEOのなかでも非常に重要な位置を占めていますので、GTMetrixやGoogle Page Insightsなどで画像を圧縮するべきだという警告がでるようなら、要注意。

そういう私のブログもしっかり警告がでており、画像圧縮プラグインを使って圧縮する必要がありました。。

WordPressの画像圧縮プラグインは評価が高いものが多く、どれを使おうか迷ってしまいます。一番人気でいわゆる「老舗」のプラグインならEWWW Image Optimizerということになるのでしょうが、人気とかインストール数が多いからという理由だけじゃなくて、「どれくらい圧縮できるのか」ということが一番重要な要素だと思います。

 

ということで、一枚の画像を用意し、5つの人気の高いプラグインそれぞれで圧縮した結果を比較してみることにしました。プラグインはすべて無料で使えるものに限定しています。

今回使ったのはこの写真。

オリジナルサイズは223KB(808 × 639ピクセル)、ブログやウェブサイト上に載せる画像としては標準的な大きさかと思います。(最近はもっと大きいな画像が使われることもありますが)

画像圧縮プラグイン5つの比較

以下がその圧縮後のサイズやプラグインの特徴を表にまとめたものです。

プラグイン 圧縮後のサイズ 圧縮数の制限 圧縮タイプ。その他 会員登録
EWWW Image Optimizer 202.7 KB 特になし 無料版はLossless圧縮のみ

NextGEN Gallery や GRAND Flagallery の画像も圧縮できる

不要
WP Smush 202.7 KB 特になし 無料版はLossless圧縮のみ 不要
Imagify 167KB 50MB/月(200KBの写真なら250枚) Agressive (Normal, Agressive, Ultraの3モードから選べる)
Imagify 143.69 KB  同上 Ultra(Normal, Agressive, Ultraの3モードから選べる)
Compress JPEG & PNG images 152.6 KB 月の上限500枚 Lossy(圧縮サービスで有名なTinyPNGが提供しているプラグイン)
ShortPixel 115KB 月の上限50 Lossy

 

そして以下が、オリジナルの写真(左側)と各プラグインで圧縮した後の写真(右側)を並べたもの。パッと見た感じはほぼどれもオリジナルと変わらないような気がしますが、少し目を画面から離してぼーっと眺めていると違いが見えてきます。

Wordpress画像圧縮プラグインの圧縮後の結果比較

 

結論:圧縮プラグインはどれがいいのか

圧縮する写真、サイトの用途にもよりますが、個人的にはImagifyのAgressive(中程度の圧縮、Lossy)モードが圧縮もそこそこしっかりできて安心感があるかなと思いました。

Imagifyのプラグインを使うと、Agressiveに基本しておいて、もう少し圧縮してもよさそうな画像だなと思ったら、管理画面からさらにUltraモードでその画像だけ強く圧縮する、というようなこともできます。

 

一番圧縮が強いShort Pixelの圧縮後の画像は鮮明さが欠けてぼやっとしている感じです。とはいえ、よく見なければ分からないですので、サイトの速度アップを重視していて圧縮を強めにかけたいなら、Short Pixelか、Compress JPEG & PNG images かを使うのがよさそうです。

ShortPixelだとほぼ半分のサイズにまでなるのが凄いところですが、月当たりの圧縮枚数の制限が50枚と少なすぎるので、これまで溜まりに溜まった既存画像を圧縮したい方にはあまり向いていません(もちろん有料版ならもっと圧縮できます!)。その場合はパンダが印象的なTinyPNGが提供しているプラグインCompress JPEG & PNG images を使うほうがいいですね。

 

逆にポートフォリオサイトや写真を重視するeコマースサイトなど画像の劣化を避ける必要があるサイトの場合は、Lossless圧縮のEWWW Image OptimizerかWP Smushがいいでしょう。

中間を行きたい人にはImagifyがおススメ。私もImagifyを使うことにしました。

 

無料かつお洒落な海外発WordPressテーマ配布サイト3選

無料でお洒落なWordpressテーマを配布している海外サイトを3つご紹介します。

「wordpress theme free 2017 」というようなキーワードで検索すると、各種ブログやサイトがおススメ30選、50選などと詳しい説明・キャプチャ付きで紹介してくれてるですが、手あたり次第に「これいいな」と思ったものを詳しく見てみると、大抵同じデザインスタジオや会社が作っているテーマに行きついていることが多かったりします。

それだったら、最初から大元のデザイン会社のテーマ配布ページをブックマークしておけば、次に探すとき楽だな~と思い、この記事にまとめておくことにしました。

純国産のテーマもいいですが、海外発のテーマは種類も断然多いし、フリーなのにデザイン面でも優れているものがたくさんあります。(多すぎて全部チェックするのが大変なくらい?)

海外発の無料テーマを探すならまずは以下の3サイトをぜひチェックしてみてください。

 

使いやすさも抜群で様々な用途にしっくりくるデザインThemeGrill

無料テーマ配布ページ

ThemeGrillのテーマは以前サイト運営用に使ったことがあるのですが、無料版でも充実したカスタマイズ設定ができ、固定フロントページのレイアウトもウィジェットベースで簡単にきれいな構成でできるのが魅力でした。

シンプルでもちょっとした細部のデザインにこだわっていたり、何よりも見やすくて色んなカテゴリーのサイトに使いやすいデザインのテーマが多いです。管理画面側の使いやすさもおすすめポイント。

2017年版のベストWordpressテーマとして、ThemeGrillのFlashというテーマがいろんなところで紹介されています。ランディングページ、一般サイト、ブログ、ショップなど様々な用途に使えます。

SiteOrigin Page Builderプラグインに対応しており、ドラッグ&ドロップでページコンテンツを作っていけることや、フリー版でも11ものカスタムウィジェットが使えたり、スライダーが設定出来たりと、シンプルなサイト作成には充分な機能が備わっています。

Flashテーマのデモ・ダウンロード: https://demo.themegrill.com/flash/

 

 

洗練されたモダンなデザインATHEMES

ATHEMESが提供しているテーマは、ミニマルでモダンなデザインのものが多く、個人的には一番好みのテーマ配布サイトです。個人ブログやニュースサイト、ポートフォリオサイトにもいいし、ショップやビジネスサイト向けんテーマもあります。現時点で当ブログが使っているテーマもこのATHEMESの無料テーマの一つ。

無料テーマ配布ページ

 

ニュースサイト用のテーマGREATMAGが最近は色んなところで紹介されているのを見かけますが、。少し前はマルチパーパスのテーマSYDNEYもよく紹介されていました。

GREATMAGのデモ・ダウンロード

カテゴリーごとに新着情報を分類してトップページに表示できるニュースサイト向けのテーマですが、個人ブログでも使いやすそうなデザイン。

 

SYDNEYのデモ・ダウンロード

パララックス(視差)バックグラウンド画像や、スライダーなど、ランディングページが簡単に魅力的なものになる設定も可能。

 

様々なスタイルの良質な無料テーマを配布しているThemeIsle

「ThemeIlseのテーマは○○な感じです」と一言で言い表せないくらい、いろんなスタイルのテーマを配布しています。ポップなものからエレガントなもの、シンプルなもの、カッチリした感じのものなど、30ほどのテーマがダウンロードできるので自分の好みに合ったテーマを見つけやすそう。

管理画面側のデモも見ることができる(要登録)ので、気になったものは同時に使い勝手を試して見れるのもいい感じ。

無料テーマ配布ページ

 

中でもマテリアルデザインが特徴のHESTIAというテーマが最近のイチ押しのようです。

無料のPage Builderプラグインを使ってドラッグ&ドロップで組み立てられたり、WooCommerceにも対応しているなど、機能面でも充実しているのが魅力。メニューにアイコンが設定できたりメガメニュー対応だったりするところとかも、さりげなく充実しています。

HESTIAのデモ / ダウンロードはこちら

 

個人的にはAmadeusというブログ用テーマがいいなと思っています。モノトーンのシンプルなテーマですが、レイアウトとかちょっとした動きがオリジナリティがあっていいなと。

Amadeusのデモ /  ダウンロードはこちら

 

 

クオリティが保証された有料テーマサイトThemeforest

ちょっとした小規模サイトや個人ブログなら無料テーマで十分ですが、本格的なサイトを面倒なコーディングなしに作りたい場合は有料のテーマを使うのが早道かつ安心です。

ThemeforestのテーマはVisual ComposerやRevolution Sliderといった直感的にコンテンツを配置していけるプラグインとセットになっているものが多いので特におススメ。Visual Composer、Revolution Sliderは最初扱いに慣れるのに数日苦労するかもしれませんが、一度覚えてしまえば、デザイナーやサイト制作者の仕事をかなり楽にしてくれます。

テーマには数多くのデザイン済みのコンポーネント(パーツ)が用意されていますし、動きのあるスライダーやアニメーション、パララックス効果・アニメーションなども取り入れたりして、充実したサイトコンテンツを作っていけます。

ThemeforestのWordpress人気テーマ一覧

WordPressサイト高速化!GTmetrixでA判定までの6つのプロセス【Mixhostサーバ】

前回の記事で書きましたが、このブログの読み込み速度が著しく遅く、(そのせいかどうかは100%さだかではないですが)急にアクセス数が激減する事態を受けて、読み込み速度の改善のためにアレコレとやってみました。

前回の記事:4月18日のGoogle検索アルゴリズム変更からPV数が2/3に激減。アクセスが戻ってくるまでに検討した原因5つ

アクセスが急に減ってから、久々に自分で自分のブログにアクセスしてみたところ、何ともモッサリ…特にスマホからのアクセスは異常に時間がかかるときがあります。

「Mixhostサーバは速いと聞いていたのにいったいどういうことだ!??」とふてくされつつも、今回の作業で最終的にはトップページの読み込みが5秒弱*にまで短縮され、PageSpeed ScoreはA判定になりました。

今回はそれまでの経緯をまとめています。Mixhostを使っている方は参考になれば嬉しいです。

*5秒とみると「遅いじゃん?」と思うかもしれませんが、これはGTmetrixがFully load time、つまりすべての読み込みが完了するまでの時間を計測しているためです。GTmetrixでは平均の読み込み時間が8.5秒なので、平均よりもいいスコアをだしています。試しにSEOチェキでも測ってみましたが、0.464秒という読み込み時間でした。

 

Mixhostをスタンダードプランに変更

まずはここから。もっとも重要な高速化とは適切なサーバースペックを選ぶことだと今回よく分かりました。

さくらレンタルサーバーからMixhostに移転した話を以前の記事に書きましたが、当時は一番安いエコノミープランを申し込んでいました。

当ブログのアクセス数から考えれば十分エコノミーでさばけると思っていたのですが、以前の記事でも「(さくらサーバから移転して)体感的にはもちろん早くなったんですが、なんとなく「ムラがある」のかなぁ…と思ったり。」と書いている通り、表示スピードは期待していたほどの効果がなかったんです。

 

で、今回、Mixhostを使ってブログを運営している人たちの感想とか見てみたんですが、大抵はスタンダードプランを使っているっぽいということに気づきました。「エコノミーじゃやっぱり力不足だったのかも?」ということで、ここは潔くスタンダードプランにアップグレードすることに。

 

Mixhostはこういうアップグレードがすぐにできるのがありがたいですね。申込完了して30分後にはスタンダードプランのスペックになってました。

平均応答時間は、このおかげで即短縮されました。体感的にも早くなりましたし、スマホからアクセスしてみてもずいぶん早くなったなと。

サーバーの応答時間

 

しかしGTmetrixやGoogle Insightsでチェックすると、まだ改善点がありそうな感じ。サーバースペックはこれでOKでも、表示スピードの改善にはもう少しチューニングが必要でした。

 

キャッシュプラグインはLiteSpeed Cacheに

エコノミープランのときに一旦使い始めて、結局W3TotalCacheにしていたものの、スタンダードプランではこのプラグインもきっと大いに力を発揮するだろうということで、キャッシュプラグインはLiteSpeed Cacheに。

LiteSpeed Cacheとは、LiteSpeed Webサーバーで利用できるキャッシュ機能です。
非常に高速かつ高性能で、キャッシュを有効にする事により、導入前と比較して数十倍〜数百倍程度、圧倒的に高速化する事が可能です。
また、サーバーの負荷が低くなる為、アクセス集中時にも安定してご利用いただけるようになります。
LiteSpeed Cacheを利用するには、WordPressプラグインを導入するだけで簡単にご利用いただけます。

 

で、このプラグインの効果ですが、

 

……

あんまり良く分からない…

 

でした(汗)。インストールして有効化するだけでいいので楽なんですが、W3Total Cacheを使っていたときのほうが幅広く色々できたのと、CloudFlareを一緒に使っていたのがよかったのか、体感的なスピードはあまり改善されなかったです。GTmetrixでも幾つかの項目の評価が下がっていました。

 

とはいえ、LiteSpeed Cacheを使えるのに使わないっていうのも何だかもったいない気もするので、キャッシュ系プラグインはこのままで、一旦解除したCloudFlareを再度使うことにしました。

 

CDNとしてCloud Flareを使用

W3TotalCacheを使う場合はそのプラグイン内で設定ができますが、CloudFlare公式のWordpressプラグインというのも実はあります。今回はそれを使うことにしました。

Cloud Flare WordPressプラグイン

 

Cloud Flareを使ったことがない場合は、アカウントの開設、ネームサーバーの変更が必要になります。ここでは割愛しますが、バズ部さんの記事が参考になります。

すぐできる!CloudFlare の設定方法

 

Javascript, CSS, HTMLの圧縮とJavascriptの読み込み高速化

Cloud Flareには、Javascript, CSS, HTMLの圧縮や、Javascriptの読み込みを高速化するRocket Loaderという機能があり、これらもページの表示速度アップに大いに役立ってくれます。

Javascript, CSS, HTMLの圧縮には、Cloud Flareのアカウントの「Speed」メニューから、Auto Minifyの欄でそれぞれチェックを入れておきます。

Cloud Flare Auto Minify

 

Rocket Loaderはまだベータ版のようですが、これを使うとかなりサクサク動く感じがするのでオンにしています。Rocket Loaderがやってくれることは以下の通り。

  • サードパーティによって提供されるJavascriptファイルも含め、ページが読み込むJavascriptファイルをまとめることによってリクエスト回数を減らし、ページのレンダリングが遅れることを防ぐ
  • 非同期でスクリプトを読み込むことにより、ページのロードが遅延するのを防ぐ
  • ほとんどのブラウザやスマートフォンで利用可能なローカルストレージを利用してスクリプトをローカルにキャッシュする

Cloud Flare Rocket Loader

Automaticに設定するとすべてのJavascriptファイルが最適化の対象になりますが、特定のJavascriptファイルを対象から外す設定もできますし、逆に一部のJavascriptだけ最適化してほしい場合はManualで設定することも可能です。詳しくはCloud Flareのアカウント内、「Rocket Loader」欄のHelpからご覧ください。

 

画像の圧縮

Gtmetrix、Google insightsでページをチェックすると、画像に圧縮の余地があると言われてしまうので圧縮プラグインを使って過去に追加したメディアファイルを圧縮しました。

オススメは、WP Smushというプラグインです。

WP Smushプラグイン→ Smush Image Compression and Optimization

インストール後、すでにメディアに存在する画像を一括最適化したい場合は、プラグインの設定画面から、BULK SMUSH NOWボタンをクリックします。フリー版だと50イメージを圧縮するごとに、このボタンをクリックしないといけないのですが、逆にクリックするという手間だけで圧縮してくれるのでこのプラグインが一番いいと思います。このプラグインを使って圧縮したら、GTmetrixでの画像圧縮の項目の評価も高くなりました。

 

有名なEWWW Image Optimizerを以前使っていましたが、WP SMUSHのほうがより圧縮される感じがします。
(有料版の場合はフリー版に比べてさらに2倍圧縮率が高くなるらしいです。)

その他の圧縮プラグインとしては ShortPixel Image Optimizer もよさそうです。ただ、フリー版は月当たりに圧縮できる画像の数がかなり限られているので、既に画像がたくさんアップロードされている場合は、一括圧縮するのに有料版を使う必要がでてきます。

 

SSL化にはプラグインを使わない

Mixhostの目玉といえば、SSL化が超簡単に低コスト(というか追加料金なし)でできることですが、WordpressサイトをSSL化するときはプラグインを使わないほうが、やはりパフォーマンスはよくなります。

MixHostのヘルプで推奨されているプラグインReally Simple SSLは、インストールするだけで強制的にサイト内のURLをhttps://~から始まるように修正してくれるので楽と言えば楽ですが、以下の方法で完全にHTTPS対応させた方がスッキリしますし、余計なプラグインを使わずに済むのでパフォーマンスの面でもベターです。

面倒なのは一回だけ、それも小1時間あればできる作業です。

 

プラグインを使わないSSL化の手順

  1. WordPress管理画面の「設定」>「一般」で、WordPress アドレス とサイトアドレスのURLをhttps:// ~始まるように変更
  2. SearchRegexでコンテンツ内の内部リンクのURLをhttp://からhttps://に変更する
    詳しくは寝ログさんの記事を参考にしてください(見出し5の「内部リンクをSearch Regexで全て置換する」のところです。→  WordPressをhttpからhttpsにSSL化した全手順まとめ(エックスサーバー環境)
  3. ブラウザ(ChromeやFirefox)のデベロッパーツールでエラーが出ているところを見ながら修整をしていく
    → 特に、ウィジェット内、header.php、footer.php、function.php、などでhttpから始まっているURLが残っている可能性があるので、チェック&修整します。

 

PHPはバージョン7以降にすることも忘れずに

これは前から設定済みでしたが、備忘録として念のため。PHPバージョン7以降では表示スピードが改善されているので、まだバージョン5.xを使っている場合は今すぐ7以降にすることをお勧めします。cPanelから変更できます。やり方は以下の公式ガイドを参考に。

→ PHPのバージョン変更(PHP7のご利用方法)

 

高速化チューニングの結果は…

トップページは綺麗にAA判定が出るようになっています。いやぁ何だか気持ちがいいですね。

個々の投稿ページは、そのページのボリュームや表示される広告によって読み込み時間に差が出ますが、それでも以前のモッサリ感はなく、日本から9000kmほど離れたこのセルビアからアクセスしてもそこそこのスピードで表示されるのでまずまずといったところでしょうか。

 

ブログは書いて放置、ではなく、自分でアクセスして使い勝手をチェックしたほうがいいですね。今回のことを教訓に、時々ブログ訪問者の視点で見てみるのを忘れないようにしたいと思った次第です。

 

以上、最後までお読みくださりありがとうございました!

4月18日のGoogle検索アルゴリズム変更からPV数が2/3に激減。アクセスが戻るまでに検討した原因5つ

先月後半(4月17~18日ごろ)のGoogle検索アルゴリズムのアップデートで、急にこのブログのPV数がそれまでの2/3程度にまで落ち込むという事態に陥りました。

しばらくブログを更新していなかったのですが、アクセス数はこれまでわりと安定していて、これほど急激に変動することがなかったので、心の中では結構(いや相当)焦りつつ、原因を探りつつ…、もうアクセスはしばらく戻ってこないかもと半泣きになりながら…という感じでしたが、ありがたいことに5月の始めにはアクセスが戻ってきました。そんなに一生懸命ブログを書いている訳じゃないのに、いざアクセスがこんなに落ち込むと気分も落ち込むものですね。。

特にSearch ConsoleにGoogleからの警告メッセージが届いていたわけではないので、いわゆる「自動ペナルティ」を受けたと考えてよさそうです。

自動ペナルティについてはデジ研さんのサイトの説明が分かりやすかったです。

自動ペナルティの場合はGoogleからのメッセージは届きません。また、Search Consoleの「手動による対策」のページにも表示されないため、確実にペナルティを受けていると判断することができません。

そのため、突然順位が落ちたという際には、アルゴリズムにより自動ペナルティを受けたと考えて、サイトに問題がないか確認するという対応をとったほうがいいでしょう。

 

ということで、ハッキリと「これが原因だった」と100%言えることは何もないのですが、幾つか考えられる原因はありました。最終的には、まず最初に取り掛かった改善策を実施したあとにアクセスが戻ってきたので、それまでの経緯をこの記事に書いておきたいと思います。

 

アクセス激減の原因として考えられたこと

今回アクセスが落ち込んだ原因として考えたことには以下のようなものがありました。

1.コンテンツが低質なものとみなされた
2.昨年10月にブログを統合したあと、統合元のブログのドメインが切れてバックリンクが減った
3.ブログ記事の更新頻度が著しく低い
4.ページの表示スピードが遅い
5.コンテンツに対し広告の数が多すぎた

上記の5つの原因について一つずつ、思っていたことを書いていきます。手っ取り早く、何をやったかが気になっている方は読み飛ばしてください。

 

1.コンテンツが低質なものとみなされた可能性

アクセスが落ち込んだあと、4/18日ごろのGoogleのアップデートの内容はどんなものだったのか、ということを知りたくて色々情報をあたっていました。そんな中、幾つかのブログ記事で「4/17~18の大変動で順位が落ちたサイト・ブログはコンテンツの質が低いと判断された可能性あり」というようなことを目にしたので、ちょっとショックではありましたが、「当ブログもコンテンツが低質なものとみなされてペナルティを受けたのか…?」と思ってはいました。

ただ、コンテンツの質を改善するのは数日、1~2週間で改善できるものではありません。「もし本当に質が問題なのだったら、今後時間をかけて見直していくしかないな」と考え、ひとまずこれについては早急な対策作業から外しました。

 

2.バックリンクが減ったことが原因の可能性

これも気にはなっていました。というのも、昨年10月に二つのブログを現ブログ一本に統合したのですが、それに伴って消えたのは古いほうのドメインで、さほど多くないとはいえ、良質なバックリンクがついていました。

その古いほうのドメインからは、しばらく301リダイレクトで当ブログにアクセスが来るようにはしていたのですが、3月の更新時にバッサリ、ドメインを廃止したため、古いドメインについていたバックリンクの効力(参照アクセス)も途絶えることとなりました。

さほどバックリンクの効力はないと思っていましたが、ちまたでは結局バックリンクはいまだに結構重要という話も見かけますので、なんとなく気になっていた部分ではあります。

 

3.ブログ記事の更新頻度が著しく低い

1か月くらいブログを放置していたし、毎月1~2記事くらいしかアップしていないのがずーっと続いているので。ただ、最近はブログの更新頻度よりも記事の質のほうが重要視されているので、これはアクセス低下の直接的な原因ではないかもとは思いつつ、更新頻度もやっぱり大事なのかもしれないと。

 

4.ページの表示スピードが遅い

本業の忙しさにかまけて自分のブログにアクセスしたり、読み直したり、使い勝手をスマホやタブレットで見てみたり…ということをしばらく怠っていたのですが、今回のことで、自分のブログを色々見ているうちに、気づきました。「表示がかなり遅い。イライラする」と。

Gtmetrixで試しにチェックすると、なんとすべての読み込みが完了するのに20秒以上かかっているページがある…。これはかなり問題。表示速度が遅いと離脱率が上がりますからね。

自分でアクセスして自分でイライラするくらいなので、きっと多くの訪問者さんはかなりイライラされたことでしょう。。。

この表示速度が問題でここまでガクッとアクセスが減るとは思えなかったのですが、ユーザビリティが悪いと判断された可能性は大いにあります。また、表示速度が遅いために離脱率が高くなり、その離脱率の高さが原因で自動ペナルティとなった可能性も考えられます。

 

5.コンテンツに対し広告の数が多すぎたかも

広告の数がコンテンツに対して多すぎるのはよくないですよね。Googleアドセンスの広告の表示数の制限が解除(以前はディスプレイ広告3つ、リンク広告3つまでだった)されて、広告の配置数を少し増やしていたのですが、当ブログは一記事の分量が3000~5000文字くらいのことも多いので、そんなに広告が多すぎるという気は(自分としては)ありませんでしたが、少し気にはなっていました。

また、広告数が増えることで表示速度にも影響がでているとしたら問題だと思い、再検討事項に含めました。

 

 

まず取り掛かった改善策は…

以上のような原因を考えていたのですが、まずは一番手っ取り早く改善できて、自分としても一番気になったことから始めました。それはページの表示速度の改善です。

で、実際にページ表示速度の改善から始めて良かったと思っています。今回アクセスが戻ってくるために必要だったことは、これだけ(ページ表示速度の問題を解決すること)だけでした。Google Analyticsのグラフで見るとこんな感じで、高速化してから比較的すぐにアクセスが戻ってきています。

アクセス減と回復

その他の原因については特に今回は何もせず、コンテンツは一切変えていませんし、アクセスが下がって戻ってくるまで記事も特にアップしていません。バックリンクはそもそも何もしようがないですし。(広告数は減らしていませんが、配置を少々変えました。)

ページの読み込みは速ければ速いほどいいですし、せっかくアクセスしてくれた方々に表示速度が遅くてイライラさせてしまうのは申し訳ないので、今回気づいて良かったと思っています。(それでちゃんとアクセスが戻ってきたから本当に良かったですが(涙!)

 

このブログを高速化するために具体的に何をやったかについては次の記事にまとめたので、特にMixhostを使っている方、Mixhostへの移転を検討している方はよかったら参考にしていただければと思います。

次の記事: WordPressサイト高速化!GTmetrixでA判定までの6つのプロセス【Mixhostサーバ】

 

以上、ダラダラと書いてしまいましたが、お読みくださりありがとうございました!