ルクセリタスの蛍光ペン・ラインマーカーの使い方

8月 1, 2019

WoradPressのテーマ「ルクセリタス」には、ブロックエディターでしか気づかない機能がいくつかあります。

今回はその中の一つ、蛍光ペン・ドット蛍光ペンといったラインマーカーの使い方について紹介します。

ルクセリタスの蛍光ペンの使い方

ルクセリタスのブロックエディターは、蛍光ペンが使いやすく設定されています。


一方、クラシックエディターも、コードを入力すれば簡単に蛍光ペンを使えます。

ブロックエディターでの使い方

ブロックエディターで蛍光ペンを使用するときは、段落ブロックで装飾したい文字を選択し、蛍光ペンを選ぶだけです。

クラシックエディターでの使い方

ブロックエディターで蛍光ペンを使用するときは、下で紹介するコードをテキストモードで入力してください。

よく使うものは定型文に保存しておくと使いやすいです。

蛍光ペンの種類とコード

ルクセリタスでには蛍光ペンが6色、さらにドット蛍光ペンが6色用意されています。

蛍光ペン

それぞれの蛍光ペンのHTMLコードは次のようになっています。

クラシックエディターをお使いの方は、使いたい色のコードをそのままコピペし、テキストモードに貼り付けてください。

<span class="luxe-hilight-yellow">黄色のマーカー</span> 
<span class="luxe-hilight-red">赤色のマーカー</span> 
<span class="luxe-hilight-blue">青色のマーカー</span> 
<span class="luxe-hilight-green">緑色のマーカー</span> 
<span class="luxe-hilight-orange">橙色のマーカー</span> 
<span class="luxe-hilight-pink">桃色のマーカー</span>

ドット蛍光ペン

ドット蛍光ペンも使い方は同じです。

<span class="luxe-dot-hilight-yellow">黄色のマーカー</span> 
<span class="luxe-dot-hilight-red">赤色のマーカー</span> 
<span class="luxe-dot-hilight-blue">青色のマーカー</span> 
<span class="luxe-dot-hilight-green">緑色のマーカー</span> 
<span class="luxe-dot-hilight-orange">橙色のマーカー</span> 
<span class="luxe-dot-hilight-pink">桃色のマーカー</span>

蛍光ペンのカスタマイズ

蛍光ペンは自分のサイトに合わせてカスタマイズできます。

カスタマイズしたコードは、ダッシュボード外観 > テーマエディター > 子テーマのスタイルシート(style.css)に貼り付けてください。

蛍光ペンの太さを変更する

例として、黄色の蛍光ペンで説明します。

黄色のHTMLコードは下のようになっています。

<span class="luxe-hilight-yellow">黄色の蛍光ペン</span>
おじさん
HTMLコードはテキストモードに貼り付けるコードのことですね

このコードの中の「luxe-hilight-yellow」の前に「.(ドット)」を入れ、次のようなコードをスタイルシートに貼り付けます。

.luxe-hilight-yellow {
background: linear-gradient(transparent 60%,#fff352 60%);
}
おじさん
ドットが小さくて見にくい…

コードの中の「transparent 60%,#fff352 60%」の部分が、蛍光ペンの太さを決めています(60%はルクセリタスの初期値)。

  • transparent 60% 透明部分の割合
  • #fff352 60% 黄色の割合

ややこしいですが、0%で一番太くなり、100%で線は消えます。

また、透明部分と黄色部分の%を一致させないと、蛍光ペンはグラデーションになります。

あえてグラデーションにしても良いですね
うさぎ

ドット蛍光ペンの太さを変更する

ドット蛍光ペンは、蛍光ペンと太さの指定方法が異なります。

例として、赤色のドット蛍光ペンで説明します。HTMLコードは下のようになっています。

<span class="luxe-dot-hilight-red">赤色のマーカー</span>

蛍光ペンと同じように、コードの中の「luxe-dot-hilight-red」の前に「.(ドット)」を入れ、次のようなコードをスタイルシートに貼り付けます。

.luxe-dot-hilight-red {
    background-size: 100% .4em;
}

コードの中の .4em(0.4em)の部分が、太さを決めています(.4emはルクセリタスの初期値)。

0.1em~、お好きな太さを選んでください。

蛍光ペンの色を変更する

次は、青色の蛍光ペンを紫色に変更してみます。

上記の太さを変えるのと同じ要領で、青色のコードをスタイルシートに貼り付けます。

.luxe-hilight-blue {
background: linear-gradient(transparent 60%,#b2cbe4 60%);
}

コードの中の#b2cbe4が青色を表しています。

今回は下の紫色に変えるので、コードは#d8bfd8です。色指定はカラーネーム「thistle」でもOKです。

おじさん
色のコードは原色大辞典などのサイトを参考にしてみてください

コードと結果は次のようになります。

.luxe-hilight-blue {
background: linear-gradient(transparent 60%,thistle 60%);
}

ドット蛍光ペンの色を変更する

緑色の蛍光ペンを黄緑色に変更してみます。

上記の太さを変えるのと同じ要領で、緑色のコードをスタイルシートに貼り付けます。

.luxe-dot-hilight-green {
 background-image: repeating-linear-gradient(-45deg,#a7d28d,#a7d28d 2px,transparent 2px,transparent 4px);
}

蛍光ペンと同じように、#a7d28dが緑色を表しています。

greenyellowに変えてみます。

ドットの場合は、2箇所変えてください
うさぎ

コードと結果は次のようになります。

.luxe-dot-hilight-green {
 background-image: repeating-linear-gradient(-45deg,greenyellow,greenyellow 2px,transparent 2px,transparent 4px);
}

ドットの太さの変更

ドット蛍光ペンは、色を変える以外にドットの間隔を変える方法もあります。

ドット蛍光ペンの線と色の関係は次のようになっています(transparentは透明)。

 

  1. グリーンで始まり、2px目までグリーン
  2. 次は4px目まで透明
  3. 以下、これを繰り返す

この考え方を踏まえて、ドットの幅を1pxにします。色を変えなくても雰囲気が変わるのが分かると思います。

1pxは細かすぎてうまく表示できないので、最後を3pxにしています。

.luxe-dot-hilight-pink {
 background-image: repeating-linear-gradient(-45deg,#ff7f7f,#ff7f7f 1px,transparent 1px,transparent 3px);
}
おじさん
女子力Up!

文字を変更する

蛍光ペンは同時に太字や文字色もカスタマイズできます。

太字

次のように、スタイルシートに貼るコードの中に「font-weight:bold;」を書きます。これは、ドット蛍光ペンも同じです。

.luxe-hilight-orange{
font-weight:bold;
}
文字色

colorを指定することで、蛍光ペンの使用と同時に文字の色を変更できます。

.luxe-hilight-pink{
background: linear-gradient(transparent 60%, #f77777 60%);  /*---ラインカラー・薄いピンク------*/
font-weight:bold; /*---太字------*/
color: #F98A8A;  /*---文字色・濃いピンク------*/
}
おじさん
例では、線の色も一緒に変えています

このように一つの蛍光ペンに複数のカスタマイズを盛り込むことができます。

文字の縁取り

濃いアンダーラインだと文字が見えにくくなるときがあります。

文字に縁取りをすることで読みやすくなります。

.luxe-hilight-red{
background: linear-gradient(transparent 70%, darkred 70%);	
text-shadow: 1px 1px 0 #fff,-1px 1px 0 #fff;/*---白い影で縁取り------*/
}

複数のカスタマイズの併用

上でも説明しましたが、複数のカスタマイズを併用する場合は下のようにまとめて記述してください。

.luxe-hilight-yellow {
background: linear-gradient(transparent 60%,#fff352 60%); /*---ラインの太さと色------*/
font-size: bold; /*---文字の太さ------*/
text-shadow: 1px 1px 0 #fff, 0 1px 0 #fff; /*---文字の縁取り------*/
}

まとめ

今回は、ルクセリタスの蛍光ペンの使い方を紹介しました。


クラシックエディターを使っている時は、こんな機能があるとは知りませんでした。

ルクセリタスの開発はブロックエディター優先のようなので、今後はブロックエディターでしか使えない機能がもっと増えそうです。

クラシックエディター派の方は、早めにブロックエディターに変えた方が良さそうですよ^^

おじさん
最初は使いにくくても2、3日もすれば慣れます

ルクセリタス関連記事一覧