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」のインストールとカスタマイズ方法でした。
インストールされた方、是非参考にしてみてください！
それでは！
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
