WPテーマ変更はせず2018年流行のカラーにしてサイトイメージを変えてみた

WPテーマ変更はせず2018年流行のカラーにしてサイトイメージを変えてみた

WordPressテーマ変更を試みましたがかなり手間がかかるので、サイトカラーを変更することでサイトイメージを一新させました。

使用したサイトカラーは、2018年の流行色であるウルトラバイオレットを中心とした色の構成にしてみました。

タイトルロゴも変更することで気分一新できましたので、テーマカラー変更の備忘録として記事に残しておきたいと思います。

WordPressテーマ変更に労力がかかる

本来ならWordPressテーマを新しいものにしたかったのですが、ショートコードを多用していたため、変更や置換に労力を費やさなければならず、とてもじゃないですが、そんな時間は取れませんでした。

WPテーマ変更時に注意すべきたった1つのことは独自ショートコード
現在このサイトで使用しているWordPressテーマ Digipress COLORSのデザインも少し飽きたので、気分転換にテーマ変更しようと考えました。 しかし、最終的に独自ショートコードを数多く使用しており、作業が大変なので諦めました。…

アナタもショートコードの多用には注意しましょう。

2018年流行色はウルトラバイオレット

以前は■ ペパーミントグリーン(#00ac9a)色 ■を少し触って■ #37B4CB ■というカラーをメインに使用していましたが、自分自身でマンネリ感が出てきたため、色の賢威PNTONEが発表していた、2018年の流行色である■ ウルトラバイオレット(#5F■B8B) ■を中心としたカラーに変更しました。

Pnatone 18-3838

Pantone Color of the Year 2018 Partners & Licensees I Ultra Violet 18-3838
Partner with Pantone and color your world with Pantone-inspired products and services.
  • HTML Values : #5F4B8B
  • TPX(Pantone Textile Paper eXtended)用RBG : R-95, G-75, B-139
  • RGB Plusシリーズ : R-101, G-78, B-163
  • TCX用CMYK : C-71, M-73, Y-7, K-8
  • CMYK Plusシリーズ : C-76, M-75, Y-0, K-0

実際使用したカラー

 

使用するカラーはATTITUDEというカラーテーマから数色チョイスし、少し色の変化をつけました。

  1. ■ メインカラー#6b5d91
  2. ■ セカンドカラー #1C81AC
  3. ■ サードカラー#B56DA2
  4. 他に#FAB147#D54263#F17A36なども利用

リンクボタンは■ #D54263を採用し、目立つ感じにしています。

メニューバーのボタンもカラーに合わせて変更しました。

強調文字にオレンジを使用していたので、バイオレットっぽく変更しました。

これだけでも全体の雰囲気がガラリと変わりました!!

一括置換にはSearch Regexを使用する

文字列を一括に置換するにはプラグインを使用しました。

Search Regexはとても便利なプラグインなので、インストールしておくと良いです。

Search Regexの使い方はとても簡単なので、インストールして起動すれば分かると思います。

Sourceは記事の本文の変更を行いましたので「Post contents」を選択し、置換する上限は全てですので「No limit」です。

降順、昇順は関係ないので「Ascending」にしました。

  • ①置換前の文字を入れます。
  • ②置換したい文字を入れます
  • ③「Search」していくつくらいあるかチェックしましたが、全て変更するので④「Replace & Save」しました。

これはHTTPSに変更する時にも役立ちますが、その話は省きます。

強調カラーやボタンカラーの変更などを一気に行いました。

プラグインのCSSも変更しなくてはならない

目次やテーブルで使用しているプラグインの装丁色も変更しないとなりません。

装丁のCSSを設定しているプラグインは「Table Of Contents Puls(TOC+)」と「TablePress」です。

Table Of Contents Puls(TOC+)

TOC+は本サイトテーマで使用している「DigiPress COLORS」の設定画面の中にある「ビジュアル設定」→「オリジナルスタイルシート設定」を、下記のように変更しました。

 

これでOKです♪

TablePress

TablePressプラグインのオプションで下記のように変更しました。

詳細変更は個別に行いましたが、2〜3箇所だったので簡単に行うことが出来ました。

まとめとして

テーマカラーを少し変更するだけでもサイトイメージはかなり変わります

また、今まで使用していなかった機能なども利用することで、見栄えやインパクトを大きく変えることができ、新しいテーマへ変更したような気分になります。

操作は従来と変わらないので困ることもないでしょう。

もうすぐ春ですし、テーマカラーに変化をつけてみませんか♪