XWRITEカスタマイズガイド【テーマカラー変更の色見本】

WordPressテーマ XWRITE（エックスライト）のカスタマイズ方法や応用例を紹介します。
カスタマイズガイドでは、テーマカラーの色見本、テーマの応用例などを解説しています。

XWRITEのテーマは、最新のブロックエディタに完全対応しており、HTML・CSSを直接編集することなく、視覚的に美しいブログを運用できます。

XWRITEのテーマを初めて利用する方、または、現状で上手く使いこなせていない方は、この特集記事が参考になると思います。
このカスタマイズガイドがあなたのお役に立てれば幸いです。

尚、このカスタマイズガイドでは、テーマの基本的な使い方の説明は省略しています。
テーマの基本的な使い方に関しては、公式マニュアルの説明をご覧ください。

バックアップ必須

テーマのカスタマイズを始める前に、バックアップを取る必要があります。
カスタマイズで操作を誤るとブログの表示が崩れる場合があります。

ブログのバックアップを行う際は、レンタルサーバーの管理ツールまたはバックアップのプラグインを利用して、外部ストレージにバックアップを保存してください。

バックアップ対象

データベース	記事データ・ブログの設定を格納する場所
メディアライブラリ	画像・動画などを格納する場所
テーマ	子テーマをカスタマイズする場合は、テーマファイルのバックアップが必要です

バックアップの方法

1. レンタルサーバーのバックアップツール
2. バックアップ機能があるWPプラグイン

テーマとスキンの特徴を理解する

XWRITEのテーマは、3種類の「スキン」が用意されています。
スキンを入れ替えることで、基本デザインを変更できます。

テーマをカスタマイズする際のコツ

ブログのサイトカラーを決める際は、カラーに拘りましょう。
カラーによって、ブログの印象が大きく変わります。

テーマカラーを変更できる箇所

テーマカラーは「カスタマイザー」機能を利用して、自分好みのカラーに変更できます。
テーマカラーは8箇所変更可能です。

ブログ全体	メイン（テーマの主要カラー） アクセント（テーマの強調カラー） テキスト（記事本文のカラー） リンクテキスト（リンクのカラー）
ヘッダー	ヘッダーナビ（メニュー） ヘッダー背景
フッター	フッターテキスト（メニュー） フッター背景

スキンごとの特徴

3種類のスキンには、下記のような特徴があります。
ソリッドのスキンが一般的なブログのデザインに近い汎用型です。

マイルドのスキン

ソリッドのスキン

シンプルのスキン

テーマカラーの変更方法

カスタマイザー

色見本で紹介しているWebカラー（16進数のカラーコード）をカスタマイザーの中にある「基本カラー」にコピー＆ペーストして設定を保存してください。

アクセントカラー・リンクテキストカラーなども同じようにWebカラーを設定してください。

管理画面の場所

外観 ＞ カスタマイズ ＞ サイト基本設定 ＞ 基本カラー

カスタマイザー

テーマカラーを決める際のコツ

XWRITEで利用するテーマカラーを決める際は、まずは「メインカラー」を決めて、
同系色の濃い色を「アクセントカラー」にすると、色の強弱でバランスが良くなります。

テーマカラーの決め方の例

1. 「メインカラー」を先に決める
2. 同系色の濃い色を「アクセントカラー」と「リンクテキスト」に設定する

ネタワンの場合

テーマカラーの色見本

XWRITEのテーマカラーを決める際に役立つ色見本をまとめてみました。
この記事で紹介している色見本は、ほんの一例です。これ以外にも沢山のカラーが存在します。

ご興味がある方は、インターネットで「色見本」のキーワードで検索するか、または、書店で色見本の書籍をお買い求めください。

ブルーの色見本（青色系）

大手企業で使われている青系のカラー

ネイビーの色見本（紺色・濃紺）

大手企業で使われている紺色系のカラー

紺色系のカラーは、2色を組み合わせて利用される場合が多いようです。

グリーンの色見本（緑色系）

大手企業で使われている緑色系のカラー

レッドの色見本（赤色系）

大手企業で使われている赤色系のカラー

パープルの色見本（紫色系）

大手企業で使われている紫色系のカラー

イエローの色見本（黄色系）

大手企業で使われている黄色系のカラー

オレンジの色見本（橙色系）

ピンクの色見本（桃色系）

ブラウンの色見本（茶色系）

4色の色見本（青赤黄緑）

Googleロゴの4色

テーマカラーの変更例

テーマカラーを変更した例を用意してみました。
カラーを変更するだけで、ブログの印象を大きく変えることができます。

マイルド：パープル

メインカラー	ラベンダー #c5b3d3
アクセントカラー	バイオレット #714f9d
リンクテキストカラー	バイオレット #714f9d
テキストカラー	ブラック #333333

マイルド：グリーン

メインカラー	グリーン #07b53b
アクセントカラー	ダークグリーン #006036
リンクテキストカラー	ダークグリーン #006036
テキストカラー	ブラック #333333

ソリッド：ブルー

メインカラー	Googleブルー #4285f4
アクセントカラー	コバルトブルー #0068b7
リンクテキストカラー	コバルトブルー #0068b7
テキストカラー	ブラック #333333

ソリッド：ライトブルー

メインカラー	ライトブルー #1da1f2
アクセントカラー	ライトブルー #1da1f2
リンクテキストカラー	コバルトブルー #0068b7
テキストカラー	ブラック #333333

シンプル：レッド

メインカラー	ローズレッド #e83f5f
アクセントカラー	ローズレッド #e83f5f
リンクテキストカラー	ローズレッド #e83f5f
テキストカラー	ブラック #333333

シンプル：イエロー

メインカラー	Googleイエロー #fbbc05
アクセントカラー	Googleイエロー #fbbc05
リンクテキストカラー	Googleイエロー #fbbc05
テキストカラー	ブラック #333333

初めての方へ

XWRITEとは？

XWRITE（エックスライト）は、初心者でも使える多機能型WordPressテーマです。
人気の無料テーマ「Cocoon」の開発者とエックスサーバーが手を組んで開発しています。

最新のブロックエディタに完全対応しています。
HTML・CSSなどの専門的な知識がなくても美しいブログを運営できるのが特徴です。
もちろん、高度な使い方もできます。初心者と経験者の両方が使えるようになっています。

エックスサーバーが開発・運営を担当、そして、Cocoonの開発者が開発チームに参画しており、テーマ開発にCocoonの運用ノウハウが反映されています。

運営会社の事業の安定性、運用ノウハウの蓄積など、事業の安定性と信頼性が確立しており、テーマの継続的な開発とアップデートが期待できます。

初心者でも経験者でも使えて、信頼性が抜群なので、
初めての方にも、経験者の方にもオススメできるWordPressテーマです。

テーマの購入方法は2通り

XWRITEのテーマは、購入方法が2通りあります。

どちらを利用してもテーマのデータは同じです。
契約プランの購入・解約を管理する場所が変わります。

1. テーマのみの購入は、公式サイトを利用します。
2. サーバーとセットで契約する場合は、エックスサーバーでテーマを購入します。

補足説明

公式サイトから購入 （通常の場合）	通常の場合は「XWRITE 公式サイト」から購入します。 XWRITEのテーマは、どのサーバーでも利用できます。 エックスサーバー以外のサーバーでも運用可能です。 公式サイトで購入する利点 公式サイトでテーマの購入と解約を管理できる 公式サイトからXWRITEを手動ダウンロードできる
テーマとサーバーの セット購入 （XWRITE＋エックスサーバー）	エックスサーバーを新規契約をされる方は、 先にレンタルサーバーの申し込みを完了させてください。 その後、エックスサーバーの「XServerアカウント」にログインして、左側メニューの「WordPressテーマ」からXWRITEのテーマを購入できます。テーマのデータは公式サイトで購入した場合と同じです。 エックスサーバーで購入する利点 「XServerアカウント」でWPテーマの購入と解約を管理できる サーバーパネルの「WPテーマ管理」からXWRITEを自動インストールできる サーバーパネルの「WPテーマ管理」からXWRITEを手動ダウンロードできる

公式サイト

詳しくは、それぞれの公式サイトの情報をご確認ください。

XWRITE

XWRITE

エックスサーバー

エックスサーバー

まとめ

WordPressテーマ XWRITE（エックスライト）のカスタマイズ方法や応用例を紹介しました。
カスタマイズガイドでは、テーマカラーの色見本、テーマの応用例などを解説しています。

テーマのデザインやコンテンツを変更して、ブログをあなた好みにカスタマイズしましょう。

XWRITEは、初心者でも使える多機能型WordPressテーマです。
もちろん、高度な使い方もできます。初心者と経験者の両方が使えるようになっています。