WordPress初心者がh1~h3タグの変更に挑戦してみた。

「Simplicity」の見出しタグって、シンプルで使いやすいですけど、なんというか、なんとなく殺風景になりがちですよね。そこで、見出しタグh1~h3の変更に挑戦してみました。(h4~h6はあまり使わないので変更していません)

before
タグbefore
after
タグafter
ガラッと印象が変わりました☆

スポンサーリンク

子テーマを使ったCSS変更のやり方

ワードプレス編集
まず、左側のリストを使って、「外観」から、「テーマの編集」へ行きますよ。



子テーマをインストールし、有効化しておく

「親テーマ」で直接変更してしまうと、アップロードの際に消えて元に戻ってしまうので、子テーマを有効化して作業します。子テーマの有効化は、CSSを書き換えて保存した後でもいいのですが、WP初心者の方は初めにやっておいた方が無難です。子テーマを開くと、初めに下のようなCSSの画面になります。ここに、CSSを変えたいところだけ記述します。
ワードプレス子テーマCSS

子テーマのCSSに親テーマのh1~h3ダグの記述をコピペ

親テーマのCSSから、h1~h3タグについての記載がある部分をコピーし、子テーマに貼りつけます。
ワードプレス親テーマCSS

ワードプレス親から子へ 親テーマの記載はすべてコピペするのではなく、変えたいところだけ書きましょう。

CSSを変更

子テーマのCSSを変更します。簡単なのは、線の色や、文字の大きさの変更。

もっと装飾をつけたい場合には、自分で考えるのは難しいので、専用のサイトを探した方がいいです。(下記参照)

保存して確認

保存して、CSSが反映されているか確認します。h1~h3まで一気に変えてしまうのではなく、1か所変えたら保存とやっておくと、「もうちょっとここを変えたいな」ってときに直しやすいです。


見出しタグ装飾の参考サイト

CSSって調べ始めるときりがないですし、自分じゃなかなか思い通りのものが作りにくいですよね。そこで、私は、下記のサイトを参考にさせていただきました。

H1・・・Webクリエイターボックスっぽい見出し

TIYUNOTOさんで紹介されていたのですが、四角がかわいいので、採用させてもらいました。
ウェブクリエイターっぽい見出し
色や四角の大きさなど、微調整して使わせてもらっています。
ネタ元のWebクリエイターボックスさんは、WEBのカラーデザインについて詳しく解説しているサイトです。

H2・・・WEB道

吹き出しやリボン型の見出しを簡単に作れるWEB道さん。吹き出しの色や影、中の文字の色や大きさも指定することができて便利です。
WEB CSSに書き写す際には、「sample2」を「article h2」に書き換える必要があります。

H3・・・スタイルシート見出しメーカー

色を4色指定すると、10種類の見出しを作ってくれるスタイルシート見出しメーカーさん。その中から気に入ったものをコピーして、h3{ }の中に書き込めばOKです。
見出しメーカー

スポンサーリンク

フォローする

コメント

  1. pet より:

    ここと同じH1のを使いたくて設定してみたのですが、上の方の□だけ消えてしまいました><
    なぜでしょうか><

    • upa*mi より:

      petさん、コメントありがとうございます。

      私も、いろいろな方のブログを見よう見まねでやっているので詳しいことは分からないのですが、

      上の◇と、下の□は、別々に設定しています。

      こんな感じです↓
      .article h1 {
      border:none;
      position: relative;
      color: #000;
      font-size: 28px;
      font-weight: bold;
      margin: 0 0 1.5em;
      padding: 0.5em 0.5em 0.5em 1.7em;
      border-bottom: 5px solid #2476bf;
      }

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

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

      }

  2. Beer より:

    初めまして!
    そろそろデザインを変更してみようと見出しのデザインから変更したいと思いこちらの記事を参考に恐る恐るやってみました!
    無事変更出来ました。
    ありがとうございますm(_ _)m