SANGO・PORIPUの見出しh2をカスタマイズして目立たせよう！

2018年10月17日2024年6月27日

当ページのリンクには広告が含まれています。

こんにちは！ひでさんです！

ひでさん

こちらは、ワードプレスSANGOのカスタマイズの記事です。

現在、ぼくはSANGOに有料子テーマであるPORIPUを導入して使っています。

先日、思い立って

「h2の見出しを変更したいな~」

「見栄えをよくしたいな~」

と、PORIPUの設定項目を探したのですが、簡単に変更できる設定はありませんでした…。

そこで、自分でカスタマイズすることにして、

SANGOのカスタマイズガイドと、サルワカを参考にしてCSSをいじり、無事見出しのデザインを変更することができました！

h2の見出しを変更したので、現在はこんな感じになってます！

さとみん

可愛らしい感じになってますね！

しかし、カスタマイズというと…

「な、な、な…CSS！？」ブルブルブル…(-_-;)

「聞きたくも、触りたくもない！！」

…という人も多いでしょうが、思い切ってやってみるとそんなに難しくありません。

もし、勇気が出るなら、この機会にチャレンジしてみてください。

ぼくも、最初はとてもとてもCSSなんて触ることはできませんでした。

ネットの情報も「このコードをスタイルシートにコピペするだけです！」（ドヤァ）

とか書いてあるだけで、初心者は豪快に突き放されるばかり。

だって、初心者は…

「いや、そもそもスタイルシートってどこ？」

「なんとかスタイルシートに来たけど、その中のどこに貼りつければ…？？」

ということだらけですもの。

今回はそんな、当時のことを思い出しながらカスタマイズに勇気が出ないあなたに向けて、丁寧に書いてみたいと思います。

ぜひ、この記事を参考に、新たなるワードプレスの一歩を進めてみてください！

MEMO

PORIPUを使っていますが、通常のSANGOであっても同じ方法で見出しの変更が行えるので、参考にしてみてください。

※コードをペーストする位置が違います。

タップできるもくじ

見出し（h2）をカスタマイズしよう！

注意

CSSを編集するので、ワードプレスのバックアップを取って下さい！

まずは、ワードプレス内のさわる場所を覚えましょう。

目指すところは、「テーマの編集」の「スタイルシート（style.css）」です。

ワードプレスで、テーマの編集を開く

ワードプレスの管理画面で、「外観」→「テーマの編集」とクリックしましょう。

画面右の項目が「スタイルシート（style.css）」になっていることを確認します。

なっていなければ、クリックして「スタイルシート（style.css）」にします。

赤枠で囲んだところにコードをコピペ&少し修正するのが今回のゴールです。

さとみん

今回はここを目指すわけですね！

『SANGO』カスタマイズガイドのページを開く

つづいて、コピペするコードをサルワカのページからコピーしてきましょう！

「SANGOカスタマイズガイド」を開き、ページ内にある「サルワカ」の記事のリンクをクリックします。

記事のリンクは下記に置いておきます。

▼リンク＞＞＞SANGOでデフォルトの見出しを変える方法

記事の前半部分にサルワカへのリンクがあります。画像を参考に。

変更する好きなデザインを選ぼう！

今回は縫い目のような点線がおしゃれな「ステッチ風」のデザインに変更します。

割と文字が目立つので、これを選びました。

ひでさん

ここで、自分の好みのデザインを選ぶといいです。

コードが2段階になっているものは？

好きなデザインの中にはコードの中にh1が2つ書かれている2段階になっているものがあります。後半に補足で説明しているので、参考にしてください。

コードを表示させる

デザイン見本の下にあるオレンジ色の「✓コードを表示」というボタンをクリックして、コードを表示させます。

このコードを選択して、コピーしましょう。

ただ、全てコピーしてしまうと、有料子テーマPORIPUの場合には、いらない部分が出てきます。

最後にはいらない部分は消してしまうので、PORIPUの場合は

h1とカッコの後にある

コード

background: #dfefff;

・・・というコードの部分からのコピーでいいでしょう。

ただし！

SANGOの場合と、SANGO子テーマの場合は途中からのコードではなく、全てのコードを貼り付ける必要があります。

また、先頭が「h1」になっていますので、張り付けたのち必ず「h2」に変更するようにしましょう。

注意

間違いやすいのですが、必ずh1からh2に変更しておきましょう。（PORIPUの場合はコードの途中からコピーするので、関係ありません。）

ワードプレスへ戻り、style.cssの赤枠内へコードを張り付ける

この赤枠内に、コードを張り付けましょう。

場所は以下を参照してください。

実際に張り付けたものがこちら。

場所は18行目の

コード

.entry-content h2{

…という部分の後（19行目）に貼り付けます。

※行数は参考程度に見ておいてください。

「カッコ閉じる」までコピーした場合はカッコが重複するので、バックスペースキーなどでひとつだけ消去しましょう。

ちなみに、SANGOとSANGOの子テーマでは、

スタイルシート（style.css）の一番下にコードを貼りければいいはずです。（確認できてないのですが…）

場所は、下の画像を参照してください。

補足：コードが2段階になっているものはどうするの？

気に入ったデザインの中には2段階に渡ってコードが表記されているものがあります。

この場合は…

帯（リボン風）のh2見出しコードの例

.entry-content h2{
position: relative;
padding: 0.5em;
background: #a6d3c8;
color: white;
}
.entry-content h2::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px rgb(149, 158, 155);
}

…という風に、h1の部分をh2にして、「.entry-content」をh2の前に加えてあげるといいです。