【WordPress】テンプレートを駆使してオリジナリティを出す/テーマを「Gush」に変更しました

   2014/12/02

wordpress

WordPressでブログを書いています

 サイトについて書いた記事が今までありませんでしたが、このブログは「Wordpress」を利用しています。

WordPressワードプレスとは

WordPress (ワードプレス) は、オープンソースのブログ/CMS プラットフォームです。セマンティック Web、コードやデザインの美しさ、Web 標準、ユーザビリティなどを意識して開発されており、無料でダウンロードして使うことができます。

ー WordPress日本語 公式サイト

WordPressについて

 Wordpressは自分でサーバーをレンタルしたりして、オンライン上にWordpressプログラムをアップロード(インストール)することで利用できるWebシステムです。無料のレンタルブログとは少し異なり、色々自分で操作する必要があり、多少ややこしいのですがその分自由度が高いことが特徴です。

 サイトのデザインなどを一から構築することも出来ますし、そのつくりかた次第でブログとしてはもちろん、普通のウェブサイトとしても、ショップとして利用することも、なんでも可能です。

WordPressテーマについて

 Wordpressは誰かが作ってくれたテーマのテンプレートを用いることでその見た目を変化させることが可能です。そのため自分で1から作ることができなくても問題ありません。

テンプレートを使ってオリジナリティを出す

 Wordpressのテンプレートは無数に存在しており、様々なコンセプトやデザインを持って作成されています。自分のサイトの個性を出すために最も重要な要素となるのはやはり「見た目」。訪問者はまずはWebサイトの見た目からどんなサイトかを判断します。

 ブログは内容で勝負!と意気込んでいてもあまりに見辛かったり、重かったりと見た目が伴わなければ見てもらえないかもしれないですし、あるいは見た目がかっこ良ければ内容が伴わなくても見てくれるかも・・。

 とネガティブなことを書いてしまいましたが、ともかくサイトの見た目は「オリジナリティ」の見せ場です。Wordpressの利用者はごまんといますが、その中から自分のサイトを差別化するためにはやはり最重要な要素は「テンプレート」と言うことです。

テンプレートをカスタマイズしてオリジナリティを出す

 Wordpressのテンプレートは制作者さまが提供(有料/無料)してくださった物を利用するか、自分で作成します。配布された物を利用する場合は、当然ですが同じテンプレートが「かぶって」しまえば「見た目が同じ」になります。

 そこで、配布されたテンプレートをもとにサイトの見た目をカスタマイズすることでオリジナリティをだします。ではどういった項目をカスタマイズするのでしょうか。

WordPressテンプレートのカスタマイズの例

  • サイトのロゴを独自のロゴに変更する
  • ヘッダー(サイトの一番上)の画像を変更
  • 背景の画像を変える
  • 見出しのデザインを変更してみる

 Wordpressはオープンソースなので全てを自分でカスタマイズ可能です。色々細かい部分を操作するには知識が必要(PHPやCSSコードなど)ですが、とりあえず上記の項目であればそれほど知識が必要ではないので、簡単に「オリジナリティ」を発揮するためにカスタマイズしてみると良いかもしれません。

私のWordpressテンプレートについて

「mesocolumn」を使っていました

wordpress

私は、以前上の画像の通り、「mesocolumn」と言うテンプレートを使用していました。非常に見やすく、また簡単にカスタマイズもできるし、注目してほしい記事を「スライダー」としてメイン画面に表示できるので気に入っていました。

 このテンプレートは横幅が広く、写真をたくさん掲載すると言った私のサイトのコンテンツに適していました。しかし、とある問題にぶちあたることになります。それはサイトの表示が遅くなると言うもの。

サイトの表示の速度が異常に遅くなった

ただでさえ私のサイトのコンテンツ(ツーリングの写真など)的に重量級サイズの画像が多数あったりするわけですが、それも相まってかサイトの表示が極端に遅くなってしまったのです。これはテンプレートのせいだけではなく私の利用方法やカスタマイズ方法、また使用しているプラグインなどにも問題があったと思います。

どのくらい遅くなったかと言うと、最悪の時期には表示するまでに10秒以上かかりました。私は徐々に自分で自分のサイトを開くのにもイラダチを感じるようになりました。ただ、テーマが問題なのかプラグインが問題なのか、それともサーバーが問題なのか原因も特定できず、色々解決策を探して試してみましたが中々良くなりませんでした。

 そんなとき考えついたのが「テンプレートを軽い物にしてしまう」ということ。

超軽量テーマ「Gush」との出会い

 軽いテンプレートを検索していると、いくつか話題として盛り上がっている人気テーマが存在していました。

軽くて無料なWordpressテンプレート

  • stingerシリーズ
  • Simplicity
  • Gushシリーズ

 これらのテンプレートは、軽くて無料でカスタマイズ性にすぐれ、またSEO対策(サーチエンジンの上位に食い込むための構造/訪問者を増やす)、レスポンシブ(スマートフォン等画面サイズが異なっても対応)と言うことで、利用者が急増中のようです。
 そこで私も「軽さ」に魅かれてこのビッグウェーブに乗ってみることにしました。

 この3つのテンプレートの中で、私は「Gush」を使うことにしました(Gush2ではなく無印のほうです)。理由は3つの中でも特にシンプルで、カスタマイズがしやすそうだったためです。

「Gush」について

圧倒的にカスタマイズしやすいシンプルなWordPress無料レスポンシブテーマ「Gush」

「Gush」の中身は極限までシンプルです。おそらく、拍子抜けするんじゃないかというぐらい何も複雑な設定をしていません。
(中略)
 「Gush」は未完成であり、これから一人ひとりが完成させていくテーマといえます。

ー Gushテーマ配布ページ

 正直CSSもHTMLもPHPもあまり理解していなかったので、このテーマを使って少しずつ勉強したいと言う重いもありました。何より魅力的だったのはやはり「軽さ」。今まで使用していたどのテーマよりも軽く、速い!

「Gush」をベースにテーマをカスタマイズ

 「Gush」は単に軽い、シンプルと言うだけでなくブログの見やすさなども工夫されています。そんなGushを自分なりにカスタマイズしてみました。カスタマイズ前の標準の「Gush」はこんな感じ(下写真)。

wordpress
 カスタマイズ後がこちら
wordpress

 うーん、こうやってみるとなんか微妙ですが、まあおいおい考えて行きます。

 カスタマイズ箇所としては先に上げた項目全般(ヘッダやロゴなど)と、サムネイルの表示サイズやアーカイブや見出し、サイドバーなどです。少しはオリジナリティが出ていると良いんですが。

「Gush」テーマの実際の読み込み(表示)速度

 他にもサイトを軽くするために画像のサイズを軽くするプラグインやキャッシュ系プラグインの導入など様々な努力を行った結果、だいぶ軽くなりました。それでもまだ読み込みが遅いときがあるので、サーバーの問題かもしれません。

速度計測ブラウザツールを使って比べてみた

 サイトの表示が「重い」とか「遅い」とか言っても、結局体感じゃないの?と言うことで具体的に数値化で確認してみましょう。

GTmetrixを使ってサイト読み込み速度を計測

 GTmetrixというサイトの表示速度を計測して数値化してくれるブラウザツールを使ってみました。赤でかこった箇所が注目すべき項目です。

テーマ変更前/約10秒wordpress

テーマ変更後/約5秒
wordpress

 このように表示速度は有意的に約半分に改善しています。ほぼ同時間帯に何度か行った平均的な値です。プラグイン等は全く同じ条件にしてあります。

 また、データの転送料や処理の数も圧倒的に少ないことからも「Gush」がいかにシンプルであるかが伺えます。

 このようにテーマテンプレートを変更するだけでWordpressで作成したサイトの表示は劇的に変化することが確認できました。

まとめ/スペシャリティを出すのは内容だ!

 さて、ここまでオリジナリティを出すためにサイトのデザイン(見た目)を良くするべきだと述べてきました。しかしやはり重要なのは「内容」です。そのための前提条件として、サイトにオリジナル性を持たせておきましょう。自分だけのサイトが出来たらサイトをもっと「スペシャル」な物にするために、自分らしい自分のコンテンツの記事(ページ)でサイトを満たしましょう。それこそがオリジナルでスペシャルなサイトを作るための方法です。
 私もがんばります!

 こういった経緯で表示速度の速いテンプレートである「Gush」にテーマを変更し、カスタマイズを行ったと言うわけです。また別記事でどのようなカスタマイズを行ったか簡単に紹介できればと思います。

 「Gush」制作者さま並びにそのカスタマイズをご紹介しているサイトさまに感謝です。

GushかStingerか結構迷っていて、実は今でもまだ迷っているんですが、ちょっとカスタマイズしたらGushに愛着湧いちゃったのでしばらくこれで行くつもりです


  • このエントリーをはてなブックマークに追加
  • Pocket