【1分で解決】manablog風の見出しにする方法【コピペで即完了】

この記事では

悩む人

manablog風の見出しにしたい!

このような悩みを解決できる記事になります。

筆者はmanablogの大ファンなので、見出し以外にもボックス、記事構成などをmanablog風のデザインにしています。

manablogさんのデザインはシンプルでとてもカッコイイので、ぜひ参考にしてください!

こんな方におすすめ

  • manablogみたいなデザインにしたい!
  • シンプルな見出しにしたい!

こんな感じで記事を進めていきます。

それでは、さっそく解説してきます。

本記事の内容

  • manablog風のデザインにする方法【見出し2、3】
  • manablog風コードの詳細
  • manablog風のデザインにならないときの対処法

この記事を書いた人

takablog
たか(@takablog5867)

manablog風のデザインにする方法【見出し2、3】

見出し2、3をmanablog風にする方法は、次のとおりです。

  • 当サイトで指定されたコードをコピーする
  • カスタマイズ→追加CSSにペーストする
  • manablog風の見出しになっているか

この3つです。

すぐに終わるので、一緒に進めていきましょう。

手順1:当サイトで指定されたコードをコピーする

まずはじめに、下のコードをコピーしてください。

h2 {
    border-left: 8px solid #4865b2;
	  border-top: solid 0px #f4f4f4 !important;
	border-bottom: solid 0px #f4f4f4 !important;
    padding: 20px 20px!important;
    font-size: 27px;
    color: #2d2d2d;
	background: #f9f9f9 !important;
}

.post h3{
    font-size: 20px;
    padding-left: 11px;
    border-left: solid 9px #4865b2;
    margin-left: 3px;
    color: #2d2d2d;
	border-top: solid 0px #f4f4f4 !important;
	border-bottom: solid 0px #f4f4f4 !important;
	background: #ffffff !important;
	
	padding: 9px 9px;
	
	
}

上のコードは、manablog風の見出しにするコードになります。

コードの詳細はのちほど解説していきます。

コードのコピペができたら、次のステップへ進みましょう。

手順2:カスタマイズ→追加CSSにペーストする

まずは、下の画像のようにカスタマイズ画面を開きましょう。

WordPress カスタマイズ
WordPress カスタマイズ

カスタマイズの画面が表示できたら、スクロールすると「追加CSS」という欄が出てくるので、クリックします。

追加CSSをクリックしたら、下の画面のように空欄に先ほどコピーしたmanablogコードをペーストします。

WordPress 追加CSS
WordPress 追加CSS

manablogコードを上のように貼り付けができたら、最終ステップへと進みましょう。

手順3:manablog風の見出しになっているか

最後に、manablog風の見出しになっているか確認をしましょう。

なにも問題がない場合は、下のように見出しが変更されています。

manablog風 見出し2
manablog風 見出し2
manablog風 見出し3
manablog風 見出し3

これで、見出し2、3をmanablog風のデザインに変更することができました。

次の見出しでは、追加CSSに貼り付けたコードの詳細について解説します。

追加CSSにコードを貼り付けても、デザインが反映されない人は、「manablog風のデザインにならないときの対処法」の見出しに進んでください。

manablog風コードの詳細

<a href="http://www.freepik.com">Designed by Freepik</a>
Designed by Freepik

ここでは、さきほど追加CSSにペーストしたmanablog風コードの詳細を解説していきます。

まずは、見出し2のコードです。

manablog風コードの詳細【見出し2】

見出し2manablogコードの詳細

h2 {
border-left: 8px solid #4865b2; ←左ラインの幅
border-top: solid 0px #f4f4f4 !important; ←上ラインの幅
border-bottom: solid 0px #f4f4f4 !important; ←底ラインの幅
padding: 20px 20px!important; ←見出し上下の余白
font-size: 27px; ←文字の大きさ
color: #2d2d2d; ←文字の色
background: #f9f9f9 !important; ←見出しの背景色
}

こんな感じです。

!importantは、デザインが反映されるようにしているコードなので変更しないことをオススメします。

!importantを消してしまうと、デザインが反映されない可能性が高いので変更しないでください。

manablog風コードの詳細【見出し3】

続いて、見出し3のコードの詳細です。

見出し3manablogコードの詳細

.post h3{
font-size: 20px; ←文字の大きさ
padding-left: 11px; ←文字の余白
border-left: solid 9px #4865b2; ←左ラインの幅
margin-left: 3px; ←見出しの左余白
color: #2d2d2d; ←文字の色
border-top: solid 0px #f4f4f4 !important; ←上ラインの幅
border-bottom: solid 0px #f4f4f4 !important; ←底ラインの幅
background: #ffffff !important; ←文字の背景色
padding: 9px 9px; ←見出し上下の余白

}

こんな感じです。

見出し2と設定はほぼ変わりませんね。

.postをh3の前に追加することで、記事限定の見出し3に設定することができます。

逆に、.post3を設定しておかないとすべてのページにデザインが反映されてしまうので、必ず.postを設定しておくようにしましょう

manablog風のデザインにならないときの対処法

<a href="http://www.freepik.com">Designed by Freepik</a>
Designed by Freepik

manablog風のデザインにならないときの対処法は次のとおりです。

カスタマイズ→各テキストとhタグ→カスタマイザーのCSSを無効化

これでデザインが反映されるかと思います。

カスタマイザーのCSSを無効化は、h2、h3見出し設定の1番下の欄にあるので、チェックを入れれば完了です。

カスタマイザーのCSSを無効化
カスタマイザーのCSSを無効化

manablog風の見出しにする方法まとめ

Designed by rawpixel.com / Freepik

今回は、見出し2、3をmanablog風にする方法を解説しました。

マナブさんの見出しやデザインはシンプルでカッコイイですよね。

今回は、見出しを紹介しましたが、どんどんmanablog風のデザインを更新していくのでぜひチェックしてください。

AFFINGERの使用してみた感想!

AFFINGER6
【11特典付きレビュー】AFFINGER6(ACTION)のメリットデメリットを解説

続きを見る


© 2021 takablog