Xeory Extentionでオリジナルの色設定をつくる方法

 

この記事を書いている人 - WRITER -

既存の色設定を消さずにカスタマイズできる

WordPressテーマ「Xeory Extension」には、
4パターンの色設定があらかじめ組み込まれています。

style.cssを変更すれば、
あらかじめ組み込まれた色設定を
変更することができます。

しかし、既存の色設定に戻せなくなってしまうので、
下記のように新たな色設定を加えることをおすすめします。



この記事では、上記のようにカスタムカラー1とカスタムカラー2という
2つの色設定を加える方法をお伝えします。

目次

init.phpの編集方法

xeory_extentionのinit.phpを編集することで
カスタムカラーを選択できるようにします。

FTPで下記のフォルダにアクセスし、ダウンロードしてください。

/wp-content/themes/xeory_extention/admin

ダウンロードしたinit.phpをテキストエディタで開き、編集します。
編集内容については後ほど説明します。

編集が終わったら同じ名前で上書き保存し、
再度FTPで同じ場所にアップロードします。

この方法だと少し工程が多いので、わたしはロリポップFTPを使って
サーバー上のinit.phpファイルに直接アクセスして変更しました。

ロリポップを利用している人は、下記を参考にしてください。

ロリポップを使ったinit.phpの編集方法

ロリポップのユーザー専用ページで「サーバーの管理・設定」の中の
ロリポップ!FTPを選択します。

wordpressをダウンロードしたフォルダ/wp-content/themes/xeory_extention/admin
までアクセスすると、init.phpが見えます。


init.phpファイルに書き加える内容1

書き加える内容は、2つあります。

まずは1つ目。下記の2行です。

書き加える位置は、下記の箇所です。

init.phpファイルに書き加える内容2

次が、2つ目の書き加えるコードです。

2つ目の書き加えるコードは、下記のカラー設定の箇所です。

これで、下記の画像のように
「初期設定」にてカスタムカラー1やカスタムカラー2を
選択できるようになりました。

ただ、このままだと選択できるだけで
色を変えることはできません。

色を変えるにはstyle.cssに
カスタムカラー1とカスタムカラー2についての追記が必要です。

style.cssに書き加えるカスタムカラー1の追加コード

style.cssの一番下に、下記のコードを書き加えてください。

style.cssに書き加えるカスタムカラー2の追加コード

style.cssの一番下に、下記のコードを書き加えてください。

あとはstyle.cssに追記したcolor05やcolor06のコードを
自由に変更してオリジナルの色設定を作ってください。

この記事を書いている人 - WRITER -
 

  関連記事 - Related Posts -

 

  最新記事 - New Posts -

 

- Comments -

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

Copyright© eブックマーケティングブログ , 2017 All Rights Reserved.