【SANGOカスタマイズ】トップページ記事一覧のカテゴリーラベル色をグラデーションに変更する方法

WordPressテーマ「SANGO」を使い始めてからはや数ヶ月が経ちますが、やはり利用ユーザーはみるみるうちに増えていく印象があります。そしてそれと同時に、サイトデザインのコモディティ化も徐々に始まっているな、と感じる次第です。

今回は、そんな他サイトとのコモディティ化を避けるための細かいカスタマイズとして、トップページ記事一覧にあるカテゴリーのラベル色を変更する、しかも「グラデーション」に変更する方法を解説していきます。

「そんな細かいところ誰が見るの?」と疑問に思うかもしれませんが、そういったサイトデザインにおける細かい部分にまでこだわった人だけが、これからは選ばれていきます。とまあそんなにお堅く言っても仕方ないと思うので、とりあえず気が向いたらグラデーションカラーも使ってみてください。

SANGOでトップページ記事一覧のカテゴリーラベル色を変更する方法

まず、前提としてSANGOでは記事一覧ページにおけるカテゴリーラベルの色を、普通にカスタマイザーから設定することはできます。次のように「外観→カスタマイズ」にある「色→メインカラー」のカラーコードを変更することによって、カテゴリーラベル色を含めたサイトで扱われるメインの色を調節することができます。

 

しかし、ここでは原色系統にしか色を変更することができないので、「ラベルカラーにグラデーションを使いたい!」という人がもしいたとしたら(多分いない)困ってしまいます。

そこで今回は、カテゴリーラベル色をテーマカスタマイザーとは別にCSSで気持ち強引に指定する方法を解説していくので、ぜひそういったケースに陥っている方は参考になさってくださいね。

「外観→テーマの編集」に移動する。

CSSにカスタマイズを施していくには、まずWordPressのダッシュボード画面から「外観→テーマの編集」に移動しましょう。

「style.css(子テーマ)」からCSSでグラデーションを指定する。

そして、子テーマの「style.css」を選択し、以下のコードを一番下のあたりに追記します。(テーマの編集を行うときは必ず子テーマで行いましょう。後々困ります。)

 

グラデーション色をCSSで指定するには、今のところ「background: linear-gradient」あたりでしか指定することができないので、このようなコードとなっています。3種類書いてあるのは、ブラウザ毎の表示の違いを防ぐためにこのように記載しています。ちなみにクラス名が「cat-name」なのは制作者であるCatNoseさんのこだわりかもしれません、見るからに絶対猫派です。

そして、このコードをそのままコピーして貼り付けてみると「青系統(当メディアで採用している色)」のグラデーション色に変更されると思うのですが、あまり被るのはよくないので、ぜひここからの解説をもとにお好みのグラデーションカラーを見つけるようにしましょう。

(※カスタマイズが反映されないときは、ブラウザのキャッシュを削除したり、コードを追記する箇所が間違っていないか今一度確認してみてください。)

自分好みのグラデーションカラーを見つけよう。

ということで、ここからは先ほどのコードで入力した青系統とは違った、自分好みのグラデーションカラーを見つけていきます。

グラデーションカラーのカラーコードを探せるサイトはいくつかあるのですが、僕がオススメしているのはこちらのuigradientsさん。なぜこのサイトなのかというと、グラデーションを感覚的にかつ簡単に探すことができたり、単純にこのサイトのUIが好きだったりするためです。

 

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

 

すると、次のように選択した色に近い系統のグラデーションカラーが表示されるので、その中から気に入った色をクリックしましょう。「Hydrogen」だったり「Ohhappiness」だったり「kyoto」だったりと興味深い名前ばかりなので、見ているだけでも楽しいです。

 

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

 

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

 

無事にコードをコピーすることができたら、先ほどstyle.cssに追記したコードの中に、今コピーしたコードを代わりにペーストしましょう。今回は「Wedding Day Blues」を選択しましたが、次のようなコードになりました。

 

そして最後に「ファイルを更新」をクリックし、実際にサイトでの表示を確認してみると…

「Wedding Day Blues」がどんな意味なのか疑ってしまうようなとんでもない色になってしまいましたが、無事にトップページ記事一覧のカテゴリーラベル色を、しかもグラデーションカラーに変更することができました。

このように、グラデーションカラーというのは繊細なものであるし、カテゴリーラベルはサイトデザインにおけるメイン部分の色となるので、あくまでカラーコードを選ぶ際は慎重に選んでいくといいですね。

最後に

以上、トップページ記事一覧のカテゴリーラベル色をグラデーションに変更する方法ということで、SANGOのカスタマイズ方法について1つ紹介させていただきました。いかがだったでしょうか?

色鮮やかで視覚的にも安心感を与える、そんなグラデーションカラーはInstagramのロゴなどでも見るように、これからの時代におけるデザイントレンドの1つです。マテリアルデザインによるわかりやすいページ構造やライトなデザイン感を実現できるSANGOとも、グラデーションカラーは比較的相性も良くきっといい味を出してくれることでしょう。

だいぶ細かい点に関するカスタマイズではありましたが、「神は細部に宿る」のは間違いないので、ぜひこういった小さなこだわりを持ってサイト運営もしていけるといいですね。

 

ABOUT ME

RIKU(坂本陸)WEBマーケター及びコンサルタント

オフィシャルメディア「LIVE YOUR LIFE」運営/オンラインスクール「THE LIFE SCHOOL」主催/早稲田大学在学中にPC1台で起業し、その後大学中退の道を選び独立。現在は個人ならびに法人向けのコンサルティング活動・メディア制作や、就職活動・進路選択に悩む大学生のキャリア相談など幅広く活動中。23歳、RADWIMPSと甘いものに目がない。

⇒詳しいプロフィールはこちら

コメントを残す

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