腎威7カスタマイズ!記事の見出しをオシャレにする方法!

【コピペだけ!】腎威7の見出しデザインをおしゃれにする方法

 

ここあです。

 

ここ最近、このブログの更新が

止まっていました。

理由は「腎威7」で遊んでいたからです(笑)

 

もう「腎威7」楽しすぎでしょ。

カスタマイズし放題!

 

デザインに興味ない人には苦痛でしょうが

私は楽しくて仕方ありません。

 

まぁ、そんなわけでカスタマイズに夢中になっていたら

こっちの更新がすこし疎かになってしまった

というわけなんです…^^;

 

ただ「腎威7」で遊びながらも

腎威7のカスタマイズ限定サイト」をオープンしたので

そちらの記事を毎日更新していたというのもあるんですね。

 

しかし、記事を更新しながらも

全てのカスタマイズ方法を限定してしまうのも

どうかと思ったので「基本的なカスタマイズ

 

特に記事の中では一番大事な

見出しデザインだけは、やはりちゃんと

ご紹介しておく方が良いと思いました。

 

そこで今回は「腎威7の見出し」

おしゃれにカスタマイズする方法を

ご紹介したいと思います。

 

STORKの見出し」をカスタマイズする方法は

このサイトでもご紹介しているのですが…

 

テンプレートが変わると

CSSコード」の指定の仕方も変わるし

 

テーマ独自の不具合なんかもあったりするので

個別に紹介する方が分かりやすくていいと思ったので

 

今回は「腎威7」のユーザーに絞った

見出しデザイン」のカスタマイズ方法を

あなたにだけ伝授しようと思います^^

 

基本的な作業としては…

  • 各見出しのCSSをコピペする
  • 好きな色(カラーコード)に変える

だけでカスタマイズできるようにしてあるので

初心者でも安心してお使いいただけます。

 

ということで「腎威7」の見出しを

「もっとオシャレにしたい!」というあなたは

ぜひ参考にしてみてくださいね^^

 

ご注意!
今回のカスタマイズ記事で使用するテンプレートはワードプレスの「腎威7:コーポレート版」になります。
他のテンプレートでは同じ結果が得られない可能性がありますので、あらかじめご了承ください。

 

腎威7の見出しをカスタマイズする手順

まずは、「腎威7」の見出しをカスタマイズする時

どこに「CSSコード」を記述すべきかをご説明致します。

 

記述先は2カ所あります。

  • 1つは「base.css」
  • もう1つは「追加CSS」

どちらに記述するにせよ

必ず「子テーマ」に記述するようにしてくださいね。

 

でないと、テーマをアップデートした時に

「全ての設定が消えてしまう」というリスクがあるので

気を付けましょう^^;

 

CSSコードを記述する場所

CSSを記述する場所は2カ所あるとお伝えしましたが

私がおすすめするのは追加CSS」です。

 

というのも「追加CSS」にコードを記述することで

「ライブプレビュー」を見ながら作業ができます。

つまり、作業に無駄がなくなります。

 

ということで、CSSコードの記述先は…

ダッシュボードメニューから「外観」→「カスタマイズ

腎威7ダッシュボードメニュー

 

追加CSS」をクリック。

腎威7ダッシュボードメニュー

 

以下の部分に記述するようにしましょう!

腎威7追加CSS

 

それでは「見出しのカスタマイズ」をしていきましょう!

 

腎威7のh2見出しをカスタマイズ!

まずは「腎威7のh2見出し」をカスタマイズするための

CSSコードからご紹介します。

 

バリエーションをいろいろとご紹介しますので

あなたが「使いたい!」と思ったコードを

コピーしてくださいね^^

 

シンプルでオーソドックスなh2見出し

腎威7シンプルでオーソドックスなh2見出し

 

「Simple is Best!」とも言うべきオーソドックスな見出しです。

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2{
padding: 10px 18px;/*サイズ調整*/
border-radius: 5px;/*角を丸く*/
background-color:#f7840f;/*背景色*/
box-shadow:none;/*影無くす*/
}

background-color:#f7840f;/*背景色*/で色が変更できます。

 

吹き出し風のh2見出し

腎威7吹き出し風見出し

 

この「STORK」でも設定できる吹き出し風のシンプルな見出し。

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2{
position: relative;
padding: 10px 18px;/*サイズ調整*/
border-radius: 5px;/*角を丸く*/
background-color:#f7840f;/*背景色*/
box-shadow:none;/*影を消す*/
}
.article-body h2:after{
border-top: 15px solid #f7840f;/* ▼の色 */
border-left: 15px solid transparent;
border-right: 15px solid transparent;
position: absolute;
bottom: -15px;
left: 5%;
z-index: 90;
content: "";
}

色を変える場合は…

  • background-color:#f7840f;/*背景色*/
  • border-top: 15px solid #f7840f;/* ▼の色 */

2箇所のカラーコードを同じ色に変えてくださいね^^

 

ストライプの吹き出しh2見出し

腎威7ストライプ吹き出し風見出し

 

吹き出し風の見出しをストライプにすると可愛くなります^^

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2 {
position: relative;
padding: 10px 18px;/*サイズ調整*/
background: -webkit-repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
background: repeating-linear-gradient(-45deg, #fff5df, #fff5df 4px,#ffe4b1 3px, #ffe4b1 8px);
border-radius: 5px;
color:#333;
font-weight:bold;
box-shadow:none;
}

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

色替えが大変なので、変更する勇気のある人は使ってください(笑)

 

色替えする時は、#fff5dfの部分は全て同じ色に

また、#ffe4b1の部分も全て同じ色に設定しましょう。

color:#333;で文字の色も変更できます。

 

ステッチ風のh2見出し

腎威7ステッチ風のh2見出し

 

こちらも可愛らしいステッチ風のh2見出しです。

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2{
background: #dfefff;/*背景色*/
box-shadow: 0px 0px 0px 7px #dfefff;
border: dashed 2px #96c2fe;/*破線の色*/
padding: 0.2em 0.5em;
color: #454545;/*文字の色*/
}

背景色を変える場合は…

  • background: #dfefff;/*背景色*/
  • box-shadow: 0px 0px 0px 7px #dfefff;

の2箇所

 

点線の色を変える場合は…

border: dashed 2px #96c2fe;/*破線の色*/

で変更してください。

 

点線を白(#fff)にすると印象が変わりますよ^^

color: #454545;/*文字の色*/で文字の色も変更できます。

 

リボン風のh2見出し

腎威7リボン風のh2見出し

 

この「STORK」のサイトでも使っているリボン風の見出し。

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2{
position: relative;
box-shadow:none;
padding: 10px 18px;

background: #f7840f;/* 背景色 */
color: #fff;/* 文字色 */
font-size:1.3em;
}

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

背景色を変える場合はbackground: #f7840f;/* 背景色 */

color: #fff;/* 文字色 */で文字の色を変えれます。

 

囲み罫のシンプルなh2見出し

腎威7囲み罫のシンプルなh2見出し

 

罫線のみで囲ったシンプルな見出しです。

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2{
color: #f7840f;/*文字色*/
border: solid 3px #f7840f;/*線の色*/
padding: 10px 18px;/*サイズ調整*/
border-radius: 12px;/*角丸*/
box-shadow:none;/*影を無くす*/
background:#fff;/*背景色*/
}

外回りの色はborder: solid 3px #f7840f;/*線の色*/

文字の色はcolor: #f7840f;/*文字色*/

背景色はbackground:#fff;/*背景色*/で変更してください。

 

少し立体感のあるh2見出し

 腎威7少し立体感のあるh2見出し

 

少しだけ立体感のあるシンプルな見出しです。

CSSコードはこちら…

/*h2見出しカスタマイズ*/
.article-body h2 {
padding: 10px 18px;/*サイズ調整*/
color: #494949;/*文字の色*/
box-shadow:none;/*影を無くす*/
background: #f4f4f4;/*背景色*/
border-left: solid 5px #f7840f;/*左線*/
border-bottom: solid 3px #d7d7d7;/*下線*/
}

横の縦線を変える場合はborder-left: solid 5px #f7840f;/*左線*/

背景色はbackground: #f4f4f4;/*背景色*/で変更してください。

 

とりあえず、これぐらいあれば

あなたが「良いと思う」見出しは

見つかるんじゃないでしょうか^^

 

腎威7のh3見出しをカスタマイズ!

続いて「腎威7のh3見出し」のデザインサンプルを

ご紹介致しますね。

 

h2見出しはどちらかと言うと、見出しのメインとなるので

いわゆるBOX型の方が目立っていいかと思いますが

 

逆に、h3見出しはシンプルなデザインの方が

「スッキリ」してキレイな印象を与えます。

 

ということで、h2見出しとのバランスもよく考えて

h3見出しのデザインを選んでみてくださいね^^

 

デフォルトのh3見出しの色を変更する

腎威7デフォルトのh3見出しの色を変更する

 

腎威7」のデフォルトで設定されているh3見出しは

色さえ変えれば十分オシャレに見せることができます。

 

以下のCSSコードで色調整できますので

「デザインはそのままでもいい」という場合は

色だけ変更してみてください。

 

CSSコードはこちらです。

/*h3見出しカスタマイズ*/
.article-body h3{
padding: 10px 0px;/*枠を広げる*/
border-bottom: 4px solid #cce4ff;
}

.article-body h3::after {
background-color: #5472cd;
}

左側の線の色を変える場合はbackground-color: #5472cd;

右側の線の色を変える場合はborder-bottom: 4px solid #cce4ff;

これらのカラーコードを変更すれば色が変わります。

 

上下線のシンプルなh3見出し

腎威7上下線のシンプルなh3見出し

 

上下線のみのシンプルなh3見出しです。

CSSコードはこちら…

/*h3見出しカスタマイズ*/
.article-body h3{
color: #364e96;/*文字色*/
padding: 0.2em 0;/*上下の余白*/
border-top: solid 3px #364e96;/*上線*/
border-bottom: solid 3px #364e96;/*下線*/
}

.article-body h3::after {
display: none;
}

上の線の色を変える場合はborder-top: solid 3px #364e96;/*上線*/

下の線の色を変える場合はborder-bottom: solid 3px #364e96;/*下線*/

上記コードで色を変更してください。

 

color: #364e96;/*文字色*/で文字の色も変更できます。

 

横棒だけのシンプルなh3見出し

腎威7横棒だけのシンプルなh3見出し

 

横棒だけのシンプルなh3見出しです。

CSSコードはこちら…

/*h3見出しカスタマイズ*/
.article-body h3 {
padding: 0.25em 0.5em;/*上下 左右の余白*/
color: #494949;/*文字色*/
background: transparent;/*背景透明に*/
border-left: solid 5px #7db4e6;/*左線*/
border-bottom:none;
}

.article-body h3::after {
display: none;
}

横棒の色を変える場合は…

border-left: solid 5px #7db4e6;/*左線*/

カラーコードを変更してください。

 

点線だけのシンプルなh3見出し

腎威7点線だけのシンプルなh3見出し

 

点線と文字だけのシンプルな見出しですが

色次第では十分オシャレに見えます^^

 

CSSコードはこちら…

/*h3見出しカスタマイズ*/
.article-body h3 {
color: #6594e0;/*文字色*/
border-bottom: dotted 3px #6594e0;
/*線の種類(点線)・太さ・線色*/
}

.article-body h3::after {
display: none;
}

点線の色や太さを変える場合はborder-bottom: dotted 3px #6594e0;

文字の色を変える場合はcolor: #6594e0;/*文字色*/で調整してください。

 

囲み罫のシンプルなh3見出し

腎威7囲み罫のシンプルなh3見出し

 

h2見出しでもご紹介しましたが、外枠の罫線を細くしたり

角丸を変えることでh3見出しとしても使えます。

 

CSSコードはこちら…

/*h3見出しカスタマイズ*/
.article-body h3 {
color: #364e96;/*文字色*/
border: solid 1px #364e96;/*線色*/
padding: 5px 15px;/*文字周りの余白*/
border-radius: 8px;/*角丸*/
}

.article-body h3::after {
display: none;
}

罫線の太さや色を変える場合はborder: solid 1px #364e96;/*線色*/

囲み罫の角丸を調整する場合はborder-radius: 8px;/*角丸*/

文字の色を変える場合はcolor: #364e96;/*文字色*/で調整ができます。

 

腎威7の見出しをカスタマイズまとめ

今回は「腎威7」のh2および、h3の見出しを

コピペだけでできるカスタマイズ方法をご紹介しました。

 

簡単にではありますが…

見出しのカスタマイズコードと一緒に

色替えなどをカスタマイズできる場所もお伝えしたので

 

いろいろと「色や線の太さ」などを調整しながら

「あなた好みの見出し」にカスタマイズしてみてくださいね。

 

CSSコードは一見難しそうですが

指定コードさえ分かればそれほど難しいものでもないですし

自分で調べてカスタマイズしようと思えばできなくもありません。

 

特に「腎威7」の場合は

「他のブロガーと差別化しよう」と思うと

こうしたCSSコードを使ったカスタマイズが必須になります。

 

ですが、こちらの記事でもご紹介した通り

腎威7カスタマイズ!「デザインの初期設定」全て教えます!

 

腎威7」は必要最低限のカスタマイズをするだけで

すぐに「記事を書くことに専念できる」

非常に使いやすいテンプレートでもあります。

 

なので、まずは最低限、サイトのオリジナリティを出せる

見出しのカスタマイズ」をしながら

少しずつカスタマイズの仕方にも慣れてくださいね^^

 

最後までお読みいただきありがとうございました!

 

腎威7の見出しのカスタマイズ」に関し

分からないことがあれば何でも気軽にご相談ください。

「ここあ」にちょっと聞いてみる!

 

 

【コピペだけ!】腎威7の見出しデザインをおしゃれにする方法

「自分らしく」夢に向かって楽しい人生を生きるために


未来の自分を想像しよう
「副業であなたは変わる」

会社に縛られず
「自由な生き方を選べる」ように
副業で稼ぐ方法をご紹介します。


ABOUTこの記事をかいた人

ここあ

グラフィックデザイナー歴20年。2017年アフィリエイトを始めて独立。デザイナーのスキルも生かし、アフィリエイトでストレスフリーな生活を楽しみながら、ネットビジネスの素晴らしさを一人でも多くの方に伝えたくこのブログを立ち上げました。