【WordPress】様々なマーカーの設定方法について
WordPressでは、様々なマーカーを文字に引くことができます。
マーカー1
マーカー2
マーカー3
今回は、それぞれのマーカーの設定方法について初心者にも分かりやすく解説していきたいと思います。
マーカー１の設定方法
このマーカーは『TinyMCE Advanced』というプラグインのみで設定できます。
ではさっそく『TinyMCE Advanced』の設定方法を１から説明していきます。
まず、プラグインの新規追加をクリックします。
その後、キーワードに『TinyMCE Advanced』と入力し、今すぐインストールをクリックします。
インストールが完了しましたら、そのまま有効化をクリックして下さい。
その後、設定の『TinyMCE Advanced』をクリックします。
『Classic Editor (TinyMCE)』にタブを切り替え、背景色をエディタメニューにドラッグ&ドロップします。最後に設定保存したら設定完了です。
試しに使って見ましょう。
※エディタが『Classic Editor』でない場合、表示されません。『TinyMCE Advanced』と同じ手順でインストールし有効化しましょう
マーカーしたい文字を選択し、背景色で色を選択します。
マーカーされました。以上がマーカー1の設定方法になります。
マーカー2・ マーカー3の設定方法
これらのマーカーはCSSを追加する必要があります。
まず、外観のカスタマイズをクリックします。
その後、追加CSSをクリックします。
左のエディタに下記のCSSをコピー&ペーストして下さい。上がマーカー1、下がマーカー2のCSSになります。
.marker1 {
background: linear-gradient(transparent 50%, #FFF44B 0%);
}
.marker2 {
background: linear-gradient(transparent 75%, #ff9999 0%);
}その後、公開をクリックします。
これでCSSの追加ができました。
ですが、このタグを毎回入力するのはやはり面倒ですよね？そこで活躍するのが『AddQuicktag』です。
『AddQuicktag』とは、タグをあらかじめ登録することで、ワンクリックでマーカーを引くことができるプラグインです。
『TinyMCE Advanced』と同じ手順で、プラグインの新規追加を押し、『AddQuicktag』をインストールして有効化しましょう。
設定の『AddQuicktag』をクリックします。
タグの登録をします。まずはマーカー1の設定です。『ボタンのラベル、ダッシュアイコンラベル名』という項目の２箇所にマーカー名を記述して下さい。好きな名前で大丈夫です。
次に『開始タグ* と終了タグ(s)』ですが、こちらは下記の画像の通り入力して下さい。そして右端のチェックボタンを押し、変更を保存をクリックして下さい。
マーカー2もマーカー1と同様に入力し、もう一度変更を保存をクリックして下さい。
これでタグの登録が終わりました。実際に使用して見ましょう。
テキストエディタでマーカーしたい文字を選択し『Quicktags』でマーカー1・マーカー2をそれぞれの文字に設定します。
テキストエディタ内では文字の変化はありません。実際の表示を見てみましょう
それぞれ設定したマーカーが表示されました。
マーカーの色を自分好みに変更したい場合は、外観⇨カスタマイズ⇨追加CSSの【#○○○○○○】の部分をカラーコード一覧表を参考に変更して下さい。
まとめ
WordPressでマーカーを引く方法について紹介してきました。
マーカーを引いて色が増えると、記事にメリハリが出て読みやすくなるのでぜひご活用ください。
