WordPressのテーマ「cocoon(コクーン)」の記事文章に引くマーカーを自由に簡単に設定する方法

スポンサーリンク

 

どうも、ブログマンです。

 

毎回ブログ書いているとっ

ていう入り方をちょっと変えてみようと

奇をてらってみたのですが、

 

まずブログマンっていうのが

何の発想もなく全く面白くなかったですね。

 

などと「奇をてらって」から一瞬話をそらし、

「奇をてらって!?」っの意味を

という流れもやはり読まれがちでしょうから、

(決して、文字数を稼ぐものではありません・・)

 

今回は、表題のとおり、

 

WordPressのテーマcocoonで記事中の文章に

好きな色と大きさで簡単にマーカーを引く方法を

書いてみたいと思いますね。

 

ブログを書いていると(あれ、結局(笑))、

マーカーの色をたくさん用意したり

太さも自由にしたいと思いますからね~。

 

いつものように

「cocoon」さまさまでとても簡単です。

 

それでは~

 

スポンサーリンク

文章に引くマーカーを好きな色に設定する方法

 

今回も、「cocoon」 の子テーマを使います。

とその前に、

追加したい色を用意しておきたいので

先にその話をしますね。

 

色の指定は固定のコードを使いますので、

グーグル先生で「色 コード」で検索してみましょう。

 

そうすると、

HTMLカラーコードとかカラーコード表などが

検索結果に出ますので良さそうなものを選択し

サイト(ページ)を開きましょう。

 

開いたサイトには、色画像と共に例えば、

darkblue #000088

とか

blue #0000FF などの

カラー名とコードが書かれていると思います。

 

それが今回使うコードとなりますので、

好みのカラーコードをメモ帳などにコピペしておくか

そのままページを開いておきましょう。

 

これで準備はOKです。

 

では、まず

WordPressの管理画面から

①外観を押す。

②テーマの編集を選択します。

③編集するテーマを選択で「Cocoon Child」 を選択します。

④テーマファイルはスタイルシートになっているか確認します。

そして、

⑤ 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

の下に以下のコードをコピペします。

 

.marker-under-red {
background: linear-gradient(transparent 80%, #ffb6b9 80%);
}

(これはもともと親テーマに記述されているアンダーライン赤のコードです)

 

するとこのようになるので、

 

このコピーしたコードの

①カラー名の部分と

①カラーコード部分を

今回使いたい色のものに変更します。

*複数追加したい場合はコードごと下にコピペしていけばOKです。

 

カラー名の部分は「pink 」とか「green 」

とかわかりやすいもので良いと思います。

カラーコードの部分には

使いたい色のコードを入れましょう。

 

編集画面で文章にマーカーを引く際に

ここで決めたカラー名を指定すると

その色が反映されることになります。

 

ここまできたら一旦、

テーマの編集を更新し保存しておきましょう。

 

スポンサーリンク

 

マーカーの太さを変更する方法

そのまま同じ画面でマーカーの太さを指定できます。

 

コード内にある〇〇%という値を変更すると

太さが変わります。

この部分です。2か所あります。

値を大きくするほど太く、小さいほど細くなります。

右側の値を変更するとグラデュエーションが

かかったようなマーカーにできたりします。

 

いろいろ値を入れてみて実際に確認しつつ

調整してみると良いと思います。

 

決まったら更新して保存したら完了です。

簡単ですよね。たったこれだけです。

 

 

 

実際の設定を見てみよう!

 

子テーマを更新したら実際に記事編集画面で

設定する方法を説明しますね。

 

まず、マーカーを引く文章に

スタイルタブからマーカーを選択し

適当な色のアンダーラインマーカーを引きます。

 

こんな感じになりますよね。

 

そうしたら、ここで右上タブから

テキストエディター画面に切り替えます。

こんな画面になっていますよね。

そして、ライン部分をよく見てください。

どっかで見覚えありませんか?

そうです。子テーマに追加した

コードの一部と同じですよね。

 

このライン部分を先ほど子テーマに追加した

カラー名の部分、「pink 」とか「green 」

に変更します。

 

*上記で、カラー名の部分は「pink 」とか「green 」とかわかりやすいもので良いと思います。と書いていたものです。

 

例えば、”blue” の部分を “red”に変えます。

確認すると

このようにちゃんと反映されて変更されています。

 

テキストエディターでコードを

直接編集するところがありますが

そこだけ慎重に行えば簡単ですね。

 

マーカーを引く前に下書き保存しておけば安心だと思います。

 

以上で完了です。

 

編集画面のスタイルタブの中に

テンプレで追加する方法もあると思いますが、

親テーマを編集しないとできなさそうなので

私はこの方法で設定していますね。

 

それではまた~。