あるとたたん

写真好きの前向き日誌〜只今、母になる準備中〜

記事の見出しをカスタマイズ!

f:id:masami11662277:20170817081904p:plain

 

このブログのカスタマイズでやったことの一つです。ブログ記事のデザインはこだわりたいところだったので、大見出しを変更しました。今回はこのブログで使用している、縦のラインが入ったデザインを紹介していきます。(記事の編集画面で「見出し」を押すと「大見出し」「中見出し」「小見出し」「標準」と4種類あります)

 

初心者でも簡単にカスタマイズできるよう、画像付きで説明していきます。

 

  

CSSをペーストする場所

まずは、CSSを張付ける場所を確認します。デザイン編集画面の一番下にある「デザインCSS」に貼付けです。

 

▼経路(クリックしていくだけ)

「デザイン」→「工具マーク」→「デザインCSS」→「出てきた枠内に貼付け」

 

f:id:masami11662277:20160821164908p:plain

 

f:id:masami11662277:20170817113940p:plain

 

f:id:masami11662277:20170817114009p:plain

 

f:id:masami11662277:20170812120206p:plain

 

CSSをコピーする

 

/* 大見出しのリセット */

.entry-content h3,

.entry-content h3::before,

.entry-content h3::after {

background: none;

border: none;

border-radius: 0;

}

/*大見出し*/

.entry-content h3 {

padding: 5px 10px; /* 余白 */ 

color: #353535; /* 文字色 */

background-color: #FFFFFF; /* 背景色*/

border-left: 8px solid #2E2E2E; /* 左のライン */

}

 

 

このCSSはブログのデザインのため、編集して好みの色にして使ってください。

▼色の変更方法

#353535を変更すると、大見出しの文字色が変わります。

#FFFFFFを変更すると、大見出し部分に背景色が付きます。

#2E2E2Eを変更すると、縦ライン部分の色が変わります。

 

▼色の参考サイト

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

 

▼大見出し以外の編集方法

h3は大見出しなので、この部分を「h4」にすると中見出し「h5」にすると小見出しのデザインとなります。もっとこだわりたい方は挑戦してみてください。
 

参考ブログ

▼カスタマイズしやすいデザインの「Spirea」の作成者ブログ。カスタマイズ方法もたくさん教えてくれています。このブログのベースはこちらで出来上がってます。

www.ituore.com

 

▼下線のものや囲みのものなどの見出しを紹介しています。

www.yukihy.com

 

▼見出しだけでなく、はてなブログ用のカスタマイズもたくさん紹介しています。

www.notitle-weblog.com

 

▼シンプルなものからおしゃれなものまで様々な見出しを教えてくれます

saruwakakun.com