賢威テンプレートをWordPressのテーマに設定する

賢威6.2WordPress版の設定についての記事です。 WordPressをインストールした後に、テーマとして賢威を設定する流れを解説したいと思います。

まずは賢威テンプレートのダウンロード

賢威サポートページから最新版の賢威をダウンロードします。（2015年9月現在賢威6.2）テンプレートメーカーから好みのデザインを選択して、テンプレートのzipファイルをデスクトップにダウンロードする流れです。

普段からテーマの設定や切り替えをおこなっている方には必要のない情報かもしれませんが、これから設定をはじめる方や賢威テンプレートの設定がうまくいかない方の助けになればと思います！

今回の記事の目的

賢威テンプレートメーカーの設定
賢威テンプレートのダウンロード
賢威テンプレートをWordPressのテーマに設定する

HTML版をお使いの方は、ファイルをダウンロード後にカスタマイズしていく流れになります。別の機会にHTML版の特徴やカスタマイズについては取り上げたいと思います。

それでは、スクリーンショットを交えながら「テンプレートメーカー」の解説から進めていきます。

意外と詳細な設定ができる、賢威「テンプレートメーカー」

テンプレートメーカーとは、賢威をダウンロードする際に利用するダウンロードシステムのことです。簡単に説明すると、5種類あるデザインから、好きなデザインを選んでダウンロードする、というイメージです。

さらにテンプレートメーカーの優れているところは、ダウンロード画面で様々な設定ができることです。ダウンロード前に細かな調整をしておくことで、すぐに運用をはじめていけるようになる訳ですね。もちろん、より細かなカスタマイズは必要ですが、どんな設定ができるか順番に見ていきましょう！

「HTML版」テンプレートメーカーメニュー

まずはHTML版のメニューの内容から見ていきます。

テンプレートの種類
HTMLテンプレート、Wordpressテンプレートの選択をおこないます。
テンプレートのレイアウト
１カラム２カラム２カラムリバース３カラム３カラムリバース 5種類のレイアウトから選択します。ダウンロード後にも変更可能です。
テンプレートのデザイン
コーポレートクールプリティヘルシーマネー 5種類のデザインから選択します。ダウンロード後には変更できませんので、この段階で決定しましょう。
レスポンシブWEBデザイン
レスポンシブWebデザインを「有効」にするか「無効」にするかを選択します。
サイト名
サイト名を入力。
コピーライト
サイトのコピーライトを入力。フッターのコピーライトに入ります。
サイトの幅
サイト全体の横幅を選択します。ダウンロード後も「CSS」内で変更可能です。
ロゴタイプ
テキストか画像かを選択します。ロゴに画像を使う場合、この画面から設定することが可能です。
メイン画像
サイトのキービジュアルを選択します。画像を設置しない場合、デフォルトの画像が入ります。もちろん、ダウンロード後に変更可能です。
細かな配色指定
見出しのライン見出しのライン（サイド）ヘッダーの背景色フッターの背景色メニューの背景色（モバイル）ダウンロード後に「CSS」にてカスタマイズ可能ですが、この段階で「見出し」や「ヘッダー」の色など、細かな設定が可能です。

左メニューの下部には「HTML版のマニュアル」リンクもあるので、ここで一緒にダウンロードしておきましょう。

「WordPress版」テンプレートメーカーメニュー

つづいて「WordPress版」のメニューですが、一つ目の「テンプレートの種類」で「Wordpressテンプレート」を選択することで、WordPress用のメニューに切り替わります。

テンプレートの種類
HTMLテンプレート、Wordpressテンプレートの選択をおこないます。
テンプレートのレイアウト
テーマを設定した後にWordPressの管理画面から設定可能です。初期設定は2カラムになっています。
テンプレートのデザイン
コーポレートクールプリティヘルシーマネー 5種類のデザインから選択します。ダウンロード後には変更できませんので、この段階で決定しましょう。
サイト名
テーマを設定した後にWordPressの管理画面から設定可能です。
コピーライト
テーマを設定した後にWordPressの管理画面から設定可能です。
サイトの幅
サイト全体の横幅を選択します。ダウンロード後も「CSS」内で変更可能です。
ロゴタイプ
テキストか画像かを選択します。ロゴに画像を使う場合、この画面から設定することが可能です。
メイン画像
テーマを設定した後にWordPressの管理画面から設定可能です。
細かな配色指定
見出しのライン見出しのライン（サイド）ヘッダーの背景色フッターの背景色メニューの背景色（モバイル）ダウンロード後に「CSS」にてカスタマイズ可能ですが、この段階で「見出し」や「ヘッダー」の色など、細かな設定が可能です。

「WordPress版のマニュアル」も左メニューの下部にあるので、一緒にダウンロードしておきましょう。

ポイントを見ていきましょう！

メニューを見ていくと「HTML版」も「WordPress版」ほとんど同じ項目ということが分かります。「WordPress版」では、あとからWordPressの管理画面で設定する項目がある、という違いですね。

それでは次に、それぞれの項目の詳細をみていきます。

とても簡単なにテンプレートのレイアウトが変更できる

テンプレートのカラムレイアウトは、「WordPress版」では管理画面から簡単に変更が可能です。「HTML版」はダウンロード後も「CSS」の調整で変更するが可能ですが、手間がかかりますので、テンプレートメーカーで決めておくといいと思います。

●カラムレイアウトイメージ

それぞれのカラムのイメージは上の画像のような形です。ランディングページには「1カラム」、情報の多いブログには「3カラム」など用途にあわせてレイアウトを考えられるので、自分のサイトにあったカラムレイアウトを考えてみてください。

テンプレートのデザイン

賢威では5種類のデザインから選ぶことができます。個人的な意見ですが、オススメはそのままでも十分キレイで、使いやすい「ヘルシー」と、カスタマイズががっつりできる方はシンプルでカスタムしやすい「コーポレート」です！ HTMLは5種類ともほとんど同じなので、カスタムしやすいというのは見た目の変化が分かりやすい、という感じです。

●5種類のデザイン

賢威テンプレートは何度でもダウンロードが可能なので、実際に触りながら自分にあったデザインを選ぶといいと思います。また、「デザイン」×「レイアウト」の掛け合わせで多くのパターンを作れることも魅力的ですね。テンプレートメーカーで組み合わせで簡単につくれるので、どんどん試していきましょう。

細かなカラー調整ができる

もうひとつテンプレートメーカーでポイントを挙げるすればと、それは「見出し」や「背景色」を設定できること。もちろんダウンロード後に「CSS」にてカスタマイズ可能ですが、画面でカラーコードを入力できるので簡単です。

また、テンプレートメーカーの画面では、カラーコードがリアルタイムで反映されるので、イメージが湧きやすいですね。

●反映される箇所をおさえておこう

それぞれのカラーコードが対応する位置は上記のようなイメージです。賢威サポートページには「カスタマイズサンプル」というページもあるので、参考にしてみるのもいいかもしれません。

「WordPress版」をダウンロードしてみよう

ここまで賢威テンプレートメーカーについて簡単にみてきました。次に賢威6.2「WordPress版」をダウンロードしてみましょう。ダウンロード自体は「HTML版」も同様の流れとなります。

テンプレートメーカーで項目を設定
「ダウンロードする」をクリック
マニュアルも忘れずに

テンプレートメーカーの使い方さえ分かれば、あとはダウンロードするだけです。一緒にマニュアルもダウンロードしておくと困ったときに便利ですので、忘れずに保存しておきましょう。

繰り返しになりますが、賢威テンプレートは何度でもダウンロードが可能ですので、複数サイトに利用したり、様々なカスタマイズにチャレンジするのに便利です。

賢威テンプレートをWordPressのテーマに設定しよう

さきほどの工程でダウンロードをすると「日付が入ったzipファイル」がダウンロードされます。「HTML版」であれば「keni62_html_corp_150911」、「WordPress版」であれば「keni62_wp_corp_150911.zip」となり、ファイル名からデザインの種類と日付が分かるようになっています。また、「HTML版」は「html」、「WordPress版」は「wp」とファイル名に入っているようです。

「HTML版」はzipファイルを解凍

「HTML版」はzipファイルを解凍して完了！あとは、目的にあわせて構成していきます。

今回はHTML版のファイル構成については詳細に解説はしませんが、上記のような構成になっています。

「WordPress版」はzipファイルがそのまま「テーマ」になっている

ダウンロードしたzipファイルをWordPressの管理画面からアップロードしていきます。

1.「外観」→「テーマ」と遷移します。

2.テーマページでは「新規追加」→「テーマのアップロード」とクリックし、ダウンロードした「zipファイル」を参照。

「参照」をクリックするとデスクトップのファイルが表示されるのた、ダウンロードしたzipファイルを選択します。「keni62_wp_corp_150911.zip」のような「WordPress版」の賢威テンプレートです。

3.アップロードできたら、「有効化」してテーマの設定完了。

上のキャプチャにある「有効化」をクリックすると設定完了です。また、「ライブビュー」ではテーマが適用されたイメージを見ることができます。

「テーマのページに戻る」をクリックで、インストール済みのテーマを確認することができます。

zipファイルのままアップロードできるので、テーマの設定は意外と簡単だったのではないでしょうか。ここでよくある間違いは、「HTML版」のzipファイルをアップロードしてしまうことです。

パッケージをインストールできませんでした。テーマに style.css ファイルが含まれていません。その間違いをしてしまった場合は、上記のようなエラーがでるので、改めて「WordPress版」をダウンロードしましょう。ダウンロードしたファイル名は「keni62_wp_corp_150911.zip」のように「wp」が入っているか、念のため確認するといいですね。