WordPressのCocoonテーマには、アンダーラインマーカー(下線)の機能が標準装備されています。
![よしてっく](https://yoshitechblog.com/wp-content/uploads/2019/09/YOSHI_2.png)
アンダーラインマーカーは強調したい部分に使うと、文章にメリハリが出ますので記事内の文字装飾に良く使われます!
文字装飾の機能で「太字」と同じくらい出番が多いアンダーラインマーカーですが、個人的に「色」や「太さ」をもっと自分の好みに変更したいと思い方法を調べてみました。
![よしてっく](https://yoshitechblog.com/wp-content/uploads/2019/09/YOSHI_2.png)
結果的にはとても満足なマーカー機能を作ることができました!
私の場合マーカーを文字に重ねたくなかったので幅を細くしたマーカーを作りました。
![マーカーの比較](https://yoshitechblog.com/wp-content/uploads/2020/02/359a2cd8404ea566a7be5a8affb3ae60.jpg)
今回はWordPressのCocoonテーマで、自作のアンダーラインマーカー機能を作る方法をご紹介します。
- AddQuicktagのインストールと設定
- 追加CSSの設定
- 自作マーカーを編集する
- 自作したマーカー機能を使ってみる
プラグイン:AddQuicktagのインストールと設定
★AddQuicktagは、好きなHTMLタグを登録してボタンにすることができる便利なプラグインです。
WordPress:AddQuicktagのインストール
①WordPress管理画面(ダッシュボード)で「プラグイン」⇒「新規追加」をクリックして下さい。
![プラグイン新規追加](https://yoshitechblog.com/wp-content/uploads/2020/01/d9546a3d4dda7931b0e752016344434b.jpg)
②検索ボックスに「 AddQuicktag 」と入力すると、検索結果の先頭に出てきますので「今すぐインストール」⇒「有効化」をクリックして下さい。
![AddQuicktagインストール](https://yoshitechblog.com/wp-content/uploads/2020/02/afc6f48c4319ef16bb07a5e63af7a643.jpg)
③プラグイン一覧に「 AddQuicktag 」が追加され、インストールは完了です。
![AddQuicktagインストール完了](https://yoshitechblog.com/wp-content/uploads/2020/02/bf53ab35dd91380365d3e8e51cc4b391.jpg)
WordPress:AddQuicktagでアンダーラインマーカーのボタンを作成する
① AddQuicktagの「設定」をクリックして下さい。
![AddQuicktagの設定](https://yoshitechblog.com/wp-content/uploads/2020/02/ef5a5644f9f3169da287888248808569.png)
② AddQuicktagの管理画面が表示されます。
![AddQuicktagの管理画面](https://yoshitechblog.com/wp-content/uploads/2020/02/e74abbad6730752af9e1ad50ec8e8f19-1024x312.jpg)
AddQuicktag:イエローマーカーの設定
①ボタンのラベル、ダッシュアイコンラベル名
「ボタン名」と「ラベル名」に「イエローアンダー」と入力してください。
![イエローボタンのラベルとダッシュアイコンラベル名の入力](https://yoshitechblog.com/wp-content/uploads/2020/02/d40496ea62ea2c8fd506e3cf552be357.jpg)
② 開始タグ と終了タグ
上段(開始タグ)に下記のHTMLタグをコピペして下さい。
下段(終了タグ)に下記のHTMLタグをコピペして下さい。
コピペした後は下記のようになります。
![イエローの開始タグ と終了タグの入力](https://yoshitechblog.com/wp-content/uploads/2020/02/49388a688ef28158c983c2a9788785cc.jpg)
③一番右側のチェックボックスをクリックし、全ての項目にチェックを入れて下さい。
④画面下のほうにある「変更を保存」のボタンをクリックして下さい。
![イエローの変更を保存](https://yoshitechblog.com/wp-content/uploads/2020/02/5765ea5b1542a676c96f8f7780a154b2.jpg)
AddQuicktag:ピンクマーカーの設定
①ボタンのラベル、ダッシュアイコンラベル名
「ボタン名」と「ラベル名」に「ピンクーアンダー」と入力してください。
![ピンクボタンのラベルとダッシュアイコンラベル名の入力](https://yoshitechblog.com/wp-content/uploads/2020/02/ef313de77cb89170f37484c3484f9a53.jpg)
② 開始タグ と終了タグ
上段(開始タグ)に下記のHTMLタグをコピペして下さい。
下段(終了タグ)に下記のHTMLタグをコピペして下さい。
コピペした後は下記のようになります。
![ピンクの開始タグ と終了タグの入力](https://yoshitechblog.com/wp-content/uploads/2020/02/b948ac2e33b1127ed461372fac7dc519.jpg)
③一番右側のチェックボックスをクリックし、全ての項目にチェックを入れて下さい。
④画面下のほうにある「変更を保存」のボタンをクリックして下さい。
![変更を保存](https://yoshitechblog.com/wp-content/uploads/2020/02/5765ea5b1542a676c96f8f7780a154b2.jpg)
これで、 AddQuicktag の「イエロアンダー」と「ピンクアンダー」のタグ設定が完了しました。
![AddQuicktag のイエロアンダーとピンクアンダーのタグ設定完了](https://yoshitechblog.com/wp-content/uploads/2020/02/14c9fecea975ebecad64ec9496c186fc.jpg)
Cocoon:追加CSSの設定
![CSSのアイコン](https://yoshitechblog.com/wp-content/uploads/2020/02/programming-3173456_640_1200_ec-1024x576.jpg)
①WordPress管理画面(ダッシュボード)⇒「外観」⇒「テーマエディター」で、「Cocoon Child: スタイルシート (style.css)」内に、下記の追加CSSコードをコピペして追加して下さい。
※既に他のコードがある場合は、その下にコピペして下さい。
/* イエローアンダー*/
.yellow-under {
background:linear-gradient(transparent 80%, #FFFF66 0%) ;
}
/* ピンクアンダー*/
.pink-under {
background:linear-gradient(transparent 80%, #FFE4E1 0%) ;
}
コピペ後の状態
![](https://yoshitechblog.com/wp-content/uploads/2020/02/ba1cd601d4fb042032a16a306fc1566a.jpg)
② 下にある「ファイルを更新」をクリックして下さい。「ファイルの編集に成功しました」と表示されます。
![ファイルを更新](https://yoshitechblog.com/wp-content/uploads/2020/01/8e5beac62f2170c56c0ce76bd30bf9ed.jpg)
CSS設定:自作マーカーの太さや色を編集する
![CREATIVE MARKER](https://yoshitechblog.com/wp-content/uploads/2020/02/creative-1643265_640_k_1200_ec-1024x757.jpg)
★追加CSSの一部を書き換えることで、マーカーの色や太さを変更することができます。
CSS設定:マーカー「太さ」の変更方法
追加したCSSコードの「80%」の部分の数字を変更することで、マーカーの「太さ」を調節することができます。
![CSSマーカー太さ](https://yoshitechblog.com/wp-content/uploads/2020/02/511271ba19b286b718935320670767fa.jpg)
パーセントとマーカー太さの比較は、下記のサンプル画像を参考にしてみて下さい。
![マーカーの太さを比較](https://yoshitechblog.com/wp-content/uploads/2020/02/9e2f2a88395b1ce2f75a14c0ca95a0db.jpg)
CSS設定:マーカー「色」の変更方法
追加したCSSコードの「#●●●●●」の部分(カラーコード)を変更することで色を指定できます。
![](https://yoshitechblog.com/wp-content/uploads/2020/02/cf369023cb0e2e2387a35f185184ef69.jpg)
カラーコード参考サイト①:原色大辞典
「WEB色見本 原色大辞典」のサイトで、カラーコードをコピーして下さい。
![原色大辞典のページ](https://yoshitechblog.com/wp-content/uploads/2020/02/47d6afd5c5689f64cc911b2ff8e28222.jpg)
![原色大辞典のカラーコード](https://yoshitechblog.com/wp-content/uploads/2020/02/33a7093992dde616286316152b5996d6.jpg)
また上部のタブを切り替えるとで、8つのカテゴリー別に色見本を探すことができます。
![原色大辞典のカテゴリータブ](https://yoshitechblog.com/wp-content/uploads/2020/02/cd467629e7e1bbafc13af7f08a8ffa49-1024x281.jpg)
- 原色大辞典
- 和色大辞典
- 洋色大辞典
- web216
- パステルカラー
- ビビットカラー
- モノトーン
- メトロカラー
種類が豊富なので、自分のイメージに合った色が探せます。
カラーコード参考サイト②: HTML COLOR CODES
「HTML COLOR CODES」のサイトもシンプルでオススメです。
![HTML_COLOR_CODESのページ](https://yoshitechblog.com/wp-content/uploads/2020/02/HTML_COLOR_CODES_1.jpg)
見本パレットをクリックすると、その場所のカラーコードが下のボックスに表示されますのでコピーして下さい。
自作アンダーラインマーカー機能を使ってみる
![マーカーで書く](https://yoshitechblog.com/wp-content/uploads/2020/02/hand-895588_640_1200_ec-1024x722.jpg)
★実際に自作したアンダーラインマーカーを使ってみましょう。
WordPress:ビジュアルモードでのQuicktagsボタンの使い方
①アンダーラインマーカーを適用したい文字列をマウスドラッグで反転表示にして下さい。
![ビジュアルモードで反転表示](https://yoshitechblog.com/wp-content/uploads/2020/02/1d789404e1ab2b7f1565b2465cf25f69.jpg)
②エディターに「Quicktags」というドロップダウンメニューがありますので、展開し「イエローアンダー」や「ピンクアンダー」を選択して下さい。
![ビジュアルモードでQuicktagsを使う](https://yoshitechblog.com/wp-content/uploads/2020/02/f9f059a5f5d86f1fdca9ad81a38faee0.jpg)
③文字にアンダーラインマーカーが適用されます。
![マーカーが適用](https://yoshitechblog.com/wp-content/uploads/2020/02/2c3620a6773cf782efd02e41c70b69d8.jpg)
WordPress:テキストモードでのQuicktagsボタンの使い方
①アンダーラインマーカーを適用したい文字列をマウスドラッグで反転表示にして下さい。
![テキストモードで反転表示](https://yoshitechblog.com/wp-content/uploads/2020/02/20202078ebebf7c9751d7b47ad85a59d.jpg)
②エディターに作成した「イエローアンダー」や「ピンクアンダー」のボタンがありますのでどちらかをクリックして下さい。
![テキストモードでマーカーを実行](https://yoshitechblog.com/wp-content/uploads/2020/02/3419815e40118a3a0c7877d8aa3068d8.jpg)
③指定した文字列の前後にアンダーラインマーカーのタグが追加されます。
![マーカータグが追加](https://yoshitechblog.com/wp-content/uploads/2020/02/0a9044e62110a9aff2e4bfe4dadb9347.jpg)
④追加された前後のタグは、「AddQuicktag」で設定したタグであることが解ると思います。
![タグの詳細](https://yoshitechblog.com/wp-content/uploads/2020/02/4735e9fdd29910255f2f6dad1bb414d8.jpg)
⑤見た目を確認したい場合は、ビジュアルモードに切り替えて下さい。
![見た目の確認](https://yoshitechblog.com/wp-content/uploads/2020/02/2293805f07a9f7cdf9c86aa94e7ccda6.jpg)
まとめ:ブログのマーカー装飾は記事に欠かせない存在
今回はWordPressのCocoonテーマで、自作のアンダーラインマーカー機能を作る手順をご紹介しました。
![よしてっく](https://yoshitechblog.com/wp-content/uploads/2019/09/YOSHI_2.png)
マーカー機能は文章のレイアウト向上には欠かせない文字装飾の機能です!
Cocoonは多機能で使い易いのでとても人気でカスタマイズ機能も豊富ですが、使い慣れてくるともっと細かい部分を変更したいと思うようにもなります。
そのような場合はプラグインや追加CSSを活用し、自分流のカスタマイズをすることでもっと個性を出すことができます。
また、追加CSSの手順を理解している人は、Cocoon以外のテーマでも応用できますので参考にしてみて下さい。
コメント