【Cocoon】h1タイトルが目立たない悩み解決！記事タイトルらしいデザインに（CSS･JavaScriptコピペ可）

人気テーマのCocoonで記事タイトルをもっと目立たせたいと思ったことはありませんか？今回は、スキンによってはh1まわりのの装飾がなくて地味になってしまう問題を解決する方法をご紹介します。CSSでスペーサーでは調整できない余白を取り、さらに小技をいくつか入れて記事タイトルらしいデザインに仕上げましょう。コピペで簡単にできるので、ぜひ試してみてくださいね。

上図はフォントサイズこそ変更してるものの他はCocoonの初期状態です。何も装飾が施されていません。

やはりこのままだと記事タイトルにしては地味だし目立たなすぎますよね

スキンによってはなにも装飾がないものがあります。恐らくですが記事タイトル周辺は流石にユーザーさんが自分でカスタマイズしたいだろうと言うスキン製作者様のご意向なのかもしれませんね

何もわからずすっかりスキンまかせでいたら、ここだけ置いてけぼりになってしまいます

下図はこの記事の内容を全て行った後の仕上がりです

コピペでできますので早速記事タイトルらしいデザインにしていきましょう

【前提】お手軽解決　　パンくずリストを設定しよう

やはり見出しを目立たせるには見出し上下にある程度の高さ(余白）が必要です。ただし闇雲に高さをとってしまうと今度は余白が多すぎてスカスカに見えてしまいます

そこでタイトル上にちょこんと乗っかるパンくずリストは見出しを目立たせるのにとても好都合です。早速パンくずリストを表示させましょう

Cocoon設定→投稿→パンくずリストの配置→メインカラムトップにチェックを入れて保存します

これだけでもぐっと記事タイトルらしさが出てきました。やはりタイトル上部の余白は大事ですね

(注：上記は初期状態からフォントサイズを125％にアップさせています）

【Stage1】CSSでさらに調整・CSSコピペでお手軽に

（Stage2や3もやろうとしている方はここStage1のCSSコードは貼り付けないでください）

パンくずリストだけでも効果は十分にありますがタイトルの行間を広げたりさらに記事上の余白を増やしていきます。ついでにパンくずリストの装飾も行います

(注：全てのページのコンテンツ上部の余白が15ＰＸ増えます）

CSSを入れた後は下図の様な仕上がりになります（色は好きな色に変えて下さい）

CSSコードです。パンくずリストの色はグレーにしてあります。必要に応じてカラーコードを変更してください

CSS(Stage1)

/*  コンテンツ上部の余白  */
.main {
    padding-top: 40px;
}
/* H1 行間調整 */
.article h1 {
line-height:1.5;
}
/* h1 フォントサイズ変更 */
.entry-title{
	font-size:125%;
}
/*  ぱんくずリスト　*/
.breadcrumb { 
	color: #808080;/* アイコンの色 */
	display: flex; 
}
.breadcrumb a {
    color: #808080;/* 文字の色　*/
	background:#f4f4f4;/* 背景の色　*/
	padding-left:10px;
	padding-right:10px;
	border:dotted 1px #808080;/* 枠線の色 */
	border-radius:5px ;
	font-size:4px;
}

上記をコピーして下記に張り付けて下さい。既に記述がある場合は一番下に張り付ければOKです

外観/カスタマイズ/追加ＣＳＳ/

【Stage2】JavaScriptで投稿日更新日をタイトル下に持ち上げよう

投稿日と更新日は標準ではアイキャッチ画像の下にでます。がこれをJavaScriptを使ってアイキャッチ画像の上（記事タイトルの下）に持ち上げて余白をさらに稼ぎます。

なをCSSコードはStage1の分も含みますのでStage１のCSSコードは貼り付けないでください

またStage3まで行う方はここではJavaScriptのみコピペしてください

パンくずリスト、投稿日更新日の色はグレーにしてあります。必要に応じてカラーコードを変更してください

CSS(Stage2)

/*  コンテンツ上部の余白  */
.main {
    padding-top: 40px;
}
/* H1 行間調整 */
.article h1 {
line-height:1.5;
}
/* h1 フォントサイズ変更 */
.entry-title{
	font-size:125%;
}
/*  ぱんくずリスト　*/
.breadcrumb { 
	color: #808080;/* アイコンの色 */
	display: flex; 
}
.breadcrumb a {
    color: #808080;/* 文字の色　*/
	background:#f4f4f4;/* 背景の色　*/
	padding-left:10px;
	padding-right:10px;
	border:dotted 1px #808080;/* 枠線の色 */
	border-radius:5px ;
	font-size:4px;
}
/*  更新日       */
.entry-date {
	font-size: 1em;
	letter-spacing: 0.05em;
}
.date-tags {
	text-align: left;
	margin-top: -10px;
		color: #808080;/* アイコンの色　*/
}
.date-tags .post-date > span[class^="fa"],
.date-tags .post-update > span[class^="fa"] {
	color: #808080;/* 投稿日更新日の色　*/
}
@media screen and (max-width: 480px) {
	.date-tags .post-date > span[class^="fa"],
	.date-tags .post-update > span[class^="fa"] {
		line-height: 2.1;
	}
}

CSS貼り付け場所

外観/カスタマイズ/追加ＣＳＳ/

JavaScript

$(function () { $('.date-tags').insertAfter('.entry-title'); });

JavaScript貼り付け場所

外観/テーマファイルエディタ/CocoonChild/javascript.js/

既に記述がある場合は一番下に追加ペーストして下さい

【Stage3】h１に画像アイコンを入れるCSSを追加。完全に私のサイトと同じに

ここでは見出しｈ１の装飾を行います。記事タイトルの先頭にアイコン画像を加えます。見出しの装飾は他にもいろいろありますので当サイトの装飾が気に入ったひと向けです

なをCSSコードはStage1、2の分も含みますのでStage１および２のCSSコードは貼り付けないでください

JavaScriptはStage2にしたがってコピペして下さい

パンくずリスト、投稿日更新日の色はグレーにしてあります。必要に応じてカラーコードを変更してください

画像の準備

上の画像を右クリックから保存してください。その後ご自身のサイトにアップロードしてURLをコピーして下さい

画像は上の画像ではなくても任意の画像で構いませんがサイズの最適化は行われませんので最適サイズでアップロードする必要があります。画像の高さが30ｐｘ前後でいい感じになると思います（上のサンプル画像の高さは31ｐｘ）

（注：記事タイトルの他、固定ページのタイトルにも装飾が付きます。当サイトのAbout this siteページ参照）

CSS(Stage3)

Stage1や２のCSSも含みます

/*  コンテンツ上部の余白  */
.main {
    padding-top: 40px;
}
/* H1 行間調整 */
.article h1 {
line-height:1.5;
}
/* h1 フォントサイズ変更+バックグランドイメージ */
.entry-title{
	  padding: 0 0 0 40px;
  background-image: url(    );/* 左の()内に画像URLを張り付けて下さい　　*/
  background-repeat: no-repeat;
  background-position: 0 2px;
	font-size:125%;
}
/*  ぱんくずリスト　*/
.breadcrumb { 
	color: #808080;/* アイコンの色 */
	display: flex; 
}
.breadcrumb a {
    color: #808080;/* 文字の色　*/
	background:#f4f4f4;/* 背景の色　*/
	padding-left:10px;
	padding-right:10px;
	border:dotted 1px #808080;/* 枠線の色 */
	border-radius:5px ;
	font-size:4px;
}
/*  更新日       */
.entry-date {
	font-size: 1em;
	letter-spacing: 0.05em;
}
.date-tags {
	padding-left:40px;
	text-align: left;
	margin-top: -10px;
		color: #808080;/* アイコンの色　*/
}
.date-tags .post-date > span[class^="fa"],
.date-tags .post-update > span[class^="fa"] {
	color: #808080;/* 投稿日更新日の色　*/
}
@media screen and (max-width: 480px) {
	.date-tags .post-date > span[class^="fa"],
	.date-tags .post-update > span[class^="fa"] {
		line-height: 2.1;
	}
}

12行目に必ず画像の準備で用意した画像のアップロード先URLを張り付けて下さい（下記青字部参照）

12 行目　　ｂackground-image: url(　ここに画像URLを張り付けます　);/*左の ()内に画像URLを張り付けて下さい*/

CSS貼り付け場所

外観/カスタマイズ/追加ＣＳＳ/