どうもこんにちは、りゅう(@ryuta_blog)です。
JINの見出し3「タイプ3」をカスタマイズしてみました〜!


角丸をとって線を細く長くしてみました。
かっちりした印象が好きな方はぜひどうぞ!
早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。
JINをカスタマイズする前に!
- カスタマイズする前はなるべくバックアップをとっておいてください。
- カスタマイズは必ず子テーマから行ってください(親テーマを編集してしまうと、アップデートした際にカスタマイズが全て消えます)。
▼子テーマを導入していない方は、以下からダウンロードしましょう。
▼子テーマって何や?という方はまずは下記を読みましょう。
⇒WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

【JIN】見出し3「タイプ3」のカスタマイズ
style.cssに以下のコードを追加してください。
/*========================================
h3 タイプ3のカスタマイズ
========================================*/
@media (max-width: 767px) {
.h3-style03 h3 {
padding: 14px 15px; /*線の長さを調節する*/
}
}
@media (min-width: 768px) {
.h3-style03 h3 {
padding: 16px 20px; /*線の長さを調節する*/
margin-top: 1rem;
margin-bottom: 1rem;
}
}
.h3-style03 h3:before {
width: 4px; /*線の太さを調節する*/
border-radius:0; /*角の丸みを調節する*/
}
@media (max-width: 767px) {
.h3-style03 h3:before {
width: 4px; /*線の太さを調節する*/
border-radius:0; /*角の丸みを調節する*/
}
}

線の長さは「padding:○○px 」で調節できます。(値が大きくすれば長くなる)

線の太さは「width:○px 」で調節できます。(値を大きくすれば太くなる)
カスタマイズがうまく反映されない場合
一度ページのキャッシュを空にしてから、再度ページを更新してみてください。
- safari:「開発」タブから「ページのキャッシュを空にする」をクリック
- InternetExplorer:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
- Chrome:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック
まとめ
コピペするだけなので簡単ですね!
その場合は、コピペした部分を削除すれば、元に戻るかと思います。
▼こちらのカスタマイズもおすすめ!




プロがどのようにサイトを育てているのか…
どのように収益化しているのか…
気になりませんか?
そんな方のニーズを満たす新感覚コミュニティ…
その名も「NOZOKIMI」を始動しました!
サイト設計&戦略を全公開
収益&アクセスデータを毎日公開
メディアのYouTube攻略も全公開
自社商品販売までの過程を全公開
どんな質問でも無制限し放題
メンバー同士の交流チャット付き
チーム会議も全公開(Zoom&チャット)
サイトを伸ばす過程を生で体感できる新感覚コミュニティです。
詳しくは下記をチェック!