All posts by Haruparu

Bluehostサイトのアップタイム検証

けっこう多くのホスティング会社は、99.99%以上のアップタイムを謳っています。100%に越したことはありませんが、サーバのメンテナンスやアクシデントのことを考えるとこれくらいが限界でしょうか。

99.99%以上のアップタイムは実際に達成されているのでしょうか。

99.99%アップを達成するには1日当たり0.144分(9秒程度)以下のダウンタイムに抑える必要があります。1ヵ月では大雑把に計算して5分以下、1年間あたりでは1時間程度のダウンタイムです。個人サイトはもちろんちょっとしたビジネスサイトでもこのレベルでの安定性があれば文句ないのではないでしょうか。ちなみに、無料で開ける日本大手のブログなどは、(ほとんど?)毎週のようにメンテのためのダウンタイムがあるようです。

そこで、Bluehostのサーバの安定度を測るために本サイトのアップタイムを記録してみます。サイトをモニターするソフトは、無料・有料含めてたくさんありますが、ここでは「Uptime Robot」を利用します。サインアップが簡単で、ダイレクトメールも来ないのでお勧めです。ちなみに50個のサイトのアップタイムをチェックできます。

2015年の1月16日にスタートして一ヶ月少しの計測の結果は、99.99%となりました。残念ながら100%でないのは、2月6日に記録された3分間のダウンタイムのためです。これからもなるべく定期的にアップタイムのログをチェックしていきましょう。個人的には99.99%をキープしてくれれば言うことはないのですが、今後どうなるでしょうか。
uptime feb 2015

WordPress お勧めのレスポンシブテーマ5選

レスポンシブテーマとは、サイトの幅やサイドバーの移動などが画面の大きさに合わせて自動的に対応するもので、サイトがどのようなサイズのデバイスでもきれいに見えるようになります。近年、タブレットやスマホの利用者が多くなっているので、サイトの作りをレスポンシブなものにしておいた方がユーザビィティーが高くなります。

最近では多くのテーマがレスポンシブなものになっています。WordPressのテーマセクションで「responsive」と打ち込むと数え切れない数のテーマがヒットします。ここでは、有名どころ・信頼のおけるテーマの作者・機能の充実・使いやすさ、などの観点から、5つのテーマを取り上げます。それぞれに作りが異なるので、いろいろなサイトのタイプにマッチすると思います。

Twentyfourteen
Twenty Fourteen
Twenty Fourteen

いわゆる、WordPressのオフィシャルテーマで、WordPressをインストールすると自動的に付いてきます。最新のオフィシャルテーマは2014年12月に登場した「Twentyfifteen」で、デフォルトを見る限りではブログ志向のテーマに見えます。「Twentyfourteen」はひとつ前のオフィシャルテーマで、ブログとしての利用はもちろん固定ページがかなりあるようなサイトにもうまく適用できる作りになっています。かなり大規模なカスタマイズが比較的簡単にできるのが魅力のひとつでしょう。とくに、プラグイン「Fourteen Colors」・「Styles: TwentyFourteen」・「Fourteen Extended」を使うと、WordPressのダッシュボードからカスタマイズできる範囲も広がります。ちなみにこのサイトも「Twentyfourteen」がベースになっています。「Twentyfourteen」には、数多くのユーザーがいるので、WordPressでのサポートフォーラムに参考になるQ&Aがたくさんありますし、カスタマイズのやり方を載せたサイトも豊富です。というわけで、迷ったら「Twentyfourteen」を選んで、好きなようにカスタマイズするのが早道かもしれません。

Syntax
Syntax: メニューを閉じた状態
Syntax: メニューを閉じた状態
Syntax: メニューと開いた状態
Syntax: メニューを開いた状態

「Syntax」はAutomatticによるテーマで、「準オフィシャル」といってよい信頼性があります。シンプルな作りで、あれもこれも詰め込むというのではなく、コンテンツを中心に展開したいサイトにぴったりです。ページリストその他は、ページ左にアコーディオン式に格納され、クリックで右に広がります。Automatticはこのほかにも数多くのレスポンシブテーマをリリースしているのでそれらもチェックしてみましょう。

Responsive

「Responsive」はダウンロードの数でトップ10に入っている(2015年1月現在)人気のテーマです。ウィジェットボックスがうまく配置されたトップページが魅力のひとつです。どのウィジェットをどこに配置するかによってテキスト中心にしたり、画像・動画中心にしたりと簡単にデザインを変えられます。サイトを見るデバイスの画面の大きさによって、ウィジェットボックスも横配置・縦配置と変化します。作者のCyberchimpsは、「Responsive」と似通ったテーマをほかにも公開しているので、このタイプのトップページが好みの方はそれらもご覧ください。

Customizr
Customizr
Customizr

「Customizr」は、「カスタマイザ」という名の通り、テーマのデザインを簡単にいじれるようになっています。WordPressのダッシュボードからカスタマイズできる範囲は群を抜いています。HTMLやCSSになじみのない人でもあっというまにサイトを好みの仕立てに変えられるのが人気の秘密でしょう。このテーマは、オフィシャルの「Twentyfifteen」系のテーマを別にすると、ダウンロードの数が一番という超人気です。しかも、WordPressサイトのページでもユーザーのフィードバックが非常に高くなっています。時間をかけずに手早くオリジナルサイトを作るなら外せないテーマです。

Virtue
Virtue
Virtue

このテーマの人気の理由は、WordPressプラグイン「WooCommerce」との相性とが抜群な点、また作者のデモページからわかるように画像をふんだんに使ったトップページが簡単に作れるという点でしょうか。「Customizr」の作者と同様、「Virtue」の作者もこのテーマ一本に絞って多くのユーザーを獲得しているようです。(両者とも、更なる機能を付加した「Pro」バージョンを販売。) ダウンロードもトップ10なら、ユーザーの評価も非常に高いテーマです。画像を多く使ったメインコンテンツを中心に持ってきて、そのほかの要素はフッターにある4つのウィジェットエリアにまとめて配置することで、すっきりとしたデザインになっています。

「@import」を使わないWordPress子テーマの正しい作り方

WordPressをインストールしたら、まずChild Theme(子テーマ)を設置しましょう。テーマに全く変更を加えないで使うという人には必要ありませんが、自分の好みにカスタマイズしたい人にとっては必須といえます。というのも、テーマのファイルに直接手を加えていると、テーマがアップデートされるときに変更点が新しいバージョンで上書きされるため、サイトのデザインや機能の変更点がすべて消されてしまうからです。

一方で、子テーマを設置すると、親テーマのファイルに手をつけることなくサイトのデザイン・機能を変更できます。そのため、親テーマがアップデートされても、それと独立している子テーマは上書きされず、カスタマイズはすべて保持されます。

@importを使うとサイトのパフォーマンスが低下

ここでは、「正しい」子テーマの作り方を説明します。多くのサイトで「@import」を使って子テーマのスタイルシートを作るやり方が説明されていますが、これは推奨されているやり方ではありません。WordPressサイトでは「this is no longer best practice」と書かれています。このページでは、@importを使ってスタイルシートをインポートする解説に気をつけることが繰り返し呼びかけられており、wp_enqueue_script()を使った方法が薦められています。(Be aware that some of these resources recommend using @import from your child theme’s stylesheet as the method of importing the parent theme stylesheet. Please use the wp_enqueue_script() method described above.) 困ったことに、日本語訳ページでは2015年1月現在でも、この「@import」のやり方が載っています。気をつけましょう。

ここから順を追って説明します。やり方がわかってしまえば10分以内にできてしまうようなシンプルな作業です。

1) 「style.css」と「functions.php」ファイルの作成

自分のコンピューターでテキストエディタ(例えば、テラパッドNotepad++)を使ってファイルを作ってからサーバにアップロードする方法と、サーバにあるWPのフォルダ内にファイルに直接作成する方法との2通りがあります。

まずは、style.cssファイルを作成します。

style.cssファイルの初めに書く内容

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

いろいろと記述がありますが、必須なのは黄緑にハイライトされている2行だけで、ほかのラインはなくてもかまいません。というわけで、シンプルなバージョンは下のようになります。

style.cssファイルの初めに書く内容 (シンプルバージョン)

/*
Theme Name: Twenty Fifteen Child
Template: twentyfifteen
*/

「Template」に書く親テーマのディレクトリ名は大文字・小文字にも注意します。この記述によってこのファイルが「子テーマ」と認識されます。これでCSSファイルの編集は終わりです。くれぐれも、このあとに「@import」を使わないようにしましょう。サイトの読み込みスピードが低下するとされています。

次に、「functions.php」ファイルの作成です。以下の内容を書くことで、親テーマのCSSが子テーマに反映されるようになります。(子テーマのCSSに手を加えることで該当部分が親テーマのCSSより優先されます。)

functions.phpファイルに書く内容

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

2) 子テーマフォルダの設置

WordPressのフォルダ構成を上から「wp-content」 → 「themes」 とたどると、デフォルトでインストールされているいくつかのテーマのファイル見つかると思います。「twentyfifteen」や「twentyfourteen」などですね。もちろん使いたい親テーマもここに並んでいるはずです。

ここで、子テーマフォルダの設置です。名前にはフォーマットがあるので、好き勝手なフォルダ名にはできません。「親テーマの名前-child」というのが子テーマのフォルダ名になります。親テーマの名前をそのままコピペして、その後ろに「-child (半角英数のハイフンとchild)」を加えます。

3) 「style.css」・「functions.php」ファイルを子テーマフォルダに設置

最後に、「style.css」と「functions.php」の2つのファイルを子テーマフォルダの中に設置します。ここでは、Bluehostの管理画面を例にとって見てみます。おそらくどのサーバでも似たようなつくりでしょう。

Bluehostのコントロールパネル
Bluehostのコントロールパネル

ページ上の方にある「File Management」カテゴリーにある「File Manager」を選びます。

File Managerのキャプチャー画面: いくつかのテーマとともに子テーマが設置されています。
File Managerのキャプチャー画面: いくつかのテーマとともに子テーマが設置されています。

「wp-content」 → 「themes」 とたどった階層です。ここにフォルダを作成するのは、画面上のアイコン一覧から感覚的にできると思います。

子テーマのフォルダ内に設置された「style.css」と「functions.php」ファイル
子テーマのフォルダ内に設置された「style.css」と「functions.php」ファイル

子テーマのフォルダ内にはいったら、作っておいた2つのファイルをアップロードします。もしくは、テキストエディタであらかじめ編集する代わりに、このフォルダの上にあるアイコン一覧からファイルを作って(New File) それを編集(Edit)する、というやり方でも簡単です。

4) WordPressで子テーマを選ぶ

WordPressのダッシュボードからテーマのセクションに行きます。ここまでのステップが正しく行われていれば、ほかのテーマと並んで子テーマも見つかるはずです。子テーマを有効化すればすべての工程が終了です。自分のサイトに行ってみると、親サイトを変わらないものが表示されているはずです。あとは、CSSのファイルに手を加えることで、親テーマのアップデートを気にすることなく自分の好みにサイトをカスタマイズしていけます。

WordPressテーマを選ぶときのポイント

WordPressをインストールしてから多くの人がすることは、お気に入りのテーマを選ぶことだと思います。選ぶときの基準になるポイントをいくつか挙げてみましょう。多くのすばらしいWPのテーマが無料で使えます。選びきれないほどの無料テーマがありますので、特別な理由がない限り有料のものを選ぶ理由はないでしょう。WordPressのページのテーマセクションでいろいろと見てみましょう。

色・画像に惑わされない

テーマの第一印象は、色や画像に大きく左右されるとおもいます。バックグラウンドや罫線の色、メニューバーの枠のデザインなどです。フィーリングで決めるのもひとつですが、色や画像というのは変更するのがとても簡単ということも頭においておきましょう。第一印象でテーマの候補を絞ってしまうのはもったいないのです。逆に、ページの全体的なデザインが好みならカラーデザインをいじることを前提に選んでもいいわけです。
wp themes

ページメニューの位置

ブログエントリーのタイトルは、どのテーマでもたいていサイドバーに置かれます。エントリーのタイトルをサイドバーに上から順に表示するのは、ページトップに横並びで表示させるよりもスペース的にもすっきりするからでしょう。

いっぽうで、ページメニューの位置はテーマによってさまざまです。WPをブログとして使う方は、ページの数自体が少ないので、ページメニューの位置をあまり気にする必要はありませんが、ブログというよりもいわゆる「ウェブサイト」を作るケースでは、ページメニューの位置は大事になってきます。ページトップに横並びにさせるのか右・左のサイドバーに置くのか、あるいはフッターに位置させるのかという選択です。

CSSの変更だけでカスタマイズできると簡単

ぶっちゃけていえば、WPのダッシュボードからテーマのファイルをいじることで、メニューの位置を好きなように変えることは難しくありません。phpファイルに手を加えるとはいっても、変更するのは基本的にHTMLだけです。CSS(スタイルシート)の変更も必要になりますが、これはバックグランドの変更などと原則は同じです。とはいっても、慣れていないうちは時間もかかるでしょうし、子テーマ(Child theme)を使わずにテーマファイルに変更を加えると、テーマのアップデートがあったときにカスタマイズした内容が上書きされてしまうという不都合も出てきます。というわけで、変更をしなくてもいいテーマを選んでおくのが手っ取り早いのです。

理想のデザインだけど、ページメニューが好みの位置にないというケースでは、そのテーマが「ウィジェット」に対応しているかチェックしてみましょう。例えば、サイドバーがウィジェット対応であれば、そこにページメニューをもっていくことが簡単にできます。

テーマの作り方・作者は?

テーマがいつ作られたのか、あるいはいつ最後にアップデートされたのかもチェックしておきましょう。古いものが即だめということでは全くありませんが、WP自体の新しいバージョンアップに対応できるテーマであったほうが良いからです。とりあえず一番手を加えるのはCSS(スタイルシート)だと思うので、このファイルがどのように書かれているか簡単にチェックして見ましょう。いくつかのテーマを比べてみると、見難い書き方をしているものとすっきりしているものとの違いが判ると思います。

クオリティーやアップデートの可能性という点からみれば、WordPressオフィシャルテーマを使うのが安心です。多くのユーザーがいるので使い方のWordPressサイトでのQ&Sの数が多いですし、いわゆるハウツーの解説ページも多く、バグの修復などもすばやくされます。カスタマイズがWPダッシュボードから簡単にできるようになってきており、カスタマイズの幅も広いので、デフォルトとは全く異なるものが簡単にできます。ちなみこのサイトは「Twentyfourteen」というオフィシャルテーマを使っています。デフォルトとはかなり違っているのが判ると思います。

私の中で「準オフィシャル」の位置づけをしているAutomatticによるテーマもお勧めです。2105年1月現在で60個ほどのテーマが公開されているのでチェックしてみましょう。

Twenty Fourteen
WordPressオフィシャルテーマ: Twenty Fourteen
レスポンシブなテーマ

いわゆるレスポンシブなテーマを選ぶことをお勧めします。WordPressのページのテーマセクションで「responsive」と打ち込むとかなりのテーマがでてきます。これは、タブレットやスマホなど小さな画面にサイトが自動的に幅を伸縮させて対応するもので、ユーザビィティーが格段に向上します。

まずはインストールしていじってみよう

ここまで書いてきた意外にも、おそらくいろいろなチェックポイントがあるとは思います。テーマはいったんインストールして実際に作りを見てみないとわからないことも多くあるのでまずはWPダッシュボードから候補のテーマをどんどん試して見ましょう。いろいろといじっているうちにいろいろな発見があると思います。

レンタルサーバの伸び率 (2009年4月 – 2015年1月)

このサイトで取り上げいるいくつかのサーバがここ数年の間にどれくらいカスタマーを増やしているかを見てみましょう。それぞれのサーバが管理しているドメインの数はもちろん、カスタマーの数とは同一ではありませんが、ホスティングサービスの規模を示す指標になります。下の表では、Webhosting.infoから得られた2009年4月のデータと2015年1月のデータを比べています。

2009年4月 2015年1月 伸び率 伸び実数
Bluehost(ブルーホスト) 711,327 2,042,663 ⇧187% 133万
Hostmonster(ホストモンスター) 506,903 589,294 ⇧16% 8万
Hostgator(ホストゲーター) 617,810 2,069,727 ⇧235% 145万
Fatcow(ファットカウ) 62,667 245,596 ⇧292% 18万
Value-Domain(バリュードメイン、日本) 192,354 434,576 ⇧126% 24万
Lolipop(ロリポップ、日本) 148,184 330,501 ⇧123% 18万

最近の6年間で、どのサーバも規模を拡大してきているのがわかりますね。日本の大手2つのサーバとも元気があります。一方でBluehost、Hostgator、Fatcowの3つのサーバの伸び率はものすごいものがあります。このなかでHostmonsterの伸びが鈍いのはちょっと謎です。というのも、BluehostとHostmonsterは名前が違うだけの姉妹会社で、違いといえばサイトのデザインぐらいのものだからです。

伸びの実数を見てみると、抜きん出ているのはBluehostとHostgatorの2社です。このような大きな伸びがどこまで続いていくのか興味深いですね。

ユーザーの立場から言わせてもらえば、ホスティングサービスの大衆化が進むにつれて、ホスティング業界全体として費用も下がってくれるとうれしいのですが。。。さて5年・10年後にどうなっていくのでしょうか。

レンタルサーバのマーケットシェア (2015年1月)

世界でナンバーワンのシェアを誇るのはどのサーバ? 各国内で一番のシェアを閉めているのはどのサービス? Webhosting.infoからのデータで人気サーバの規模・マーケットシェアを見てみましょう。

世界中でナンバーワンはリセラーホスティングの「WildWestDomains.com」で、マーケットシェアは27%を超えています。2位以下のサーバがすべて3%以下ということからもダントツぶりが分かります。WildWestDomains.comの下では、リセラーの会社・個人が違うブランド名でホスティングサービスを展開しているのでWildWestDomainsとい名前自体はあまり知られていないかもしれません。ちなみに5年前は約22%のマーケットシェアでした。

50位までの多くがアメリカのサーバで、中国、ドイツ、カナダ、フランスのサーバもランクインしています。当サイトで取り上げているものの中では、リセラーサービスも展開しているHostgatorが5位で1.5%強のシェアです (5年前の0.9%弱からの伸びで同11位からアップ)。Bluehostが6位でこれも約1.5%のシェアです (5年前は0.9%弱で同12位)。Hostmonsterは0.4%弱で34位 (5年前は0.5%強で同21位)となっています。ドメイン登録の絶対数で見ると、Bluehostで204万というサイズです。

global-market-share-2015-Jan

一方で、日本国内の状況はどうでしょうか。日本国内のトップはValue-Domainで、国内の14%程度のシェアです。2位はDNSで11%ほど、Lolipopは約10%で4位となっています。ドメイン登録の絶対数では、トップのvalue-domainがおよそ43万ですので、海外の巨大サーバに比べるとやや小さな規模です。日本のサーバが将来的に国際的なサービスを展開して成長するということはあるのでしょうか。

JP-market-share-2015-Jan

サイトのメンテナンスや構築中に使うプラグイン

WordPressを使ったサイトを作成中やリニューアルの際など一時的に、サイトのコンテンツへアクセスできなくすることができるプラグインです。WorPressのプラグインサーチでは「maintenance」などと打ち込めば類似のものが出てきます。

人気のあるものをリストアップすると:

Easy Pie Maintenance Mode
Coming Soon Page
WP Maintenance Mode
Coming Soon / Maintenance mode Ready!
Ultimate Coming Soon Page (サイト復旧をメールで通知する機能あり。)

どれも使い方は基本的に同じです。流れとしては、1) インストールしたらプラグインを有効化、2) WordPressのダッシュボードからメンテナンスモードをオンにする、3) 並行して表示させたいデザインの選択・一時的なメンテナンス画面へ表示したい内容の作成、というステップです。

下の画像は、Easy Pie Maintenance Modeの管理画面です。

Easy Pie Maintenance Modeの管理画面