どうも、ブログマンです。
毎回ブログ書いているとっていう入り方をちょっと変えてみようと奇をてらってみたのですが、まずブログマンっていうのが何の発想もなく全く面白くなかったですね。
失礼しました。
今回は、表題のとおり、「Wordpress」のテーマ「cocoon」で記事文章に好きな色と大きさで簡単にマーカーを引く方法を書いてみたいと思います。
ブログを書いていると、どうしてもマーカーの色をたくさん用意したり太さも自由にしたいなどと思うときがありますからね～。
いつものように「cocoon」さまさまで、とても簡単ですので、それではいってみましょー！
★目次（もくじ）
マーカーに使用したい色の選択
今回も、「cocoon」 の子テーマを使います。
とその前に、追加したい色を用意しておきたいので先にその話をしますね。色の指定は固定コードを使いますので、グーグル先生で「色 コード」で検索してみましょう。
そうすると、『HTMLカラーコード『とか『カラーコード表』などと書かれている色とコードがたくさん書かれているものが見つかると思いますのでそのサイト（ページ）を開いてみましょう。
おそらく開いたページでは、色の画像と共に例えば、
『darkblue #000088』とか『blue #0000FF 』
など、カラー名とコードが並べられてわかるように書かれていると思います。
それが今回使うコードとなりますので、ここでとりあえず好みのカラーコードを探し、メモ帳（テキストエディター）などにコピペしておくと二度手間にならないと思います。
これで、マーカに使用したい色の準備はOKです。
文章に引く『マーカー』を好きな色に設定する方法
さて、それでは実際に好きな色でマーカーを引いて行きましょう。
子テーマを直接編集しますので、心配な方は編集前のものをコピペしてバックアップをとっておくのをおすすめします。（全選択してメモ帳やテキストエディターにコピペしておけば良いと思います）
①管理画面から「外観」を押す（上記画像①）
まず、Wordpressの管理画面を開き、その管理画面左ナビの中にある「外観」を選択します。
↓
②テーマ（の編集）もしくは「テーマエディター」を押す（上記画像②）
そして、「外観」左ナビ下に表示された「テーマの編集」もしくは「テーマエディター」などと表現された、テーマのコードを編集するページを選択し、開きます。
↓
③編集するテーマとして「Cocoon Child」 を選択（上記画像③）
↓
④編集するファイルはスタイルシートを選択（上記画像④）
↓
⑤指定部分に以下をコピペする（上記画像⑤）
上記画像⑤部分のところ、
************************************/
/*必要ならばここにコードを書く*/
の下に以下のコードをコピペします。
.marker-under-red {
background: linear-gradient(transparent 80%, #ffb6b9 80%);
}
（これはもともと親テーマに記述されているアンダーライン赤のコードです）
するとこのようになるので、
このコピーしたコードの、
①カラー名の部分と②カラーコード部分を、今回使いたい色のものに変更できれば終了です。（＊複数追加したい場合はコードごと下にコピペしていけばＯＫです。）
①カラー名の部分は、「pink 」とか「lightgreen 」とかわかりやすいもので良いと思います。
②カラーコードの部分には、最初に検索しておいた、希望の色のコードを入れましょう。
この①と②の関係は ①で指定したワードで②の色を付けるということです。ですので①は半角アルファベットであれば何もよいということになりますね。
ここまできたら一旦、テーマの編集を更新し保存しておきましょう。
もしエラーなどが出た場合は無理に保存せず一度元に戻してしまえば良いと思います。
マーカーの太さを変更する方法
そして、同じ画面でマーカーの太さも指定できます。
コード内にある〇〇％という値を変更すると太さが変わるようになっています。
下のこの部分です。2か所あります。
左側のこの値を大きくするほど太く、小さいほど細くなります。
右側の値は変更するとグラデュエーションがかかったようなマーカーにできたりします。（右側はここでは関係ないのでそのままで問題ないです）
簡単ですよね。たったこれだけです。
実際に設定し、ページを見てみよう！
以上で、子テーマの編集は終わりですので更新したら記事一覧ページに戻りましょう。
そしてここからは、実際に記事編集画面で設定する方法を説明していきますね。
まず、「マーカー」を引く文章に、スタイルタブからマーカーを選択し適当な色のアンダーラインマーカーを引きます。
こんな感じになります。希望の色ではないと思いますがこのままで大丈夫です。
そうしたら、ここで右上タブから「テキストエディター画面」に切り替えます。
こんな画面になっていると思います。
そして、このライン部分をよく見てください。どっかで見覚えありますよね？
そうですね。子テーマに追加したコードテキストと同じ構成ですよね。
このライン部分を、先ほど子テーマに追加した
①カラー名の部分、「pink 」とか「lightgreen 」に変更してみましょう。
＊上記で、カラー名の部分は「pink 」とか「lightgreen 」とかわかりやすいもので良いと思います。と書いていたものです。
例えば、”blue” の部分を “red”に変えます。
↓
確認すると
このようにちゃんと反映されて変更されます。
「テキストエディター画面」でコードを直接編集するところがありますが
そこだけ慎重に行えば、簡単ですよね。
こちらもマーカーを引く前に下書き保存しておけば安心だと思います。
以上で完了です。
編集画面のスタイルタブの中に、テンプレで追加する方法もあると思いますが、親テーマを編集しないとできなさそうなので私はこの方法で設定していますね。
以上参考になれば幸いですね。
それでは～。
