ブログデザイン

【JIN カスタマイズ】見出し2の「タイプ5」をカスタマイズしてみた!

どうもこんにちは、りゅう(@ryuta_blog)です。

JINの見出23「タイプ5」をカスタマイズしてみました〜!

before
after
りゅう
りゅう

見出しの縦を広げて、より区切りを強調できる感じにしてみました!

ちなみに本カスタマイズは、こちらの記事「【JINをカスタマイズしてみた】見出し2のパターン5をカスタマイズしてみた」を超参考にしております。

りゅう
りゅう
上記の素敵なカスタマイズのおかげで、自分好みの調節ができました…!m(_ _)m

早速シェアしていきますが、個人的にカスタマイズしたものですので、ご利用は自己責任でお願いします。

JINをカスタマイズする前に!

  • カスタマイズする前はなるべくバックアップをとっておいてください。
  • カスタマイズは必ず子テーマから行ってください(親テーマを編集してしまうと、アップデートした際にカスタマイズが全て消えます)

▼子テーマを導入していない方は、以下からダウンロードしましょう。

>>JIN【子テーマ】のダウンロードページ

▼子テーマって何や?という方はまずは下記を読みましょう。

WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】

WordPress子テーマの重要性と作り方【知らない人は真っ先に見るべき】どうもこんにちは、りゅう(@ryuta_blog)です! WordPressでブログをやっている皆さん! ちゃんと「子テーマ...

 

【JIN】見出し2「タイプ5」のカスタマイズ

style.cssに以下のコードを追加してください。

style.css

/*============================
h2 タイプ5のカスタマイズ
============================*/

@media (max-width: 500px){/*スマホ表示*/
.h2-style05 h2 {
font-size: 1.1rem;
padding: 20px 16px; /*ここで縦幅を調整してる!だけ!*/
width: calc(100% + 30px);
margin-left: -15px;
border-radius: 0;
}}
@media (min-width: 501px) and (max-width: 768px){/*タブレット表示*/
.h2-style05 h2 {
font-size: 1.5rem;
padding: 22px 26px; /*ここで縦幅を調整してる!だけ!*/
width: 108.5%;
border-radius: 0;
margin-left: -20px;
}}
@media (min-width: 769px){/*PC表示*/
.h2-style05 h2 {
font-size: 1.5rem;
padding: 22px 26px; /*ここで縦幅を調整してる!だけ!*/
width: 108.5%;
border-radius: 0;
margin-left: -30px;
}}

.h2-style05 h2:before {
border-top: 0px solid;
}

「padding:○○px 」の値を調節することで、長さを変えられるよ!

.h2-style05 h2:before {
border-top: 0px solid;
}

この部分を消せば吹き出し風にできるよ!

 

カスタマイズがうまく反映されない場合

一度ページのキャッシュを空にしてから、再度ページを更新してみてください。

キャッシュを空にする方法
  • safari:「開発」タブから「ページのキャッシュを空にする」をクリック
  • InternetExplorer:「ツール」→「インターネットオプション」→全般タブの「閲覧の履歴」セクションで「削除」をクリック
  • Chrome:ブラウザ右上のメニューから「設定」「閲覧履歴データの削除」をクリック

 

まとめ

とっても簡単!

りゅう
りゅう
あくまで個人的なカスタマイズなのと、独学の素人ですので、不具合が出ましたら申し訳ありません

その場合は、コピペした部分を削除すれば、元に戻るかと思います。

 

▼こちらのカスタマイズもおすすめ!

【JIN カスタマイズ】見出し3「タイプ3」をカスタマイズしてみた!今回はWordPressテーマ「JIN」のカスタマイズで、見出し3「タイプ3」を僕好みにいじってみました。角丸をとって線を細く長くしてみました。 かっちりした印象が好きな方はぜひどうぞ!...
【JINカスタマイズ】ボックススタイルの横幅を広げる方法【簡単】どうもこんにちは、りゅう(@ryuta_blog)です! 今回は、JINに備わっている「ボックススタイル」の横幅を広げるカスタマイ...
【JIN カスタマイズ】リストスタイルを左寄せ&マークを大きくしてみた今回はWordPressテーマJINより、リストスタイルを簡単にカスタマイズしてみます!デフォルトがかるく右寄せだったので、左に寄せてみました。 あとマークも大きくして、よりハッキリした印象にしてみたよ!...
【JIN】画像加工で「枠線」だけをつけるカスタマイズを追加してみた!どうもこんにちは、りゅう(@ryuta_blog)です。 今回は画像加工でシンプルに「枠線」だけをつけるカスタマイズを追加してみま...
ABOUT ME
りゅう
2つのサイトを運営するブロガー。 「好きなことでお金は稼げる」ことを証明するために、日々奮闘中! 新卒で入社したIT企業を半年で退職し、「あ、俺組織向いてないわ」と完全に開き直り、今後の人生で自分が楽しいと思える事しかしないと心に誓う。
あなたもブログ始めてみませんか?

副業でブログを始めてみたい…
そもそもブログで稼げる仕組みって?
皆はどのサービスを使ってる?

そんな疑問・悩みはこれ一つで全て解決!

\無料で公開中/

>>ブログの始め方完全マニュアル