デザイン制作、Web制作、ブログ運営などのノウハウを配信するサイト

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

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

プロフィールの設定

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

見出しタイプの変更

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

最後に

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

スポンサーリンク

いいね!を押すと、
最新記事をお届けします。

Twitter で

ブログ用WordPress無料テーマ
「chameleon(カメレオン)」

WordPressテーマ(chameleon)は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。
初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください!

ブログ用無料WordPressテーマ

士業用WordPress無料テーマ
「InomaExpertBasic」

士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。

無料WordPressテーマ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


ページトップボタン