【今なら1冊無料】 >>> 詳細はこちら

アンダーラインマーカー機能を自作してみよう|WordPress・Cocoon

Cocoon_アンダーマーカー機能を自作してみようWordPress

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

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

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

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

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

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

マーカーの比較

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

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

 

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

カフェでノートPCを使う女性

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

 

WordPress:AddQuicktagのインストール

AddQuicktag_logo

 

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

プラグイン新規追加

 

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

AddQuicktagインストール

 

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

AddQuicktagインストール完了

 

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

マーカー

 

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

AddQuicktagの設定

 

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

AddQuicktagの管理画面

 

 AddQuicktag:イエローマーカーの設定

イエローカラーのイメージ

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

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

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

 

② 開始タグ と終了タグ

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

<span class="yellow-under">

 

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

</span>

 

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

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

 

③一番右側のチェックボックスをクリックし、全ての項目にチェックを入れて下さい。

アドクイックタグ_全部にチェックを入れる

 

④画面下のほうにある「変更を保存」のボタンをクリックして下さい。

イエローの変更を保存

 

 

 

 AddQuicktag:ピンクマーカーの設定

ピンクの風船

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

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

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

 

② 開始タグ と終了タグ

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

<span class="pink-under">

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

</span>

 

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

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

 

 

③一番右側のチェックボックスをクリックし、全ての項目にチェックを入れて下さい。

アドクイックタグ_全部にチェックを入れる

 

 

④画面下のほうにある「変更を保存」のボタンをクリックして下さい。

変更を保存

 

 

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

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

 

 

WordPress: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%) ;
}

 

コピペ後の状態

 

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

ファイルを更新

 

 

CSS設定:マーカーの太さや色を変更する

CREATIVE MARKER

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

 

 

CSS設定:マーカー「太さ」の変更方法

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

CSSマーカー太さ

 

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

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

マーカーの太さを比較

 

 

CSS設定:マーカー「色」の変更方法

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

 

 

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

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

 

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

 

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

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

 

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

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

 

 

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

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

 

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

 

 

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

マーカーで書く

 

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

 

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

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

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

 

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

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

 

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

マーカーが適用

 

 

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

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

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

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

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

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

マーカータグが追加

 

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

タグの詳細

 

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

見た目の確認

 

 

まとめ:ブログのマーカー装飾は記事に欠かせない存在

応援するチアガール

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

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

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

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

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

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

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

 

コメント