2020.02.03WordPressのCocoonテーマには、アンダーラインマーカー(下線)の機能が標準装備されています。アンダーラインマーカーは強調したい部分に使うと、文章にメリハリが出ますので記事内の文字装飾に良く使われます。文字装飾の機能で「太字」と同じくらい出番が多いアンダーラインマーカーですが、個人的に「色」や「太さ」をもっと自分の好みに変更したいと思い方法を調べてみました。結論としてはCocoonで用意されているボタンの機能を変更するのではなく、新たな専用ボタンを作る方法です。結果的にはとても満足なマーカー機能を作ることができました。私の場合マーカーを文字に重ねたくなかったので幅を細くしたマーカーを作りました。今回はWordPressのCocoonテーマで、自作のアンダーラインマーカー機能を作る方法をご紹介します。★AddQuicktagは、好きなHTMLタグを登録してボタンにすることができる便利なプラグインです。AddQuicktagのインストール1WordPress管理画面(ダッシュボード)で「プラグイン」⇒「新規追加」をクリックして下さい。」と入力すると、検索結果の先頭に出てきますので「今すぐインストール」⇒「有効化」をクリックして下さい。」が追加され、インストールは完了です。AddQuicktagの「設定」をクリックして下さい。AddQuicktagの管理画面が表示されます。「ボタン名」と「ラベル名」に「イエローアンダー」と入力してください。終了タグ上段(開始タグ)に下記のHTMLタグをコピペして下さい。class="yellow-under">下段(終了タグ)に下記のHTMLタグをコピペして下さい。</span>コピペした後は下記のようになります。3「ビジュアルエディター」と「post」にチェックを入れて下さい。4「変更を保存」をクリックして下さい。「ボタン名」と「ラベル名」に「ピンクーアンダー」と入力してください。終了タグ上段(開始タグ)に下記のHTMLタグをコピペして下さい。class="pink-under">下段(終了タグ)に下記のHTMLタグをコピペして下さい。</span>コピペした後は下記のようになります。3「ビジュアルエディター」と「post」にチェックを入れて下さい。4「変更を保存」をクリックして下さい。「イエロアンダー」と「ピンクアンダー」のタグ設定が完了しました。(style.css)」内に、下記の追加CSSコードをコピペして追加して下さい。※既に他のコードがある場合は、その下にコピペして下さい。下にある「ファイルを更新」をクリックして下さい。「ファイルの編集に成功しました」と表示されます。マーカーの太さや色を自分の仕様に変更する★追加CSSの一部を書き換えることで、マーカーの色や太さを変更することができます。追加したCSSコードの「80%」の部分の数字を変更することで、マーカーの「太さ」を調節することができます。0%(太い)⇒100%(細い)となります。パーセントとマーカー太さの比較は、下記のサンプル画像を参考にしてみて下さい。追加したCSSコードの「#●●●●●」の部分(カラーコード)を変更することで色を指定できます。原色大辞典」のサイトで、カラーコードをコピーして下さい。上部のタブを切り替えるとで、8つのカテゴリー別に色見本を探すことができます。種類が豊富なので、自分のイメージに合った色が探せます。CODES」のサイトもシンプルでオススメです。見本パレットをクリックすると、その場所のカラーコードが下のボックスに表示されますのでコピーして下さい。自作したアンダーラインマーカーを使ってみる★実際に自作したアンダーラインマーカーを使ってみましょう。ビジュアルモードでのQuicktagsボタンの使い方1アンダーラインマーカーを適用したい文字列をマウスドラッグで反転表示にして下さい。2エディターに「Quicktags」というドロップダウンメニューがありますので、展開し「イエローアンダー」や「ピンクアンダー」を選択して下さい。3文字にアンダーラインマーカーが適用されます。※私の場合、ブロックエディターで使っていますが、ビジュアルモードと同じ要領で使います。テキストモードでのQuicktagsボタンの使い方1アンダーラインマーカーを適用したい文字列をマウスドラッグで反転表示にして下さい。2エディターに作成した「イエローアンダー」や「ピンクアンダー」のボタンがありますのでどちらかをクリックして下さい。3指定した文字列の前後にアンダーラインマーカーのタグが追加されます。4追加された前後のタグは、「AddQuicktag」で設定したタグであることが解ると思います。5見た目を確認したい場合は、ビジュアルモードに切り替えて下さい。今回はWordPressのCocoonテーマで、自作のアンダーラインマーカー機能を作る手順をご紹介しました。マーカー機能は文章のレイアウト向上には欠かせない文字装飾の機能です。Cocoonは多機能で使い易いのでとても人気でカスタマイズ機能も豊富ですが、使い慣れてくるともっと細かい部分を変更したいと思うようにもなります。そのような場合はプラグインや追加CSSを活用し、自分流のカスタマイズをすることでもっと個性を出すことができます。POINT!応用すれば「ブルー」や「グリーン」などの他のマーカー色も作成が可能です。追加CSSの手順を理解している人は、Cocoon以外のテーマでも応用できますので参考にしてみて下さい。今回ご紹介したカスタマイズ方法がお役に立てば幸いです。LINEよしてっくをフォローするよしてっくYoshi-tech-blog関連記事WordPress【簡単】Cocoonでプロフィールを設置する方法【WordPress】ここでは、WordPressのテーマCocoon(コクーン)で、サイドバーに「プロフィール」を設置する方法をご紹介します。訪問ありがとうございます。ブログ記事の投稿がある程度増えて来ると、その中で比較的に良く読まれる記事というのが出来てくると思います。今回は、WordPressのCocoonテーマの機能を使って、ブログの画像に枠線を付ける手順をご紹介します。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。2019年6月よしてっく家族5人、モノづくり系中小企業に勤める40代サラリーマン。10年以上会社で培ったスキルを活かし、パソコン・インターネット関連を中心とした有益な情報、使い方、トラブル対策、仕事の時短術、ネットで稼ぐ方法、WordPressの設定やカスタマイズなど配信していきます。2019年6月よしてっく家族5人、モノづくり系中小企業に勤める40代サラリーマン。10年以上会社で培ったスキルを活かし、パソコン・インターネット関連を中心とした有益な情報、使い方、トラブル対策、仕事の時短術、ネットで稼ぐ方法、WordPressの設定やカスタマイズなど配信していきます。CODES自作したアンダーラインマーカーを使ってみるビジュアルモードでのQuicktagsボタンの使い方テキストモードでのQuicktagsボタンの使い方まとめ:マーカー機能は文章に欠かせない。