カスタマイズ

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

蛍光ペン マーカー




どーも、ブログはWordPressを使用中の美容師ハッタさんです。

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

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

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

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

ビジュアルエディタ

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

今回行ったことは『CSSとHTMLで文字に蛍光ペンを引いたようなカスタマイズ』です。

 

 

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

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

こんな感じです

これを3色

ピンクライムウォーター

で作ってみました。

これをどうやって設定するのか?その設定方法が以下。

 

コピペでOK!CSSをスタイルシートに記入

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

CSS

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

以下にCSSとHTMLを記載しておきますので、コピペして使用してください。

 

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

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

 

ピンクの蛍光マーカー

 

result

ピンクの蛍光マーカー風

 

ライムの蛍光マーカー

 

result

ライムの蛍光マーカー風

 

水色の蛍光マーカー

 

result

水色の蛍光マーカー風

 

蛍光マーカー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>に変更して問題ありません。

このように表示されます

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

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

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

 

蛍光マーカーのCSSカスタマイズ:まとめ

csshtmlを使ったカスタマイズ

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

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

ただし、必要以上にマーカーを使用しすぎると大事なポイントがわかりにくくなることと、色を多用してしまうとうるさいサイトになってしまうのでできれば1ページにつき1色、もしくは同ジャンルの文章に同じ色を使用するようにしてください。

読者目線での文章作成がブログでいちばん大切なことです。

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

最近ではWordPressのテーマに蛍光マーカーを最初から用意してあるcocoon(無料テーマ)・STINGER(有料)・AFFINGER(有料テーマ)というものが配布されているので、そちらを選択するのも一つの手かと思います。

 

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

 

おしまい

合わせて読まれる記事

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

ハッタさん

美容師として働きながらWEBの勉強をしております。

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

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

プロフィール詳細はコチラ

Twitterのフォローもお待ちしてます。

-カスタマイズ
-, ,

Copyright© HH-STYLE.COM , 2019 All Rights Reserved.