アンダーラインマーカー機能を自作する【WordPress・Cocoon】

Cocoon_アンダーマーカーの自作 WordPress

WordPressのCocoonテーマには、アンダーラインマーカー(下線)の機能が標準装備されています。

アンダーラインマーカーは強調したい部分に使うと、文章にメリハリが出ますので記事内の文字装飾に良く使われます。

文字装飾の機能で「太字」と同じくらい出番が多いアンダーラインマーカーですが、個人的に「色」や「太さ」をもっと自分の好みに変更したいと思い方法を調べてみました。

結論としてはCocoonで用意されているボタンの機能を変更するのではなく、新たな専用ボタンを作る方法です。

結果的にはとても満足なマーカー機能を作ることができました。

私の場合マーカーを文字に重ねたくなかったので幅を細くしたマーカーを作りました。

マーカーの比較

今回はWordPressのCocoonテーマで、自作のアンダーラインマーカー機能を作る方法をご紹介します。

【作業の流れ】
1.「AddQuicktag」のインストールと設定
2.追加CSSの設定
3.自作マーカーを編集する
4.自作したマーカー機能を使ってみる

 

プラグインAddQuicktagのインストールと設定

パソコンの設定

AddQuicktagは、好きなHTMLタグを登録してボタンにすることができる便利なプラグインです。

 

AddQuicktagのインストール

AddQuicktag_logo

 

WordPress管理画面(ダッシュボード)で「プラグイン」⇒「新規追加」をクリックして下さい。

プラグイン新規追加

 

②検索ボックスに「 AddQuicktag 」と入力すると、検索結果の先頭に出てきますので「今すぐインストール」⇒「有効化」をクリックして下さい。

AddQuicktagインストール

 

③プラグイン一覧に「 AddQuicktag 」が追加され、インストールは完了です。

AddQuicktagインストール完了

 

AddQuicktagでアンダーラインマーカーのボタンを作成する

マーカー

 

AddQuicktagの「設定」をクリックして下さい。

AddQuicktagの設定

 

AddQuicktag管理画面が表示されます。

AddQuicktagの管理画面

 

イエローマーカーの設定

 

①ボタンのラベル、ダッシュアイコンラベル名

ボタン名」と「ラベル名」に「イエローアンダー」と入力してください。

イエローボタンのラベルとダッシュアイコンラベル名の入力

 

② 開始タグ と終了タグ

上段(開始タグ)に下記のHTMLタグをコピペして下さい。

<span class="yellow-under">

 

下段(終了タグ)に下記のHTMLタグをコピペして下さい。

</span>

 

コピペした後は下記のようになります。

イエローの開始タグ と終了タグの入力

 

③「ビジュアルエディター」と「post」にチェックを入れて下さい。

イエローのビジュアルエディターとpostにチェック

 

④「変更を保存」をクリックして下さい。

イエローの変更を保存

 

 

 

ピンクマーカーの設定

 

①ボタンのラベル、ダッシュアイコンラベル名

ボタン名」と「ラベル名」に「ピンクーアンダー」と入力してください。

ピンクボタンのラベルとダッシュアイコンラベル名の入力

 

② 開始タグ と終了タグ

上段(開始タグ)に下記のHTMLタグをコピペして下さい。

<span class="pink-under">

下段(終了タグ)に下記のHTMLタグをコピペして下さい。

</span>

 

コピペした後は下記のようになります。

ピンクの開始タグ と終了タグの入力

 

 

③「ビジュアルエディター」と「post」にチェックを入れて下さい。

ピンクのビジュアルエディターとpostにチェック

 

 

 

④「変更を保存」をクリックして下さい。

変更を保存

 

 

これで、 AddQuicktag の「イエロアンダー」と「ピンクアンダー」のタグ設定が完了しました。

AddQuicktag のイエロアンダーとピンクアンダーのタグ設定完了

 

 

CocoonのCSS追加

CSSのアイコン

 

WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で、「Cocoon Child: スタイルシート (style.css)」内に、下記の追加CSSコードをコピペして追加して下さい。

※既に他のコードがある場合は、その下にコピペして下さい。

/* イエローアンダー*/
.yellow-under {
background:linear-gradient(transparent 80%, #FFFF66 0%) ;
}

/* ピンクアンダー*/
.pink-under {
background:linear-gradient(transparent 80%, #FFE4E1 0%) ;
}

 

コピペ後の状態

 

② 下にある「ファイルを更新」をクリックして下さい。「ファイルの編集に成功しました」と表示されます。

ファイルを更新

 

 

マーカーの太さや色を自分の仕様に変更する

CREATIVE MARKER

追加CSS一部を書き換えることで、マーカーの色や太さを変更することができます。

 

マーカー「太さ」の変更方法

 

追加したCSSコードの「80%」の部分の数字を変更することで、マーカーの「太さ」を調節することができます。

CSSマーカー太さ

 

0%(太い)⇒100%(細い)となります。

パーセントとマーカー太さの比較は、下記のサンプル画像を参考にしてみて下さい。

マーカーの太さを比較

 

マーカー「色」の変更方法

 

追加したCSSコード「#●●●●●」の部分(カラーコード)を変更することで色を指定できます。

 

 

カラーコード参考サイト①:原色大辞典

WEB色見本 原色大辞典」のサイトで、カラーコードをコピーして下さい。
原色大辞典のページ

 

原色大辞典のカラーコード

 

また上部のタブを切り替えるとで、8つのカテゴリー別に色見本を探すことができます。

原色大辞典のカテゴリータブ

 

【8つのカテゴリー】
(1)原色大辞典
(2)和色大辞典
(3)洋色大辞典
(4)web216
(5)パステルカラー
(6)ビビットカラー
(7)モノトーン
(8)メトロカラー

種類が豊富なので、自分のイメージに合った色が探せます。

 

 

カラーコード参考サイト②: HTML COLOR CODES

 

HTML COLOR CODES」のサイトもシンプルでオススメです。
HTML_COLOR_CODESのページ

 

見本パレットをクリックすると、その場所のカラーコードが下のボックスに表示されますのでコピーして下さい。

 

 

自作したアンダーラインマーカーを使ってみる

マーカーで書く

 

★実際に自作したアンダーラインマーカーを使ってみましょう。

 

ビジュアルモードでのQuicktagsボタンの使い方

 

アンダーラインマーカーを適用したい文字列をマウスドラッグで反転表示にして下さい。

ビジュアルモードで反転表示

 

②エディターに「Quicktags」というドロップダウンメニューがありますので、展開し「イエローアンダー」や「ピンクアンダー」を選択して下さい。

ビジュアルモードでQuicktagsを使う

 

③文字にアンダーラインマーカーが適用されます。

マーカーが適用

 

※私の場合、ブロックエディターで使っていますが、ビジュアルモードと同じ要領で使います。

 

 

テキストモードでのQuicktagsボタンの使い方

 

アンダーラインマーカーを適用したい文字列をマウスドラッグで反転表示にして下さい。

テキストモードで反転表示

②エディターに作成した「イエローアンダー」や「ピンクアンダー」のボタンがありますのでどちらかをクリックして下さい。

テキストモードでマーカーを実行

③指定した文字列の前後アンダーラインマーカーのタグが追加されます。

マーカータグが追加

 

④追加された前後のタグは、「AddQuicktag」で設定したタグであることが解ると思います。

タグの詳細

 

見た目を確認したい場合は、ビジュアルモードに切り替えて下さい。

見た目の確認

 

 

まとめ:マーカー機能は文章に欠かせない存在

今回はWordPressのCocoonテーマで、自作のアンダーラインマーカー機能を作る手順をご紹介しました。

マーカー機能は文章のレイアウト向上には欠かせない文字装飾の機能です。

Cocoonは多機能で使い易いのでとても人気でカスタマイズ機能も豊富ですが、使い慣れてくるともっと細かい部分を変更したいと思うようにもなります。

そのような場合はプラグインや追加CSSを活用し、自分流のカスタマイズをすることでもっと個性を出すことができます。

POINT!応用すれば「ブルー」や「グリーン」などの他のマーカー色も作成が可能です。

また、追加CSSの手順を理解している人は、Cocoon以外のテーマでも応用できますので参考にしてみて下さい。

今回ご紹介したカスタマイズ方法がお役に立てば幸いです。

 

⇒その他の【WordPress】記事はコチラ

参考記事⇒文字マーカーのつけ方!色や太さも変更可能!WordPressでHTMLとCSSの編集

参考記事⇒蛍光マーカー風の下線をCSSの文字装飾で作る方法

コメント