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

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



ともの
ともの

この記事では下図の様な感じで記事タイトルが地味になってしまっている方の悩みを解決します

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

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

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

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

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

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

この記事ではh1タイトルが目立たなすぎる問題の解決として3段階の提案をしています

段階があがるほどに作業手順は増えて行きます。お手軽解決は3段階共通の前提条件でもあります。全部やると私のサイト(2023年5月現在)と同じデザインになります

なをCSSのコピペはどのStageまでやるつもりでも1回でいい様にしています

  • 【前提】お手軽解決 パンくずリストを設定しよう
  • 【Stage1】CSSでさらに調整 上記に加えCSSコピペでお手軽に
  • 【Stage2】ひと手間追加 上記に加えJavaScriptもコピペでかなりいい感じに
  • 【Stage3】h1をCSS装飾 さらにh1に画像アイコンを入れるCSSを追加。完全に私のサイトと同じに

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

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

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

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

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

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

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

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

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

(注:全てのページのコンテンツ上部の余白が15PX増えます)

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

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です

外観/カスタマイズ/追加CSS/

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

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

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

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

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

cssと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貼り付け場所

外観/カスタマイズ/追加CSS/

JavaScript
$(function () { $('.date-tags').insertAfter('.entry-title'); });
JavaScript貼り付け場所

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

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

ここだけCSSではありません。貼り付け場所に十分注意してください

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

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

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

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

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

h1装飾後の完成図
画像の準備

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

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

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

CSS(Stage3)

Stage1や2の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 行目  background-image: url( ここに画像URLを張り付けます );/*左の ()内に画像URLを張り付けて下さい*/

CSS貼り付け場所

外観/カスタマイズ/追加CSS/

ともの
ともの

ご質問等あればお気軽にコメント欄にお願いします



コメント すみませんが海外スパムが大変多い為手動認証してます。基本、日本語のコメントは全て認証します。