脱力系男子

【SANGOカスタマイズ】見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法

無料:最短で「ブログマネタイズ」を
マスターし自由な働き方を実現する方法。


最近ふと(というよりデザイントレンドを考慮した際にも)、グラデーションカラーをサイト上で使用するようになりました。グラデーションカラーは視覚的な彩りとしてもサイトに1つ変化を与えてくれますし、取り入れることによって単調になってしまいがちなサイトデザインにちょっとした工夫を施すことができます。

そこで今回はWordPressテーマ「SANGO」において、記事内に見出しを表示させるプラグイン「Table of Contents Plus」を設置した際に表示されるアイコンカラーを、グラデーションに変更する方法を解説していきます。多少細かいマニアックなカスタマイズかと思いますが、ぜひ気に入った場合は積極的に取り入れてみてください。

見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法

まず、今回解説させていただくカスタマイズ方法を実装することによって、サイトのどの部分にどんな変化が起きるのか?ということについて見ていきましょう。

今回は見出しを表示させるプラグイン「TOC+」の目次前に表示されるアイコンについて、色を変更していくということでしたが、実際には次の箇所に手を加えていくことになります。

 

このように目次の前に表示されるアイコンについて、当メディアでは現時点「青系統のグラデーションカラー」に設定しています。そして一応お伝えしておくと、このアイコンの色については「外観→カスタマイズ→色」の中にあるメインカラーを変更することによってカラーを変えることができます。

 

ただし、ここの部分の色を「グラデーションカラー」に設定していくにはカスタマイズからは設定ができないということ、また「目次前のアイコンだけ色を変えたい」というような場合には独自のコードを追記していく必要があるため、同様のケースに立ち会った場合にはぜひ今回解説する内容を実施してみてくださいね。

それでは早速、カスタマイズ方法について解説していきます。

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

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

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

 

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

 

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

 

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

 

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

 

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

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

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

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

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

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

 

コードについて軽く解説しておくと、上3行の「background」プロパティではグラデーションカラーをカラーコードにより指定しています。複数表記しているのはブラウザごとに表示が変わってしまうところをより類似している色で表示させ、ブラウザ間においてアイコンカラーの違いが生じることを防ぐためです。

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

 

無事に目次前のアイコンカラーが変更されていればOKです。あくまでサイト全体のメインカラーと相性の良いものを選ぶと見栄えもよくなるので、そこの色使いは気をつけてくださいね。

最後に

以上、見出しプラグインTOC+の目次前アイコンをグラデーションカラーに変更する方法ということで、SANGOのマニアックなカスタマイズ方法を解説しました。いかがだったでしょうか?

今回は目次前のアイコンカラーということでマニアックではありながらも、サイト内においては比較的読者の目に触れやすい箇所について変更を施していきました。そうであるからこそ配色に対する気遣いは大切なので、サイトのメインカラーと遜色ないグラデーションカラーを選んでいけるといいですね。

 

また、こういった細かい部分にこだわりを見せていくことであなたのサイトの独自性も高まっていくものですし、独自性のあるブランドというのもそういった細かい配慮があってこそ、よりユーザーに対してブランドアイデンティティを伝播させていくことができるようにもなります。

当メディアでは今回の記事の他にも、SANGOにおける細かいカスタマイズ方法を解説しているので、ぜひそちらの記事についても参考になさってください。その他SANGOに限らずサイトカスタマイズやデザインに関するご質問やご相談も受け付けているので、もし何か疑問点などありましたら気軽にお問い合わせくださいね。

]]>

「自分らしく生きたい」と強く願うあなたへ。
「自分らしく生きたい」と強く願うあなたへ。
 

leave a reply

*
*
* (公開されません)