文章にラインマーカーを引きたい!transparentには気をつけて

こんにちは、アキです。

ド素人の僕でもできたWordPressカスタムシリーズです。このブログでもちょこっとカスタムしているので紹介していこうかと思います。というか自分用のメモだ。

今回は、ラインマーカーの追加です。文章を書いていて「ここはちょっと強調したいな」っていう部分がある時に便利ですね。太字とか文字色は変えられるけどラインマーカーなんかもあると表現の幅が広がるかと思います。

ラインマーカー指定のCSSコードに注意

ラインマーカー指定のCSSコード

まずは下記のコードをCSSに追加します。

「maker1」になってるけどここの名前は自由にどうぞ。この後にいくつも追加していくなら数字の順番でいいかなって。pinkとかgreenとか色で分けてもいいし。

<span class=”marker1″>強調したい文章</span>

そしたら上記のように強調したい文章部分をタグで囲めばラインマーカーが引かれる。

このコードのままだと↑のラインマーカーだと思う。上記に載せたコードじゃイメージと違うって人は更に手を加えて好みに変えましょう。

 

『rgba(255,232,255,0) 0%』ラインマーカーの幅を変えられます。このコードだと0%で文字の背景全体に色が付いている状態です。ややこしいけど0%から増やしていくとラインマーカーは細くなります。

↑80%にしてみるとこんな下線のような細いラインマーカーになるので、好みの幅にしましょう。

 

『#ffe8ff 0%』カラーコードとグラデーションの濃さを変更します。このコードだと薄ピンクで0%の状態なのでグラデーションがありません。

↑幅を0%の状態でグラーデーションを100%にしてみました。上下にグラデーションが出ましたね。

カラーを変えた際はカラーコードをRGB形式に変換して『rgba(0, 0, 0, 0)』の部分に置き換えましょう。変換ツールは下記のサイトを利用させて頂きました。

カラーコード変換ツール

そして最終的に僕の使用しているコードです。

maker1

maker2

ものすっごい薄いけどとりあえずこの2色です。蛍光ペンな雰囲気が出せたかな。

よく見かけるtransparentには注意

僕は最初、以下のCSSコードを追加しました。

ラインマーカーのCSSでググるとこのコードをよく見かけると思うけど、これには一つ問題があったのでそれを踏まえての解説です。

これだとPC表示は問題なくても、スマホ表示の際にグラデーションの薄くなる部分が黒ずんでしまいます。

『transparent』でiPhone表示

これはそもそも『transparent』の部分に問題がありました。

『transparent』というのは「透明」という意味ではなくて「透明な黒」という意味だったそうです。なのでグラデーションで薄くなるはずの部分が黒ずむ現象が起きたようだ。「黒→ピンク」のグラデーションになっている。

transparentを『rgba(0, 0, 0, 0)』に置き換えることで解決です。同じ色でグラデーションが作られるので、「透明なピンク→ピンク」となり黒ずみは無くなるのです。

rgba(0, 0, 0, 0)』でiPhone表示

これでiPhoneでの表示が直りました。Androidは所有していないので分かりません。いろんなブラウザで確認することをオススメします。

スポンサードリンク

必須プラグイン『AddQuicktag』

AddQuicktagはWordPressを使用している人ならほぼ必須プラグインとして有名かと。予め登録したタグを一発で呼び出せるようにするプラグインです。ラインマーカーも簡単にワンタッチで呼び出せて楽ちんになりますよ。

インストール・導入方法

「プラグイン」→「新規追加」→「AddQuicktag」でプラグイン検索をしてダウンロード&インストールしてください。

こちらからもダウンロードできます。ダウンロードしたzipファイルをアップロードしてインストールしてください。インストールが完了したら有効にすることを忘れずに。

あとは「設定」→「AddQuicktag」から必要なタグ情報を追加するだけ。

ボタン名・ラベル名は分かりやすいものを自由に。開始タグと終了タグは間違えないように入れよう。これでワンボタンでラインマーカーを引けるようになるね。

まとめ:蛍光ペンで教科書にマーキングしてたよね

蛍光ペン感を出したくて蛍光ピンク蛍光グリーンの雰囲気を意識した2色にしたよ。なんか懐かしいね。

こんな感じでちょこっとイジったカスタムも今後書いていくので良かったら参考にでもして下さい。写真ネタの無い時に書いていくシリーズでもある。

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。