【ブログ】見出しに色をつけて目立たせる方法/wordpressでcss編集
ブログを始めて約2週間が経ちました。
頑張って毎日更新しています。ある程度記事が溜まったらリライト予定です。
＜スポンサードリンク＞
ブログ作りをはじめて
現在のブログは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本線*/ h3 { border: double 3px #0000ff ; } /*2本線*/ h4 { border: dashed 3px #0000ff ; } /*点線*/ h5 { border: dotted 3px #0000ff ; } /*点線2*/ |
下線
見出しサイズ{ border-bottom: 線の種類 線の太さpx 色番号;}
h1 { border-bottom: groove 3px #0000ff;} /*歪み1本線*/ h2 { border-bottom: solid 3px #0000ff;} /*1本線*/ h3 { border-bottom: double 3px #0000ff;} /*2本線*/ h4 { border-bottom: dashed 3px #0000ff;} /*点線*/ h5 { 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; } h3 {/*ドット*/ 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;} h4{/*斜めストライプ*/ background:repeating-linear-gradient(45deg, #ff69b4 0, #e79901 10px, #0000ff 10px, #e2e7eb 20px); } h5 { /*グラデーション*/ background-color: #ff69b4; background-image: linear-gradient(0.1turn, #0000ff, #ffffff, #008080); } |
他にも様々な指示を加えれば、形も色も自由に変えられるので
自分のブログの雰囲気にあった見出しに変えてみてください。
cssで検索すると、書き方はたくさん出てきます。
見出しを目立たせてみました
ということで、このブログの見出しはこのようにしてみました。
見出し2
見出し3
見出し4
これで少しは見やすくなったかなと思います。
word pressを使ってみた感想
実はword pressを使うのは初めて。
相当昔、テキストエディタに直接html書いてサーバーに置いて…
というやり方でwebサイト（当時はホームページと言っていました）を作ったことはありました。
なのでwordpressを使って、ツールを使ってこんなにも簡単に綺麗なサイトが作れることに驚きました。
使い勝手は、ある程度直感的に作業ができるUIなので無料のブログサービスに近いかもしれません。
今回は本当に初歩的なことでしたが、
wordpress、webサイト作りは奥が深いので
またわからないことが出てきたらどんどん調べてどんどんまとめて、
同じように悩んでる方に届けばいいなと思います。
＜スポンサードリンク＞
（おまけ）localhostはxampp使用
cssの確認をする為に、家のPCにxamppでlocalhost環境を用意しました。
localhostのディレクトリを忘れそうなのでメモ。
apacheのconfig＞Apache(httpd.conf)に記載されている
DocumentRoot “C:/xampp/htdocs”
これがlocalhostのディレクトリ
＜スポンサードリンク＞
***************************************
↓ランキング参加しています！１日1ポチ☆
