2013年03月13日(水)

Elmastudioのレスポンシブ対応ワードプレステーマ「Tatami」を買ってみた

ここ数ヶ月の間にワードプレスで運営中のブログをレスポンシブに対応したテーマに順次変更しているんですが、この試行錯誤も新しいものにしてみました。
無料のテーマから大手販売サイトのThemeForestElegant ThemesMojo Themesなどを見つつ決めたのがこちら「Tatami」というテーマ。
リンク先の「Live Demo ansehen」に進むとテーマのライブデモが見れます。

一見シンプルな3カラムのデザインですが、アクセスしているデバイスやブラウザの横幅にあわせてクールに変化してくれます。
Tatami プレミアムワードプレステーマ

こちらが横幅狭めのPC向けデザイン。2カラムになります。
Tatami PC向けレイアウト

こちらがタブレット向け。1カラム。
Tatami タブレット向けレイアウト

スマートフォン向けです。
Tatami スマートフォン向けレイアウト

このテーマを販売しているのはElmastudioというドイツのサイト。
公開されているテーマはどれも淡い色使いのシンプルデザインで、すべてレスポンシブに対応したレイアウトになってます。
一般的なワードプレステーマの相場が4000~8000円くらいでしょうか、そんな中ここのテーマは12ユーロ約1500円(記事を書いている時点)と、とても良心的な価格なのも嬉しいところです。

サイト内で無料配布されている「Yoko」や「Ari」は日本のサイトでも「無料で使えるレスポンシブデザインのテーマ」としてよく紹介されている人気テーマなので、この記事をご覧下さっている方の中でご存知の方もいらっしゃるかもしれません。

以下に手順とテーマの設定をまとめました。

テーマの購入について
Elmastudio公式サイトからテーマを選びます。
左メニューに一覧になっています。
Theme Bundleはテーマをまとめ買いする場合に選択します。安く購入できます。
Elmastudioのワードプレステーマ一覧

Tatamiの購入画面です。
販売価格は12€(ユーロ)で「inkl. 19% MwSt.」は付加価値税(VAT)を含んでいるという意味です。
消費税みたいなものとお考え下さい。

Elmastudioのテーマを購入

Warenkorb
カートの中身を見ます。
In den Warenkorb
このテーマをカートに入れます。
Live Demo ansehen
実際に動作を確認できるデモを見れます。
Theme Features
テーマの特徴などが説明されています。

Warenkorb、カートの画面です。
「Weiter Einkaufen Produkte wurden erfolgreich zum Warenkorb hinzugefügt.」は「商品がカートに追加されました」という意味です。
Elmastudioのショッピングカート

Weiter Einkaufen
カートから離れてショッピングを続けます。
Gesamtbetrag
合計金額です。
Warenkorb aktualisieren
カートを更新します。他の画面で商品追加した場合などはこのボタンで反映されます。
Zur Kasse gehen
支払い画面に進みます。

支払い画面になりました。
以下の住所の人物が購入するとして説明します。

〒160-0022
東京都新宿区新宿1-23-45 サンプル205号室
畳太郎(たたみたろう)
メールアドレス:tarotatami@example.com

請求書は来ないので住所を入力しなくても必須項目の「氏名」「国」「メールアドレス」だけで購入できますが一応入力してみました。
入力したメールアドレスにテーマのダウンロード用URLが届くので、入力間違いのないように注意します。

注文画面

Rechnungsadresse
請求書送り先。画像のような形式で自身の情報を入力します。
日本からの購入は付加価値税が必要ないので合計金額が変更になります。
Deine Bestellung
注文内容です。
「Ich akzeptiere die Allgemeinen Geschäftsbedingungen (AGB)」に同意したらチェックを入れます。
Kaufen
購入するボタン。

次の画面では支払い方法をペイパルかクレジットカードかを選び、各種情報を入力して支払いを行います。

ペイパルかクレジットカードの情報を入力して支払う

支払いが完了すると先ほど入力したメールアドレス宛に購入したテーマのダウンロードリンクが届きます。
テーマが新しいバージョンにアップデートされた時や、再ダウンロードする際など、このURLは今後も使うものなので、消さずに残しておいてください。

テーマのインストールとセットアップ
テーマファイルはいつものごとく解凍して「/wp-content/themes」の場所にアップロードして、管理画面の左メニューにある「外観」「テーマ」から有効化します。

各テーマの購入ページにはテーマの使用方法が掲載されているので確認します。
動画などでも説明があるのでわかりやすくなっています。

Tatamiの場合はプラグインの追加が必要で「Contact Form 7」「Jetpack」「WP-PageNavi」「Better WP Recent Comments」を追加しました。

そして一番やっかいなのがレスポンシブのテーマになったことで、今まで書いた記事のレイアウトが崩れたり思い通りのデザインにならない部分が多々出てくるので1つ1つコツコツと修正します。

以下のサイトでもレスポンシブに移行してますが、この部分にものすごい時間がかかります。

このブログ試行錯誤でもすべての記事を確認しながら修正したら、購入してから3ヶ月経過した今になってしまいました(会社勤めと他のブログを更新しながらの作業)。レスポンシブを買うのに覚悟が必要ですね。

Before and After
Before
テーマ変更前のデザイン
After
テーマ変更後のデザイン

テーマについて不明な点はこちらのページテーマに関するQ&Aがあるのでご覧下さい。
ライセンス関連の「やっていいこと」「やってはいけないこと」なども書かれています。


コメントを残す

*」は入力必須項目


  • © 2010-2017 試行錯誤 All Rights Reserved.