見出しのデザイン変更・強調文字を蛍光マーカー風に設定

wplesson

このブログで実際にやってみた初心者向けWP(WordPressテーマはSimplicity)カスタマイズメモ。

  1. 見出しのデザイン変更
  2. 強調文字を蛍光マーカーみたいにする設定

見出しのデザイン変更

以前に更新していたはてなブログのときに、見出しをプチプチカスタマイズしていたのですが、それと同じタイプにしたくてようやく見つけました!
ちゆのさんのブログ見出しのデザイン変更)を参考にさせていただきました。ありがとうございます♡

.article h3{
border:none;
position: relative;
color: #000;
font-size: 26px;
font-weight: bold;
margin: 0 0 0.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
border-bottom: 3px solid #ffd700;
}

.article h3:before{
content: “”;
position: absolute;
background: #ffa500;
top: 0;
left: 0.4em;
height: 12px;
width: 12px;
transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}

.article h3:after{
content: “”;
position: absolute;
background:#f0e68c;
top: 1.0em;
left: 0;
height: 8px;
width: 8px;
transform: rotate(15deg);
-moz-transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-o-transform: rotate(15deg);
-ms-transform: rotate(15deg);
}

サンプルコードでは見出し2(h2)のカスタマイズでしたが、私は見出し3(h3)として適用しました。
赤文字のところは、もともとのサンプルは1.5emだったのですが、0.5emに変更しました。見出し下線部の下の余白が少し気になったので。ひし形と下線の色はそれぞれの#~~~~の部分に好きな色を指定するだけ♡色見本はWEB色見本 原色大辞典からどうぞ♡

強調文字を蛍光マーカー風に

文字の強調(Bold)って、ほんまに強調したいときだけ使うので、日常生活でも使いまくっている蛍光マーカーみたいにしたくて…。
@ottaka18さんのブログ(【第4回】初心者の私でもできた「Simplicity」のカスタマイズ(其の壱))を参考にさせていただきました。ありがとうございます♡

strong {
background: linear-gradient(transparent 40%, #ffff00 40%);
}

こちらも同じく、#~~~~の部分を好きな色に変更するだけ。
色見本はWEB色見本 原色大辞典からどうぞ♡

今日のふりかえり

カスタマイズした箇所が、スマホでの表示にも対応していて嬉しいな♡
引き続き、ちょこちょこプチプチやっていきます。

っていうかね、寒くてコタツでブログ更新してるねんけど、くうちゃんがくっついてくるから、嬉しいけどすごく時間かかったわ。笑

C360_2015-11-18-20-25-19-995


The following two tabs change content below.
オカダマキコ
40歳で初の自動車業界へ転職。主にマーケティングとロジスティックを担当しています。ほぼ年下の先輩方のご指導のもと、楽しく「くるま屋さん四年生」やってます♡プライベートではふたりの息子&ミニチュアピンシャーの女の子と一緒に大阪の東のほうで暮らしています。シングルマザー歴17年超。プロフィールはこちら
オカダマキコ

最新記事 by オカダマキコ (全て見る)