サイトデザイン変更。変更後テーマSimplicity2の素晴らしい点



-- 広告 --

 

本サイト『こじんたび』のサイトデザインを変更しました。

見た目はそれほど変わっていないかもしれませんが、いろいろ大変でした・・・

せっかくなので?変更の経緯と変更内容について紹介します。

本サイトについて

まず本サイトについてですが、WordPress(ワードプレス)というウェブサイト作成ソフトウエアを使用して作成しています。

無料ブログではなくサーバーをレンタルし、独自ドメインを取得しました。なお、僕が契約しているのは次の通りです。

  レンタルサーバー ⇒ ロリポップ(公式サイト)
  独自ドメイン   ⇒ ムームードメイン(公式サイト) 

無料ブログを利用せず、お金を払ってまでサーバーとドメインにお金を払ったのは、自由度が段違いなため。無料ブログが自宅住まいとすると、WordPressは一人暮らしです。

何をやっても自由、というのは最高に気持ちいいです。

 

-- 広告 --


デザイン変更のキッカケ

いままでもデザイン自体は満足していましたが、少し問題点がありました。それは、

  スマホで見るとデザインが崩れる

ということ。今後は更にスマホからの閲覧が増えることが予想されるだけに、デザインが崩れるのは致命的です。

WordPressには『テーマ』という名のテンプレートみたいなものが用意されています。

僕が今まで使用していた『Tiny Framework』は、スマホに対応していると説明書きには表記されていましたが、端末の解像度が低すぎると正常に表示されないようでした。

僕はノートパソコン&8型タブレットという構成です。スマホでの確認がしづらい状態だったこともあり、どの程度ズレがあったのかを把握しきれていませんでした。

しかし、知人よりデザインのズレを指摘されたこともあり、SEO(検索エンジン最適化)では今後スマホ対応が重要であるらしいので、思い切って変更することにしました。

 

テーマを変更

てっとり早くスマホ対応するにはテーマを変更するのが簡単かつ最短。

いろいろ調べた結果、Simplicity2を導入することにしました。Simplicity2はWordPress公式テーマではありませんが、公式サイトからダウンロードしたzipファイルを取り込むだけなので簡単です。

Simplicity
内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

 

-- 広告 --


Simplicity2は素晴らしい

以前使用していたテーマTiny Frameworkと比べると雲泥の差で素晴らしいです。

※以後は専門用語が多めです

素晴らしいポイント1 日本語対応されている

Tiny Frameworkは外国人が作成していることもあり、内容説明は全て英語。

英語が苦手なので、分からないことがあっても調べるのにとても時間がかかりました。

Simplicity2は製作者が日本人なので疑問点があってもすぐに調べることができます。

素晴らしいポイント2 子テーマの作成が簡単

恥ずかしながらTiny Frameworkでは子テーマを作成していませんでした。

最初”子テーマ”の存在を知らず、しばらくたって子テーマを知ってから作成しようとしたのですが、面倒そうだったので後回しにしていました。

テーマ変更と合わせて小テーマを作成したのですが、とても簡単!

Zipファイルを指定して取り込むだけでOKでした。

素晴らしいポイント3 標準で用意されている機能が豊富

テーマによって事前に用意されている機能が異なります。

Simplicity2は標準機能がとっても豊富。通常ならプラグインで追加する次の機能が標準で用意されています。

  • WEBフォント
  • SNSボタン
  • TOPへ戻るボタン
  • 広告貼付け
  • ブログカード
  • パンくずリスト

これにより、使用プラグインの数をかなり減らせました。

プラグインが減らせるということは、ページ速度と脆弱性の面でメリットがあります。

素晴らしいポイント4 使用している人が多い

分からないことがあって、調べるためネット検索してもTiny Frameworkについては情報が得られませんでした。

それに対し、Simplicity2は使用者が多いだけあって、欲しい情報がすぐに見つかります。cssファイルやphpファイルの修正が必要な場合でも、コピー&ペーストでOKなので楽です。

素晴らしいポイント5 解像度に応じた4つのスタイルが搭載

サイトを見る環境として、おもにスマホ、タブレット、パソコンがあります。さらに機種によって大きさが異なるため解像度が異なります。

解像度によって、レイアウトを自動的に変更することをレスポンシブデザインと言いますが、Tiny Frameworkはデザインが2種類しか用意されていませんでした。このため低解像度の端末の場合、正常に表示されませんでした。

これに対し、Simplicity2はレスポンシブルデザインが4種類用意されているので、正しく表示されやすいです。

その他の修正点

テーマを変更した以外にも、次のような変更を加えています。

  • 内部リンクのブログカード化(メンテナンスの手間減少)
  • 不要プラグイン廃止(Simplicity2に標準装備されている機能廃止)
  • テーマ変更による表示ズレ修正
  • 黄色アンダーラインマーカー使用
  • Webフォント導入

Webフォントは画面表示速度に悪影響が出ると言われているので、もしかしたら止めるかもしれません。

-- 広告 --


WordPressでサイト作成する時のおすすめ

WordPressサイトを作りたい場合、レンタルサーバーはロリポップがおすすめ。

面倒なWordpressの設定も、ボタンを押すだけで終わります。

ご利用形態に応じてさまざまなプランがありますので、お得にサイト運営ができますよ。

 

さいごに

実はとあるサイトコンテストの部門賞を受賞したので、このタイミングで修正するか迷っていました。

A8netサイトコンテスト2017で旅行部門3位を受賞しました!
なんと・・・ A8.netが開催するサイトコンテストで部門賞を受賞しました! まさか・・・といった気分です。 今回は受賞した時の流れと、サイト作成時に心がけた事をまとめました。 【追 記】 2018/04/05  表彰状&景品の画像を追加し...

 

しかし低解像度端末での見え方がイマイチなので、ご覧になっている方がそれほど多くないうちに修正することにしました。デザイン修正はこれで完了ではなく、今後もちょっとずつ行っていきます。

この修正により、少しでもご覧になる方が快適に見ていただければと思います。

 

 

-- 広告 --