WordPress

ワードプレステーマ『JIN』にマーカーを追加する方法

ワードプレスのテーマ『JIN』は初心者にも優しく作られていて、サイトのカラーなど簡単に設定できるようになっています。

その中でもマーカーは文字を強調したいときに綺麗に強調できるので、利用していると思います。

でも、マーカーの種類が2つしかないので、ブログを更新していく中で、他の色を使いたくなりマーカーのカラー設定を変更すると、いままでの記事に設定したマーカー色や幅も変わってしまいますよね。他の色や幅も増やしたいって思ったことありませんか?

自分はあります!

そこで、今回はワードプレステーマ『JIN』のマーカー追加についての方法を紹介します。

JINのCSSにコードを追加する

JINにマーカーを追加するには、CSSにコードを追加する必要があります。

追加CSSは『外観』▷『カスタマイズ

jinマーカー

現在のテーマが『jin-child』になっているのを確認して『追加CSS』をクリック

jinマーカー

テーマは必ず『jin-child』になっていることを確認してから『追加CSS』にコードを追加してください。また、バックアップを取ってからおこなうことをオススメします。

マーカーのコードを追加する

例として何種類か用意したので、cssに次のコードをコピペして使ってみてください。

レッドライン

/* マーカー追加 red */
.marker-red{
background: linear-gradient(transparent 70%, #ff9393 0%);
}

ピンクライン

/* マーカー追加 pink */
.marker-pink{
background: linear-gradient(transparent 70%, #eb9793 0%);
}

パープルライン

/* マーカー追加 purple */
.marker-purple{
background: linear-gradient(transparent 70%, #b168a8 0%);
}

オレンジライン

/* マーカー追加 orange */
.marker-orange{
background: linear-gradient(transparent 70%, #fda900 0%);
}

ブルーライン

/* マーカー追加 blue */
.marker-blue{
background: linear-gradient(transparent 70%, #6c9bd2 0%);
}

グリーンライン

/* マーカー追加 green */
.marker-green{
background: linear-gradient(transparent 70%, #c7dc68 0%);
}

イエローライン

/* マーカー追加 yellow */
.marker-yellow{
background: linear-gradient(transparent 70%, #fef263 0%);
}

マイルドライナー風レッドライン

/* マーカー追加 m-red */
.marker-m-red{
background: linear-gradient(transparent 70%, #ffcccc 0%);
}

マイルドライナー風ピンクライン

/* マーカー追加 m-pink */
.marker-m-pink{
background: linear-gradient(transparent 70%, #f9d0c5 0%);
}

マイルドライナー風パープルライン

/* マーカー追加 m-purple */
.marker-m-purple{
background: linear-gradient(transparent 70%, #c08fb3 0%);
}

マイルドライナー風オレンジライン

/* マーカー追加 m-orange */
.marker-m-orange{
background: linear-gradient(transparent 70%, #ffddbc 0%);
}

マイルドライナー風ブルーライン

/* マーカー追加 m-blue */
.marker-m-blue{
background: linear-gradient(transparent 70%, #bce1df 0%);
}

マイルドライナー風グリーンライン

/* マーカー追加 m-green */
.marker-m-green{
background: linear-gradient(transparent 70%, #ccffcc 0%);
}

マイルドライナー風イエローライン

/* マーカー追加 m-yellow */
.marker-m-yellow{
background: linear-gradient(transparent 70%, #f8e58c 0%);
}

グレイライン

/* マーカー追加 gray */
.marker-gray{
background: linear-gradient(transparent 70%, #a3a3a2 0%);
}

ブラウンライン

/* マーカー追加 brown */
.marker-brown{
background: linear-gradient(transparent 70%, #b36c3c 0%);
}

ダークグリーンライン

/* マーカー追加 dgreen */
.marker-dgreen{
background: linear-gradient(transparent 70%, #335719 0%);
}

追加したマーカーの使い方

そのまま使うとき

マーカーで塗りつぶしたいテキストの前後にタグを記入します。

赤色で塗る場合

<span class="marker-red">テキスト</span>

文字を強調したいとき

HTMLの『span』を『strong』に書き換えることで『マーカー部分が強調されます』

しかし『strong』は検索エンジンにも重要な場所だと伝えるタグですので、この方法で文字を強調したマーカーを引きまくると、読者に重要だと伝えるためのだけのマーカーも検索エンジンにも重要だと伝えることになってしまいます。

そこで、さきほど追加したCSSのコードに『font-weight:bold;』を追加することによって、検索エンジンに関係なく文字を強調できるようになります。

レッドライン

/* マーカー追加 red */
.marker-bred{
background: linear-gradient(transparent 70%, #ff9393 0%);
font-weight:bold;
}

今回は名前を『bred』として強調しない『red』と競合しないようにしています。

文字の違い

JINに追加したマーカーのテストです。

JINに追加したマーカーのテストです。

太字にして強調したほうが見やすいかもしれませんね。状況によって使い分けると良いでしょう

AddQuicktagプラグインに登録する

こちらの記事で紹介している『AddQuicktag』というプラグインを使用したら、面倒なタグ打ちもボタン1発で、できるようになるのでオススメです。

AddQuicktagを使用してHTMLタグを早く入力しようHTMLのタグって短いのなら簡単に打てますけど、吹き出しのタグとか頻繁に使うのは毎回打つのが面倒ですし、打ち間違うとどこが間違ってるのか...

マーカーの太さやカラーを変える

今回紹介したマーカーのカラーや太さは次のコードを変更することで自由に変更できます。

70%』となっている場所がラインの太さで、数値が大きいほどラインが細くなります。

ff9393』はカラーコードとなっていて、好きなカラーコードにすることでラインのカラーが変更できます。

おわりに

マーカーを追加することで、ブログやサイトのデザインの幅も広がると思います。(自分にそこまでデザインセンスがあるとは思えませんが)

JINにはマーカーが2種類しかないので、これまで困っていた人の助けになれたら幸いです。

COMMENT

メールアドレスが公開されることはありません。