【ブログ】見出しに色をつけて目立たせる方法/wordpressでcss編集

ブログを始めて約2週間が経ちました。

頑張って毎日更新しています。ある程度記事が溜まったらリライト予定です。

＜スポンサードリンク＞

ブログ作りをはじめて
テンプレートが違うから？
テーマ編集にcss編集があった
1. ①外観＞テーマの編集
2. ②付随のCSSエディター
見出しを目立たせる
見出しを目立たせてみました
見出し2
見出し3
1. 見出し4
word pressを使ってみた感想
（おまけ）localhostはxampp使用

ブログ作りをはじめて

現在のブログはword pressを使用して作っています。

テーマは無料のHueman

私は以前、webシステムの開発にも携わっていたので

そこそこwebサイトの仕組みのことをわかっていると思っていました。

ですが、このブログを始めて

あまりにも初歩的なことがわかってなかったことに気付きショックを受けました・・

ということで、自分がわからなかったやり方等はちゃんと調べてメモを残していこうと思います。

タイトルにある「見出しに色を付けたり目立たせるやり方」は、最後の方に書いてありますので

よろしければご覧ください。

テンプレートが違うから？

さて今回この記事を書き始めるきっかけとなったのは、

他の人のブログを見ていて（アメブロなどの無料ブログではなく）

見出しにラインが引いてあったり、

背景色がついていたりと

これがることでとても見やすくなっているな～と思ったからです。

でも私のエディタにはそんな機能がないし、

テンプレートによってできるものできないものがあるのかな、と思っていました。

ですがあるサイトを見て気が付きました。

wordpressでcssのカスタマイズが出来るということに…！

※cssとは・・

スタイルシートといい、見栄えをよくする為どういう装飾をするかを指示するシートのことです。

テーマ編集にcss編集があった

テーマの編集画面で、そのテーマのテンプレートを作っている各ファイルがあることは知っていましたが、

それを編集しようとするとアラートが出るので、いじれないのかと思っていました。

ですが、ありました。

一番上に、付随のcssというものが！

完全に見落としていました。

①外観＞テーマの編集

②付随のCSSエディター

※テーマによっては出方が違うかもしれません

ここをクリックしたら、まっさらなcss編集画面が出てきて、ここで好きなようにカスタマイズできるようになっていました。

出来るとわかったらあとはやるだけです。

見出しを目立たせる

早速かいていきます。

今回はとりあえず見出しだけを変えていきます。

あまり凝ったものは使わないと思うので、シンプルなものだけをピックアップ

線で囲む

見出しサイズ{ border: 線の種類　線の太さpx 　色番号;}

h1 { border: inset 3px #0000ff ; } 　　/*上と左が暗く、下と右が明るく表示で立体的に見える*/
h2 { border: solid 3px #0000ff ; } 　　/*1本線*/
h2 { border: double 3px #0000ff ; } 　/*2本線*/
h3 { border: dashed 3px #0000ff ; }　 /*点線*/
h4 { border: dotted 3px #0000ff ; } 　/*点線2*/

下線

見出しサイズ{ border-bottom: 線の種類　線の太さpx 　色番号;}

h1 { border-bottom: groove 3px #0000ff;}　 /*歪み1本線*/
h2 { border-bottom: solid 3px #0000ff;} 　　/*1本線*/
h2 { border-bottom: double 3px #0000ff;} 　/*2本線*/
h3 { border-bottom: dashed 3px #0000ff;} 　/*点線*/
h4 { border-bottom: dotted 3px #0000ff;} 　/*点線2*/

背景色など

見出しサイズ{ border-bottom: 線の種類　線の太さpx 　色番号;}

h1 { background: #0000ff; border-radius: 0.5em ; } /*背景色で角丸*/
h2 { /*背景色　文字色　角丸*/
background: #0000ff;
color: #ffffff;
border-bottom-right-radius: 1em;
border-top-left-radius: 1em;
}
h2 {/*ドット*/
background-color: #ff69b4;
background-image: radial-gradient(#eee 10%, transparent 20%), radial-gradient(#eee 10%, transparent 20%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;}
h3{/*斜めストライプ*/
background:repeating-linear-gradient(45deg, #ff69b4 0, #e79901 10px, #0000ff 10px, #e2e7eb 20px);
}
h4 { /*グラデーション*/
background-color: #ff69b4;
background-image: linear-gradient(0.1turn, #0000ff, #ffffff, #008080);
}