腎威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コードはこちら…

クリックでCSSコードを表示

.article-body h2{
padding: 10px 18px;
border-radius: 5px;
background-color:#f7840f;
box-shadow:none;
}

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

 

吹き出し風のh2見出し

腎威7吹き出し風見出し

 

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

CSSコードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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見出し

 

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

CSSコードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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コードはこちらです。

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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コードはこちら…

クリックでCSSコードを表示

.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」は必要最低限のカスタマイズをするだけで

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

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

 

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

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

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

 

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

 

>ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

ネットで毎月30万円以上の自動収益を得ながら 「自分らしい人生」を送る方法を無料公開!

●自動化の仕組みで毎月30万円を稼ぐ仕組みの全貌マニュアル
●主婦やニートでもネットで毎月5〜10万円の不労所得を得る方法
●20年サラリーマンをしてきてなぜ今になって脱サラしたのか?
●安定を求めれば求めるほど不安定になる理由とは?
●いくら知識があっても、あなたが絶対に成功できない理由
など、無料メール講座本編では、決して表には出せない秘匿性の高い情報もたくさん提供していきます。※この無料メール講座は、私が有料セミナーで直接成功者たちから聞いた内容も多数含まれているため、予告なく募集を終了する可能性があります。

CTR IMG