Diverの動くマーカーの色を追加する方法|中級者向けカスタマイズ
Diverの動くマーカーの色を追加する方法|中級者向けカスタマイズ
Diverでは、下記のような「動くマーカー」を文字装飾として簡単に使うことができます。

Diverの「動くマーカー」

Diverの「動くマーカー」

デフォルトでは、「黄」「赤」「青」の3色が用意されていますが、マーカーの色は追加することも可能です。

今回は、このDiverの「動くマーカー」の色を追加する方法を解説したいと思います。

動くマーカーの色を追加する方法

スタイルシートを開く

動くマーカーの色を追加するには、CSSを編集する必要があります。

WordPressのダッシュボード左メニューから、『外観テーマエディター』という順にクリックしましょう。

『外観→テーマエディター』という順にクリック

『外観→テーマエディター』という順にクリック

「テーマの編集」画面が開きます。
画面右上にある「編集するテーマを選択」で、『diver』を選択してください。

「編集するテーマを選択」で『diver』を選択

「編集するテーマを選択」で『diver』を選択

『diver』を選択したあと、「テーマファイル」の『スタイルシート(style.css)』をクリックしましょう。

『スタイルシート(style.css)』をクリック

『スタイルシート(style.css)』をクリック

追加する色のコードを作成する

次に、追加したい色のコードを作成する手順を説明します。

Diverの「動くマーカー」には、「黄」「赤」「青」の3種類が用意されています。

Diverの「動くマーカー」

Diverの「動くマーカー」

この3色の設定がスタイルシートに記載されています。
スタイルシートで「.sc_marker-animation」と検索し、下記のような該当のコードを探しましょう。

新しく加える色は、これらのコードをコピーして編集する形で作成すると簡単です。
例えば、緑色を追加する場合、 「.sc_marker-animation.red」のコードを丸々コピーしてテキストエディタなどに貼り付けます。

貼り付けたら、セレクタの「.red」の部分を「.green」に変えます。

セレクタの「.red」の部分を「.green」に変える

セレクタの「.red」の部分を「.green」に変える

ちなみに、この部分はただの名前なので、「.green」以外でも問題ありません。
後から見てもわかりやすいように、色をそのまま名前にすることをオススメします。

次に、色の調整を行います。
コピーしたコードは全部で5行あり、どの行にも「rgba(255, 0, 0, 0.3)」という文字列があります。 これが赤色を指定しているコードなので、数値を緑色のものに変更します。

緑色をRGBで表すと、

R:0 G:128 B:0

となるので、先ほどのコードに当てはめると「rgba(0, 128, 0, 0.3)」となります。

 コードの書き方
rgba(Rの数値, Gの数値, Bの数値, 色の不透明度)

その他の色を追加したい場合は、下記のサイト等でRGBを調べることができるので、参考にしてみてください。

追加CSSでコードを入力する

先ほど作成したコードをDiverに反映させます。

WordPressのダッシュボード左メニューから、『外観カスタマイズ』という順にクリックしましょう。

『外観→カスタマイズ』という順にクリックして進む

『外観→カスタマイズ』という順にクリックして進む

Diverのカスタマイズページが開きます。 『追加CSS』をクリックしましょう。

『追加CSS』をクリック

『追加CSS』をクリック

コードの入力欄に、先ほど作成したコードを貼り付けます。

作成したコードを貼り付ける

作成したコードを貼り付ける

最後に『公開』ボタンをクリックすれば設定完了です。

『公開』ボタンをクリック

『公開』ボタンをクリック

動くマーカーに追加した色を使う方法

Diverでは、動くマーカーを編集画面の「スタイル」から選択できるようになっていますが、自分で追加した色は「スタイル」に表示されません。
そのため、「テキストエディタ」から手で設定する必要があります。

まず、動くマーカーを引きたい文字を入力し、一旦、デフォルトの動くマーカーを設定します。

一旦、デフォルトの動くマーカーを設定する

一旦、デフォルトの動くマーカーを設定する

ここでは黄色に設定してみます。

動くマーカーを設定したらテキストエディタに切り替えます。
すると、先ほど追加した動くマーカーのspanのclassが「sc_marker-animation y」となっていることがわかります。

動くマーカーのコード

動くマーカーのコード

一番最後にある「y」を、今回追加した「green」に変更して保存したら完了です。

動くマーカーのコード

動くマーカーのコード

これで、下記のように緑色の動くマーカーが適用されます。

緑色の動くマーカー

緑色の動くマーカー

まとめ

今回は、Diverの「動くマーカー」の色を追加する方法を解説しました。

簡単に好きな色を追加することができるので、文字装飾までこだわりたいという方は、ぜひ試してみてください。

スポンサーリンク

おすすめの記事