【WordPress】見出しの変更 H2タブを変えました【CSS編集】
H2タブの見出しを変えることでサイトが見やすくなりました！
その方法を書いておきます。
←↓そうそうこんなやつ！
この記事は備忘録として書いています。
もし同じようなことで困っておられる方の参考になれば幸いです。
スポンサードリンク
『WordPressの見出しが寂しい』
そう感じました。
ただのデカイ文字に下線をつけただけでしたので。
どうしたら簡単に見出しを見やすくできるだろう？
といろんなサイトにお邪魔しましたが、
HTMLとかCSSとかに詳しくないので難しいです。
いきなり色んなことを見てもできっこないんですよね、僕。
やっと見つけたのがこちらのサイト。
初心者ブログ様。
わかりやすくて参考になりました！ありがとうございます！
この記事の見出し６を採用させていただきました。可愛いですし。
|
/* h6見出し */
h6{
position: relative;
color: #111;
font–size: 1.143em;
font–weight: bold;
margin: 0 0 1.5em;
padding: 0.5em 0.5em 0.5em 1.7em;
border–bottom: 3px solid #0ba36e;
}
h6:before{
content: “”;
position: absolute;
background: #0ed6af;
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);
}
h6:after{
content: “”;
position: absolute;
background:#0ba36c;
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);
}
|
↑これをコピーして、
「外観」→「CSS編集」の一番下に貼り付け！
あと僕はH2タブに利用したかったので、
『H6』となっている所を『H2』に書き換えればOKでした！
緑のところを変えることで、自分の好きな色にも変えられます！
僕は紫にしましたよ★
CSS編集で保存してしまえば、
記事内で「見出し２」を使えば勝手にこうなってくれます。簡単！
こんな感じになっちゃう
↑左の四角マークと被ってしまうので、最初にスペースを入れることをお勧めします。
簡単にできるのは素晴らしいこと。
でももっと勉強しなきゃなーと感じる管理人でした。
ランキング参加中ポチッとお願いします。
おすすめ記事
コメント
この記事へのトラックバックはありません。
この記事へのコメントはありません。