【simplicity】見出しタグをカスタマイズ。h2,h3,h4を色変更でブログをあなた色に染める

写真1
スポンサーリンク

こんにちは。浜屋はまやん(@hamayan8080)です。

最近、超便利、高性能、無料のワードプレスのテーマ「simplicity」。無料ブログより簡単に使えるこのテーマ、よく見るようになりました。

simplicityの初期設定はかなりシンプルな色になっています。少しでも他のサイトと差別化するためにあなた色にブログをカスタマイズしませんか?

見出しタグのカラーを変更してビジュアルにインパクトを残したい。当サイトで行っているカスタマイズ方法です。

子テーマの変更だけで完了できます。コピペオッケーなんでぜひ♪

カスタマイズに伴う準備

simplicityの子テーマをダウンロード → 有効化 します。子テーマに関してはsimplicity公式サイトを参照して下さい。

子テーマを有効化したあと、外観 → テーマの編集 の「スタイルシート (style.css)」にCSSをコピペします。

記事内のタグの変更

h2タグのカスタマイズ

h2タグはインパクト重視。濃い目のカラーに白抜きの文字にしました。

見出し222
.article h2 {
  background-color: #1eae93;/* 見出し背景色 */
  border-left: 0 none;
  color: #fff;/* 文字の色 */
  padding: 15px 30px;/* 文字の位置 */
    margin-bottom: 35px;/* 見出し下の空白*/
}

h3タグのカスタマイズ

h3タグはh2タグを目立たせたいので薄い線にしました。

見出し333
.article h3 {
    border-bottom: 10px solid #b5f2e7;
    padding: 10px 0 0 0;
    margin-bottom: 30px;
}

h4タグのカスタマイズ

h4タグはわたしのサイトのテーマカラーでワンポイントのアクセントにしました。

見出し444
.article h4 {
    border-left: 30px solid #b5f2e7;
    border-bottom: 0px;
    padding: 5px 0 5px 10px;
    margin-bottom: 30px;
}

サイドバーの見出し変更

サイドバーは少し遊んでみました。

カテゴリー
#sidebar h4 {
    position: relative;
    color: #444;
    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 #0cdfb9;
}
 
#sidebar h4:before{
    content: "";
    position: absolute;
    background: #0cdfb9;
    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);
}
 
#sidebar h4:after{
    content: "";
    position: absolute;
    background:#0cdfb9;
    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);
}

見出しタグ変更に関する Q&A

Q. CSSを変更したのにブログに反映されないんですけど?

わたしはあまり詳しくないのですが、下記の方法で大体解決します。

履歴を消す

観覧履歴の消去を行うとCSSを変更が反映されます。

理由はよくわかりません。cssを変更後、変更を確認したい場合は毎回観覧履歴の消去を行ってみてください。

!importantをつける

観覧履歴の消去でも反映されない場合は語尾に「半角スペース!important」をつけると反映されると思います。!importantがつくと、コレが優先っていう意味です。

【例】 margin-bottom: 30px !important;

Q. 見出しタグの下の空白が空きすぎてイヤなんですけど?

当ブログはシンプリシティのデフォルトの設定より文字間の空白を多く取ってます。

margin-bottom:が見出しタグ下の空白の量になります。pxの前の数字をあなた好みに調節してください。

【例】 margin-bottom: 30px; ⇒ margin-bottom: 10px;

Q. こんな色はうちのブログに合わないんだけど?

「#6ケタの文字」の部分が色を表します。ここを変更するとあなた好みの色に変更できます。

【例】 background-color: #1eae93; ⇒  background-color: #ffa500; 

色に関してはコチラのサイトが参考になります。

Q. もっと違う見出しデザインはないの?

もっと別の見出しデザインにしたいと思うあなたにオススメのサイトはコチラ。17種類の見出しデザインが一覧になっております。

わたしも参考にしております。

はまやんのまとめ

元のphpをいじってカスタマイズするのは難しいけど、CSSのカスタマイズは簡単にできます。

どんどんブログにあなたの色を出していきましょう。

スポンサーリンク