【WordPress】見出し調整

見出しのデザインをカスタマイズしたくて調整してみました。

※これを対応するには多少CSSの知識が必要です
CSSを勉強するなら下記のサイトから動画で勉強できます。
https://dotinstall.com/lessons/basic_css_v4

もし初めて触る方はバックアップを取ってから修正することをおすすめします。

使っているテーマはStart Magazineです。

修正対象ファイル

wp-content/themes/start-magazine/style.css

見出し2 H2の設定

↑↑こんな感じに設定しました。

設定方法
style.cssの一番最後に下記のコードを追加

h2.article_content {
  position: relative;
  background: #dfefff;
  box-shadow: 0px 0px 0px 5px #dfefff;
  border: dashed 2px white;
  padding: 0.2em 0.5em;
  color: #454545;
}

h2.article_content:after {
  position: absolute;
  content: '';
  left: -7px;
  top: -7px;
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #a8d4ff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
}

WordPressで記事を書くときは見出しをHTMLモードにしてh2にclassを設定する必要があります。

<h2 class="article_content">見出し2 H2</h2>

↑こんな感じですね。

見出し3 H3の設定

↑↑こんな感じに設定しました。

設定方法
style.cssの一番最後に下記のコードを追加

h3.article_content {
  position: relative;
  padding-left: 30px;
}

h3.article_content:before {
  position: absolute;
  font-family: "Font Awesome 5 Free";
  content: "\f121";
  background: #c9e2ff;
  color: #153c6e;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

WordPressで記事を書くときは見出しをHTMLモードにしてh3にclassを設定する必要があります。

<h3 class="article_content">見出し3 H3の設定</h3>

↑こんな感じです。

以上見出しの設定方法でした。

今回見出しを考える上でCSSを参考にしたサイトが下記になります。

いろんなデザインがあって非常に参考になりました。

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選