WordPressテーマ「chameleon」のインストールとカスタマイズ方法

こんにちは、koheiです。

先日、WordPressテーマ「chameleon」をリリースしました。（ダウンロードしたい方は以下ページよりダウンロードしてください）
WordPress無料テーマ-chameleon-

今回のテーマもWordPressカスタマイザーで色々とカスタマイズできるようにしております。
今回は、「chameleon」のインストール方法からカスタマイズ方法を説明します。
これからインストールしようと思う方、インストールしたけどカスタム方法がわからない方、ぜひ参考にしてください。

インストール方法

「chameleon」ダウンロードサイトからテーマファイルが入ったzipファイルをダウンロードしたら、WordPressへインストールしましょう。

1.WordPress管理画面のメニュー「外観」⇒「テーマ」をクリックします。

2.「新規追加」ボタンをクリックします。

3.「テーマのアップロード」ボタンをクリックします。

4.テーマ追加の画面が表示されますので、「ファイルを選択」をクリックします。

5.ここでダウンロードしたzipファイルを選択します。

6.「今すぐインストール」ボタンをクリックします。

7.インストールが完了したら、以下のような画面になります。ここで「有効化」してもOKですが、ちゃんとインストールされているか確認するため、「テーマのページに戻る」をクリックします。

8.以下のように「chameleon」のテーマファイルがインストールされていればOKです。選択して「有効化」しましょう。

以上で、WordPressに「chameleon」をインストールし、テーマに設定することができました。
次は、カスタマイザー機能を使ってデザインをカスタマイズする方法を説明します。

カスタマイザー機能について

まずは、カスタマイザー機能の入り方を説明します。
WordPressメニューの「外観」⇒「カスタマイズ」をクリックします。

もしくは、WordPressにログインしている状態でサイトを表示している時、ヘッダーの上に「カスタマイズ」というメニューが表示されているので、クリックします。

以下のような画面が表示されればOKです。
この画面で色々とカスタマイズしていきます。

サイト基本情報

まずは、メニューの一番上にある「サイト基本情報」というメニューに入ってみましょう。
以下のように、サイトのタイトルとキャッチフレーズを設定できます。ここで設定した内容は、この後説明する「ヘッダーカスタム」で表示・非表示を設定できます。
サイトのタイトル、キャチフレーズを変更しサイトに反映させたい時は、メニューの上にある「保存して公開」を押しましょう。
※サイトアイコンという設定がありますが、動作未対応です。

ヘッダーカスタム

カスタマイザーの初期画面に戻り、「ヘッダーカスタム」というメニューに入ります。

タイトルはWordPressのタイトルを表示

「タイトルはWordPressのタイトルを表示」というチェックボックスにチェックを入れると、先ほど「サイト基本情報」で設定したサイトのタイトルがヘッダー部に表示されます。

オリジナルロゴの設定

自分のオリジナルのロゴ画像などを表示させたい時は、「タイトルはWordPressのタイトルを表示」のチェックを外します。
すると、デフォルトで設定されている「chameleon」というロゴが表示されます。
次に、「画像を選択」ボタンをクリックします。

画像選択画面に遷移しますので、好きなロゴをアップロードして選択しましょう。（すでにサイトにアップされている時は、メディアライブラリから選択します。）

以下のように、設定したロゴがヘッダー部に表示されました。
サイトに反映する時は、「保存して公開」を押しましょう。

キャッチフレーズを表示する

続いて、「キャッチフレーズを表示する」にチェックを入れます。すると、「サイト基本情報」で設定したキャッチフレーズがロゴの下に表示されます。
表示させたくない時は、チェックを外しておきましょう。

トップ画像の変更

ヘッダー部の下に表示されているトップ画像を変更できます。「画像を選択」ボタンをクリックし、先ほどのロゴ画像と同じように設定したい画像を選択します。以下のように、設定した画像が表示されます。

トップ画像を表示させたくない時は、「トップイメージを表示しない」にチェックを入れます。これでトップページにイメージ画像が表示されなくなります。

ヘッダーカラーの変更

続いて、ヘッダーカラーの変更方法です。ヘッダーカラーの「色を選択」ボタンをクリックして色を選択します。カラーテーブルから選択することもできますし、マニュアルでカラーコードを入力して設定することができます。設定したカラーは、リアルタイムで右のビュー画面に表示されます。

ヘッダー文字カラーの変更

ヘッダーの文字カラーの変更方法です。先ほどのヘッダーカラー同様文字カラーの「色を選択」をクリックして色を選択します。設定したカラーは、リアルタイムで右のビュー画面に表示されます。

メニューマウスオーバーカラーの変更

メニューのマウスオーバー時のカラーも変更できます。先ほどのヘッダーカラー同様マウスオーバーカラーの「色を選択」をクリックして色を選択します。設定したカラーは、リアルタイムで右のビュー画面に表示されます。
以上、ヘッダーカスタムの説明でした。変更をサイトに反映させる時は、「保存して公開」を押しましょう。
ちなみに、ヘッダーの色、文字色、マウスオーバーは、すべてフッターにも自動反映されます。

メインコンテンツカスタム

カテゴリーカラーの変更

記事一覧のアイキャッチ画像の上に表示されているカテゴリーの色を変更できます。カテゴリーカラーの「色を選択」をクリックして色を選択します。設定したカラーは、リアルタイムで右のビュー画面に表示されます。

見出しタイプの変更

記事中に記載したh2タグ、h3タグの見出しスタイルを変更できます。タイプ１〜タイプ３の３種類です。以下の画像を参考に好きな見出しを設定してください。
※h2タグのタイプ１，タイプ２のボーダー色、背景色は、「ヘッダーカスタム」で設定したヘッダーカラーと同色になります。
※h3タグのタイプ３の背景色は、「ヘッダーカスタム」で設定したヘッダーカラーと同色になります。
以上、メインコンテンツカスタムの説明でした。変更をサイトに反映させる時は、「保存して公開」を押しましょう。

サイドコンテンツカスタム

プロフィールの設定

サイドコンテンツに、プロフィール情報を設定できます。「プロフィールを表示する」にチェックを入れ、プロフィール画像、プロフィール内容、プロフィールページがあれば、リンクURLを記入すると、以下のようにサイドコンテンツに設定したプロフィールが表示されます。

見出しタイプの変更

サイドコンテンツの見出しタイプを変更できます。
以下の画像を参考に好きな見出しを設定してください。
以上、サイドコンテンツカスタムの説明でした。変更をサイトに反映させる時は、「保存して公開」を押しましょう。

最後に

以上、WordPressテーマ「chameleon」のインストールとカスタマイズ方法でした。
インストールされた方、是非参考にしてみてください！
それでは！

スポンサーリンク