英語デモサイトを見てカッコいいなーと思ったWordPressテーマでも、いざ自分のサイトに適用してみると日本語にはそのままじゃ合わなかったり、記事も上手くHTMLタグを使わないと思った通りに表示されなかったり・・なんて事、ありませんか？
というわけで、全くカスタマイズしてない状態のWordPressテーマ「Twentyシリーズ」を適用したデモサイトを日本語文章で用意してみました。
- Twenty Fifteen
- Twenty Fourteen
- Twenty Thirteen
- Twenty Twelve
「実際にテーマを適用し、日本語で投稿や固定ページを作っていった際に、どんな感じになるのか？」をイメージしやすくなると思いますので、ぜひ活用くださいませ。
※ 投稿や固定ページは、HTML構造含めて同じ記事内容にしてあります。
デモサイト一覧
Twenty Fifteen
http://demo.while-creation.com/theme-twentyfifteen/
Twenty Fourteen
http://demo.while-creation.com/theme-twentyfourteen/
Twenty Thirteen
http://demo.while-creation.com/theme-twentythirteen/
Twenty Twelve
http://demo.while-creation.com/theme-twentytwelve/
サイト構成
制作/クリエイター業、コンサルティング/講師業、などなど・・「受注に繋がるお問合せ」をゴールとしたビジネスブログを想定し、日本語の文章をしっかり作って各投稿や固定ページも色んなHTML要素（リストやテーブル）を使用してあります。
デザイン的に崩れている所も多いですが、それは元WordPressテーマを全くカスタマイズしていないため。各テーマをそのまま適用て投稿や固定ページを作っていくと、こんな見た目になりますよ〜という事で。（自分でカスタマイズする際にも参考になると思います）
各固定ページ＆投稿には色んなタイプのHTMLタグを利用しているので、内容よりは各HTMLタグでどんな表示になるのか？という点を見て頂ければと思います。
- 固定ページ
- 当デモサイトについて
文章のみのシンプルな構成。1,2,3,4 の連番部分は番号付きリスト（ol-liタグ）を使っています。あとはリンク（aタグ）も。 - 自己紹介
画像挿入ページのサンプルとして。管理画面の投稿ページで「メディアを追加」から「配置：左」で画像を追加すると、こんな表示になりました。 - 依頼可能リスト
プラン名（New Create PlanとかCustom Planとか）はh2タグ、プラン内の各サービス内容タイトルはh3タグを使っています。あと内容や料金については、テーブル（tableタグ）を使用。 - お問合せ
WordPressプラグイン「Contact Form 7」でお問合せフォームを用意してみました。フォームパーツも色々散りばめておきましたが、何もしないとフォームはこんなデザインになっちゃいますよ、という事で。カッコよく仕上げたいならCSSカスタマイズは必須ですね。
- 当デモサイトについて
- 投稿
- お知らせ
文章のみの投稿。 - 活動報告
画像付きの投稿。 - 知識/Tips
こちらも文章のみの投稿ですが、タイトルが複数行になるよう長めにしてます。
- お知らせ
・・あ、あと「３月の活動報告」にだけコメントを３件入れてます。コメント２件と、コメントへの返信を１件。
他にも色々デモサイト準備中。
今後、色んなWordPressテーマでこうしたデモサイトを用意しようと思っています。無料テーマだけでなく、僕が持っている有料テーマでもやろうと思っているので、テーマ探しの参考になるかなと。
＜現在デモサイト準備中のWordPressテーマ例＞
- Stinger3/Stinger5
- Xeory
- Simplicity
- BizVektor
- 賢威6.2
- SINKA
- Refine Pro
- Zerif-Lite
- 「Minimal-WP」のテーマ
- 「Theme Forest」のテーマ
- 「Templete Monster」のテーマ
「デモサイトが見たい！」というテーマがあれば、投票フォームを用意したので是非投票お願いします。（複数回答可、投票が多いものから優先して用意したいと思います）
また、ただそのまま適用するだけでも面白くないので（笑）実際に僕の方でカスタマイズしてみた例もデモサイトで見せられるようにしたいと思ってます。あとは「会員制サイト」や「レッスン予約サイト」など、より付加価値のあるCMS系デモサイト等も。
＜現在デモサイト準備中のCMS例＞
- 会員制サイト（完全非公開）
- 会員制サイト（特定記事のみ非公開）
- 会員制サイト（記事の一部が非公開）
- レッスン予約サイト
- 掲示板（フォーラム）サイト
- 複数管理者機能付きサイト
- 学習進捗管理サイト
- メール配信サイト
これらのデモサイトは、While { Creative ! } 無料会員に登録して頂ければ、専用会員サイト上で自由にデモサイトを閲覧できるようにしていきます。本記事の下にある『あなたの知らないWordPressのチカラ（PDF）』をダウンロード申請して頂くと、自動的に While { Creative ! } 無料会員となり専用会員サイトへも入れるようになりますので、興味のある方は是非。