Simplicityで見出しのデザインを変える方法

Simplicityのデザインはそのままだとシンプルで、ちょっと味気ないですよね？

特に記事の見出しはブログのデザインに大きく影響してしまいます。

ブログのレイアウトがずさんだと、それだけ訪問者が逃げてしまうので少し手を加えたいところです。

しかし、見出しのデザイン変更はWordPressが初めての方、ブログが初めての方には少し難しいと思うので今回はSimplicityの見出しのデザインの替え方について紹介していきます。

見出しを変える方法

まずは、「外観」→「テーマの編集」を開きます。

すると、下の画像のようなページが表示されます。

ここにプログラミングコードを書くことで、見出しのデザインを変えることが出来ます。

「うわっ、そんなのムリ！」と思うかもしれませんが、大丈夫です。

カンタンなデザイン変更であれば、特にプログラミングコードを覚える必要はありません。

これから紹介する手順に沿ってコードを貼り付けるだけでOKです！

デザイン・コードはサルワカさんの記事を参考に致しました↓

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

デザインを選ぶ

ここでは、よく見る見出しのデザインをいくつか紹介していきます。

下に書かれているコードを使う事で、デザインを変更させることが出来ます。

下で書かれているコードは見出し2を変更させるものです。

左ライン

●コード

.article h2 {
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #494949;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #7db4e6;/*左線*/
}

左ラインと背景色

●コード

.article h2 {
    padding: 0.5em;/*文字周りの余白*/
    color: #494949;/*文字色*/
    background: #fffaf4;/*背景色*/
    border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
}

吹き出し風

●コード

.article h2 {
  position: relative;
  padding: 0.6em;
  background: #e0edff;
  border-left: none;
}

.article h2:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
  width: 0;
  height: 0;
}

折り返すリボン

●コード

.article h2 {
   position: relative;
   padding: 0.5em;
   background: #a6d3c8;
   color: white;
   border-left: none;
}

.article h2::before {
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155);
}

角丸のシンプルな四角

●コード

.article h2 {
    border: none;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 1rem;
    margin-top: 1.8rem;
    margin-bottom: 1rem;
    color: #fff;
    background: #ffa500;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 40px -29px 20px;
    margin-left:3px;
    margin-right:3px;
}