【Word Pressブログ】追加CSSでの見出しデザインの変更方法【PORIPU】

今回の内容は、SANGOの公認子テーマである「PORIPU」を利用している方向けの記事です。

見出しのデザインを少し追加して見たので、そのやり方を解説していきます。

僕自身、初めて購入した有料テーマが「SANGO」で、さらに拡張性を持たせる意味で「PORIPU」という子テーマを追加で購入しました。

テーマについては、こちらも合わせてご覧下さい。

記事の内容

PORIPU活用者へ送る、追加CSSでの見出し追加について解説

まず、追加CSSとは？という方向けに、簡単に説明します。

「PORIPU」では、見出し等のデザインを追加したいと思った際、CSSコードを入力すると、簡単にそれらを追加することができます。

「あ、この見出し素敵だな」と思ったら、それを追加して自分のブログでも使えるのは魅力ですよね。

早速見ていきましょう。

追加CSSでの見出し追加

それでは、見出しを追加していきます。

今回活用するのは、サルワカさんのサイトです。

この中から好きなデザインを探していきます。

こちらのサイトですが、実に様々な見出しが用意されています。

その中でも、今回一番気になったデザインを追加していきましょう。

追加デザインの流れ
1.サイトから、お気に入りのデザインの見出しを見つける
2.見出しのCSSコードをコピーする
3.WordPress内「追加CSS」にペーストする

このような流れで追加します。

まずは、サイトの中で気になった見出しデザインのCSSコードをコピーします。

今回気に入ったのがこちら。

次に、赤枠部分を開いてコードを確認します。

コードを確認したら、こちらを全て選択してコピーします。

次に、サイトをカスタマイズし、「追加CSS」をクリックします。

追加CSSの中に入ったら、こちらの空欄部分に先ほどコピーした内容をペーストします。

ペーストした後のイメージがこちら。

このようなイメージです。

今回は、<見出し3>に追加したいと思い、「h1」を→「h3」に変更しております。

また、タイトル以外の、本文だけにこの見出しを適用したいので、

「.entry-content」という文字列をそれぞれのブロックの先頭部分に追加しております。（1行目と10行目）

うまくペーストできたら、「公開」ボタンを押して完了です。

さっそく反映されているか見てみましょう。

試しに「テスト」と入力し、プレビュー画面で見てみます。

すると、このような形で先ほど追加した見出しが出てきました！

これでまた自分の好きなデザインで記事が書けると思うと、気持ちも高まりますね。

いかがでしたでしょうか？

今回は、見出しデザインの追加方法について解説していきました。

「PORIPU」は、そのデザインの拡張性の高さ、そして簡易性において優れているので、有料テーマで悩んでいる方にはおすすめです。

ぜひ試して見てくださいね。

今回の内容は以上です。