【SANGOカスタマイズ】ヘッダーロゴの文字色をグラデーションに変更する方法

今回はWordPressテーマ「SANGO」において、ヘッダーロゴ部分にある文字の色をグラデーションに変更する方法について解説していきます。あまり実用性のあるものかはわかりませんが(ヘッダー背景色との相性次第です)、当メディアで実装した際の備忘としても書き記しておくので、ぜひ同様のケースを実現したい場合には参考になさってくださいね。

SANGOのヘッダーロゴ文字色をグラデーションに変更する方法

まず、SANGOではヘッダーロゴの色を「外観→カスタマイズ→色」の中にある「ヘッダータイトル色」を変更することによって、調節することができます。

 

しかしながら、 グラデーションカラーを設定したいときに2種類のカラーコードを同時に入力することができないため、カスタマイザー内ではグラデーションを使用したデザインを実装することはできません。

そこで今回は、コードを追記することによって、CSSでヘッダーロゴ部分の色を指定する方法を使いグラデーションロゴを実現していきましょう。

グラデーションのカラーコードを取得しておく。

まず、前提としてロゴの文字色に設定したいグラデーションの、カラーコードを取得しておくと作業がスムーズに進んでいきます。

グラデーションのカラーコードは自力で探していってもOKですが、こちらのuigradientsさんを活用していくとよりスピーディーにお好みの色を探すことができるでしょう。このサイトではとても感覚的かつカンタンにグラデーションカラーを取得することができるため、今回に限らず何かグラデーションのカラーコードが必要になった際に活用してみてくださいね。

 

こちらのサイトにアクセスしていただき、まずは上部にある10色の原色の中から、今回実現したいグラデーションカラーに近い色をクリックします。

 

すると、次のように選択した色に近い系統のグラデーションカラーが表示されるので、その中から気に入った色をクリックしましょう。

 

気に入ったカラーをクリックしたら次のような画面が表示されるので、ここでは右上にある「<>」のマークをクリックしましょう。

 

そして、先ほど選択したグラデーションカラーのカラーコードがこのように表示されるので、「CLICK TO COPY」をクリックすればコードをコピーすることができます。

 

これで無事に、今回実装したいグラデーションカラーのカラーコードを取得することができました。続いて取得したコードを使って、CSSでヘッダーロゴの色指定を行なっていきます。

「外観→カスタマイズ」に移動する。

まず、WordPressのダッシュボード画面から「外観→カスタマイズ」を選択し、カスタマイザーを開きましょう。

「追加CSS」にCSSを追記する。

そして、一番下にある「追加CSS」に以下のコードを追記します。

「background:」で指定している3箇所については、先ほど取得したグラデーションのカラーコードを代わりにペーストしておきましょう(以下コードでは青系統のグラデーションが指定されているので「background:」の3行は削除してOKです)。

 

コードについて軽く解説しておくと、上3行の「background」プロパティではグラデーションカラーをカラーコードにより指定しており、以降の「background-clip」プロパティでテキストにグラデーションが反映されるように設定しています。基本的にグラデーションを実装するときは、このようにして画像を使うのではなくCSSで色指定してしまった方が、動作も軽くなるし表示も綺麗になるのでオススメですね。

 

さて、最後に「保存して公開」ボタンを押しカスタマイザーを閉じたら、実際にサイトでの表示を確認してみましょう。

このように、ヘッダーロゴ部分の文字色が無事にグラデーションカラーに変わっていますね(当メディアではロゴの下部分に文章を配置しているので、ロゴの下の文字は今回関係ありません)。

このようにカラーコードを調べて追記するだけでカンタンに実装できるので、ぜひグラデーションカラーをロゴに設定したいという場合には、今回解説した方法を活用してみてくださいね。

最後に

以上、ヘッダーロゴの文字色をグラデーションに変更する方法ということで、SANGOのメインとなるロゴ部分のちょっとしたカスタマイズを解説しました。いかがだったでしょうか?

こういったヘッダーロゴ部分の色など、メインとなる箇所のカラーコードについては「カスタマイズ→色」で設定することができますが、CSSで指定してしまえば今回のようにイレギュラーな場面にも柔軟に対応することができます。グラデーションにすることによってサイトに鮮やかで爽やかな印象を与えることができるし、何よりも他サイトと比較した際の独自化も大いに図ることができるので、ぜひ気まぐれにでも試してみるといいですね。

ただ、グラデーションというのはある意味大胆な色であるため、そのぶん繊細に取り扱っていくことは大切です。あまりパステルなカラーを選んでしまい読者が見づらくなってしまったら本末転倒ですし、他の原色系統と相性の悪いグラデーションカラーを選んでしまえばサイト全体として統一感がなくなってしまいます。

ぜひ、今回の例に限らずサイトデザインをカスタマイズしていく上では、読者に優しい配色統一感のある組み合わせなどもしっかり意識していくようにしましょう。

 

また、当メディアはある意味「SANGOっぽさ」のようなものはないかもしれませんが、基本的にSANGOやその他のテーマでのカスタマイズについてのご質問も承っています。もちろんメディア運営やその他Web周りで疑問に思っていることなどもありましたら、ぜひ気軽にお問い合わせくださいね。