蛍光ペン マーカー

カスタマイズ

蛍光ペンで線を引いたようなCSSカスタマイズをする方法

投稿日:

どーも、B容姿美容師ハッタさん(@hatta_tweet)です。

WordPressでブログを書くためにいろいろなカスタマイズを行いますが、オレみたいな素人がphpなんかをいじったりするようなカスタマイズは決してできません。

変わったことはしたいけれど失敗すればエラーが起きてWordPress自体が動かなくなる危険もあります。

なのでデザインをちょこっと変えたりするくらいでいいのですが、見栄えを良くしたり読みやすくするための工夫はしたいもの。

このようにビジュアルエディタがあるので

ビジュアルエディタ

文字を大きくしてみたり太字にしたり色を変えたり大抵のことはできますが、基本的なこと以外はできないのでそこはやはりCSSをいじってカスタマイズをしてみるということです。

今回行ったカスタマイズは

蛍光ペンを引いたようなカスタマイズ

蛍光ペンを〜とは言いますがどんな感じか?

こんな感じです

これを3色

ピンクライムウォーター

で作ってみました。

これをどうやって設定するのか?

WordPressの管理画面から「外観」→「テーマの編集」→「style.css」で

CSS

この画面まで行き必要なCSSを入力します。

 

蛍光ペン風に仕上げるためには《linear-gradient》を使う

自分自身もCSSの関数やプロパティと言われてもさっぱりわかりませんが、ネットで調べていくとほぼほぼこのlinear-gradientが使われていたので同じように使います。

ピンク

CSS

.marker_pink {
background: linear-gradient(transparent 50%,#f8bbd0 80%);
}

HTML

<strong class="marker_pink">ピンクの蛍光ペン風</strong>

ピンクの蛍光ペン風

黄緑のライム

HTML

.marker_lime {
background: linear-gradient(transparent 50%,#c6ff00 80%);
}

HTML

<strong class="marker_lime">ライムの蛍光ペン風</strong>

ライムの蛍光ペン風

水色のウォーター

HTML

.marker_water {
background: linear-gradient(transparent 50%,#80deea 80%);
}

HTML

<strong class="marker_water">ウォーターの蛍光ペン風</strong>

ウォーターの蛍光ペン風

 

このCSSのいじり方

.marker_pink {
background: linear-gradient(transparent 50%,#f8bbd0 80%);
}

この()内の

(transparent 50%,#f8bbd0 80%)

50%と80%を変えるとどうなるか?

例えばわかりやすく

.marker_pink {
background: linear-gradient(transparent 10%,#f8bbd0 0%);
}

50%→10%と80%→0%にした場合は

このようにラインが太くぼかしがなくなります

左の数字が上のtransparent(色の初期値、透明)の高さを決めます。上からどのくらいの高さまでtransparentにしてどこから#f8bbd0を反映させるかを決めます。

右の数字はグラデーション(ぼかし)の具合を決めるので0%ならぼかしなしで、100%なら下までグラデーションをかけます。

詳しいlinear-gradient()の使い方は

参照元HTMLクイックリファレンスをご覧ください。

グラデーションを斜めにしたりすることができます。

色を変更したいときはあんまりバラバラになるような色選びをしてしまうとブログの雰囲気が壊れてしまいますので

参照元https://www.materialui.co/colors

こちらを参考にしてみてください。

 

ちょっとまて!太字必要?

見ていて気づいた人もいるかもしれませんが、この蛍光ペン風なマーカーは太字にしてあります。

理由としては『強調したい部分に目立つマーカーを引く』からです。

大事な部分なのでちゃんと読んでほしい箇所ですよと伝えてるための強調。だから<strong>タグをつかてclass属性でカスタマイズしています。

こんなに乱用する必要はないのですがせっかくなので使ってみました。

もし太字が必要でないのであればインライン要素として<strong><span>に変更して問題ありません。

このように表示されます

若干ですが比べると貧弱な感じがあります。

この辺はお好みで装飾していただければなと思います。

もしくは心配な人は両方用意しておけばバッチリではないでしょうか?

ただ管理が面倒なので片一方にすることをお奨めします。

 

まとめ

一度設定してしまえばあとはHTMLに記入すればいいので入れておいて損はないと思います。

入れておくと使用頻度はおのずと上がるでしょうし、強調ポイントがハッキリするので何かを伝えるということに関してはより伝わるはずです。

ビジュアルエディタでWordPressを運用しているとタグを打つのが面倒だと思うのでそういった人や初心者はプラグインのAddQuicktagを利用するとブログ作業が捗りますよ。

では、快適なブログライフを。

 

 

おしまい

 

よく読まれる記事

  • この記事を書いた人
  • 最新記事

ハッタヒロユキ

新潟県に生まれ美容師として働きながらWEBの勉強をしております。

自分のお店のホームページと自分のブログをメインに扱い、こっそりと違うサイトを作ってます。

自社サイトやブログを立ち上げたい時には是非ご相談ください。

http://llacitta.com

-カスタマイズ
-, ,

Copyright© ハッタブログ , 2017 All Rights Reserved.