どうも、ブログマンです。
毎回ブログ書いているとっ
ていう入り方をちょっと変えてみようと
奇をてらってみたのですが、
まずブログマンっていうのが
何の発想もなく全く面白くなかったですね。
などと「奇をてらって」から一瞬話をそらし、
「奇をてらって！？」っの意味を
という流れもやはり読まれがちでしょうから、
（決して、文字数を稼ぐものではありません・・）
今回は、表題のとおり、
WordPressのテーマcocoonで記事中の文章に
好きな色と大きさで簡単にマーカーを引く方法を
書いてみたいと思いますね。
ブログを書いていると（あれ、結局（笑）)、
マーカーの色をたくさん用意したり
太さも自由にしたいと思いますからね～。
いつものように
「cocoon」さまさまでとても簡単です。
それでは～
[ad]
文章に引くマーカーを好きな色に設定する方法
今回も、「cocoon」 の子テーマを使います。
とその前に、
追加したい色を用意しておきたいので
先にその話をしますね。
色の指定は固定のコードを使いますので、
グーグル先生で「色 コード」で検索してみましょう。
そうすると、
HTMLカラーコードとかカラーコード表などが
検索結果に出ますので良さそうなものを選択し
サイト（ページ）を開きましょう。
開いたサイトには、色画像と共に例えば、
darkblue #000088
とか
blue #0000FF などの
カラー名とコードが書かれていると思います。
それが今回使うコードとなりますので、
好みのカラーコードをメモ帳などにコピペしておくか
そのままページを開いておきましょう。
これで準備はOKです。
では、まず
WordPressの管理画面から
①外観を押す。
↓
②テーマの編集を選択します。
↓
③編集するテーマを選択で「Cocoon Child」 を選択します。
↓
④テーマファイルはスタイルシートになっているか確認します。
そして、
⑤ 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
の下に以下のコードをコピペします。
.marker-under-red {
background: linear-gradient(transparent 80%, #ffb6b9 80%);
}
（これはもともと親テーマに記述されているアンダーライン赤のコードです）
するとこのようになるので、
このコピーしたコードの
①カラー名の部分と
①カラーコード部分を
今回使いたい色のものに変更します。
＊複数追加したい場合はコードごと下にコピペしていけばＯＫです。
カラー名の部分は「pink 」とか「green 」
とかわかりやすいもので良いと思います。
カラーコードの部分には
使いたい色のコードを入れましょう。
編集画面で文章にマーカーを引く際に
ここで決めたカラー名を指定すると
その色が反映されることになります。
ここまできたら一旦、
テーマの編集を更新し保存しておきましょう。
[ad]
マーカーの太さを変更する方法
そのまま同じ画面でマーカーの太さを指定できます。
コード内にある〇〇％という値を変更すると
太さが変わります。
この部分です。2か所あります。
値を大きくするほど太く、小さいほど細くなります。
右側の値を変更するとグラデュエーションが
かかったようなマーカーにできたりします。
いろいろ値を入れてみて実際に確認しつつ
調整してみると良いと思います。
決まったら更新して保存したら完了です。
簡単ですよね。たったこれだけです。
[affi id=21] [affi id=9]
実際の設定を見てみよう！
子テーマを更新したら実際に記事編集画面で
設定する方法を説明しますね。
まず、マーカーを引く文章に
スタイルタブからマーカーを選択し
適当な色のアンダーラインマーカーを引きます。
こんな感じになりますよね。
そうしたら、ここで右上タブから
テキストエディター画面に切り替えます。
こんな画面になっていますよね。
そして、ライン部分をよく見てください。
どっかで見覚えありませんか？
そうです。子テーマに追加した
コードの一部と同じですよね。
このライン部分を先ほど子テーマに追加した
カラー名の部分、「pink 」とか「green 」
に変更します。
＊上記で、カラー名の部分は「pink 」とか「green 」とかわかりやすいもので良いと思います。と書いていたものです。
例えば、”blue” の部分を “red”に変えます。
↓
確認すると
このようにちゃんと反映されて変更されています。
テキストエディターでコードを
直接編集するところがありますが
そこだけ慎重に行えば簡単ですね。
マーカーを引く前に下書き保存しておけば安心だと思います。
以上で完了です。
編集画面のスタイルタブの中に
テンプレで追加する方法もあると思いますが、
親テーマを編集しないとできなさそうなので
私はこの方法で設定していますね。
それではまた～。
