Cocoonの使い方やカスタマイズとオリジナルスキン

Cocoonの記事タイトルや見出し(H1~H5)をカスタマイズ

スポンサーリンク
カスタマイズ

Cocoonで見出しのデザインを好みのものにカスタマイズする方法です。

見出し1(H1)は記事のタイトルで使われますので、記事本文中はH2~を利用します。

デザイン設定する為の指定方法と、まるごとコピー利用できるコードを載せています。

 

スポンサーリンク

カスタマイズ方法

簡単なCSS追記のみです。

CSS追記は以下のいずれかから行って下さい。

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

外観→テーマエディターstyle.css

 

記事タイトル(H1)

シンプルに「h1タグ」で指定します。

カスタマイズ例

サンプルA

記事タイトルデザインサンプル

※記事タイトルサンプル画像です

上下にドット線を入れるCSS

h1{
font-size: 22px;
border-top: dotted 2px #9d9d9d;
border-bottom: dotted 2px #839b5c;
}

 

ドット線ではなく、実線を入れる場合は、「dotted」の部分を「solid」に変更。

サンプルB

記事タイトルデザインサンプル

※記事タイトルサンプル画像です

1文字目を丸囲みするCSSは以下の通りです。

 

/*記事タイトル1文字目の設定*/
h1::first-letter {
background-color: #839b5c; /*背景色*/
border-radius:  50%; /*背景色丸み*/
padding:  10px; /*余白*/
font-size: 26px; /*文字サイズ*/
color: #fff; /*7文字色*/
margin-right: 5px;
}

 

見出し(H2~H5)

H2やH3タグは、サイドバーやウィジェットタイトルなどにも使われている為、記事内の見出しのみを変えたい場合は「entry-content」クラスを明示してCSSに記述します。

 

H2の記述例

サンプル

見出しデザインサンプル

※見出しサンプル画像です

.entry-content h2{
color: #fff; /*文字色
font-size: 22px; /*文字サイズ*/
border-left: solid 10px #a8b751; /*左側に実線・色*/
}

 

上記CSSには背景色を指定していませんが、Cocoonの見出しデザインで、H2タグにはキーカラーを使って背景色をつけているので、背景色を変えたい場合は以下のように指定します。

見出しデザインサンプル

※見出しサンプル画像です

background-color: #779dc4; /*好みの色*/

 

 

背景色を消したい場合は以下(サイト全体背景が白の場合)

見出しデザインサンプル

※見出しサンプル画像です

background-color: #fff;
color: #a8b751; /*文字色*/

 

 

H2~H5 まるっとコピー

パターン1

見出しサンプル

コードを表示
/************************/
/* 見出しタグ */
/************************/
.entry-content h2{
padding: 10px;
margin: 5px 0;
background: #779dc4;
border-radius: 8px;
color:#fff;
font-size:22px;
}
.entry-content h3{
padding: 10px;
margin: 10px 0;
color: #000;
border: solid 1px #779dc4;
}
.entry-content h4{
padding: 12px;
margin: 5px;
color: #000;
background: #ebebeb;
border-left: solid 10px #779dc4;
}
.entry-content h5{
padding: 12px;
margin: 5px;
color: #779dc4;
border-bottom: solid 1px #779dc4;
}

 

パターン2

見出しサンプル

 

コードを表示
/************************/
/* 見出しタグ */
/************************/
.entry-content h2{
padding: 10px;
margin: 5px 0;
border-top: solid 3px #779dc4;
border-bottom: solid 3px #779dc4;
font-size:22px;
}
.entry-content h3 {
color: #ffffff;
font-size: 16px;
line-height: 20px;
position: relative;
padding: 10px;
background: #779dc4;
box-shadow: 0 0 0 0 #779dc4, -10px 0 0 0 #779dc4, 0 3px 3px 0 #003046;
}
.entry-content h3:before {
content: " ";
position: absolute;
top: 100%;
left: -10px;
width: 0;
height: 0;
border-width: 0 10px 10px 0;
border-style: solid;
border-color: transparent;
border-right-color: #003046;
}
.entry-content h4 {
color: #000;
font-size: 16px;
line-height: 20px;
padding: 10px;
background: repeating-linear-gradient(45deg, #779dc4, #779dc4 10px, #afc5dc 10px, #afc5dc 20px);
}
.entry-content h5{
border-bottom: 1px solid #aaa;
margin: 15px 0;
padding: 5px 0;
position: relative;
}
.entry-content h5:before,
.entry-content h5:after {
content: '';
border-right: 20px solid #fff;
border-top: 15px solid #aaa;
bottom: -15px;
position: absolute;
left: 25px;
}
.entry-content h5:after {
border-top-color: #fff;
border-right-color: transparent;
bottom: -13px;
left: 26px;
}

 

パターン3

見出しサンプル

 

コードを表示
/************************/
/* 見出しタグ */
/************************/
.entry-content h2{
color: #fff;
font-size: 24px;
position: relative;
padding: 8px 0 8px 24px;
border-radius: 32px 0;
background: #9d9d9d;
border-left:none;
}
.entry-content h3{
font-size: 22px;
}
h3::first-letter {
padding: 10px;
font-size: 30px;
color: #fb8a8a;
margin-right: 5px;
border-left:solid 1px #9d9d9d;
}
.entry-content h4{
position: relative;
padding-bottom: 0.5em;
font-size: 18px;
}

.entry-content h4::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 7px;
box-sizing: border-box;
border-top: 3px solid #5a5a5a;
border-bottom: 1px solid #5a5a5a;
}
.entry-content h5{
padding: 0.2em;
border-bottom: dotted 2px #fb8a8a;
font-size: 18px;
}

 

パターン4

見出しサンプル

見出しサンプル

 

コードを表示
/************************/
/* 見出しタグ */
/************************/
.entry-content h2 {
color: #fff;
margin: 15px;
padding: 0.5em 1em;
border-radius:5px;
background: linear-gradient(#007ab5 0%, #007ab5 50%, #004364 50%, #0099e3 100%);
}
.entry-content h3{
padding: 0.5em 1em;
margin: 15px;
font-size: 20px;
border:none;
background: linear-gradient(transparent 80%, #0099e3 80%);
}
.entry-content h4 {
width: 95%;
margin: 15px;
padding: 0.5em 1em;
font-size: 18px;
border:none;
}
.entry-content h4::after {
position: absolute;
content: '';
left: 0;
bottom: 0;
width: 100%;
height: 7px;
box-sizing: border-box;
border-top: 3px solid #0099e3;
border-bottom: 1px solid #0099e3;
}
.entry-content h5{
padding: 0.5em 1em;
margin: 15px;
font-size: 16px;
color: #0099e3;
border-bottom: solid 1px #0099e3;
}

 

 

パターン5

見出しサンプル

画像を使っています。画像はご自身でご用意ください。24~32pxの正方形がお勧め。

コードを表示
/************************/
/* 見出しタグ */
/************************/
.entry-content h2{
font-size: 24px;
position: relative;
padding: 8px 0 8px 24px;
border-radius: 32px 0;
border-left:none;
border-bottom: double 3px #555;
}
.entry-content h2:before {
top: 4px;
position: relative;
margin: 0 6px 0 0;
content: url(https://https://XXXXX/xxx.png);
}
.entry-content h3{
border:none;
border-bottom: groove 3px #555;
}
.entry-content h3:before {
top: 4px;
position: relative;
margin: 0 6px 0 0;
content: url(https://https://XXXXX/xxx.png);
}
.entry-content h4{
width:90%;
padding: 8px 0 8px 24px;
border:none;
border-bottom: solid 2px #555;
font-size: 18px;
}
.entry-content h4:before {
top: 4px;
position: relative;
margin: 0 6px 0 0;
content: url(https://https://XXXXX/xxx.png);
}
.entry-content h5{
padding: 8px 0 8px 24px;
border-bottom: dotted 2px #555;
font-size: 18px;
}
.entry-content h5:before {
top: 4px;
position: relative;
margin: 0 6px 0 0;
content: url(https://https://XXXXX/xxx.png);
}

 

 

サイドバー・フッターの見出し

サイドバー・フッターの見出しを同じように設定

.sidebar h3,.footer-in h3 {
font-size: 20px; /*文字サイズ*/
line-height: 20px; /*行の高さ
width:100%; /*幅*/
padding: 10px 15px; /*余白*/
margin-top: 20px;
border-radius: 8px; /*角の丸み*/
background-color:#839b5c; /*背景色*/
color:#fff; /*文字色*/
}

 

 

サイドバー・フッターのリスト

リストの「●」や「○」を消す

.sidebar ul li{list-style:none;}

 

ホバーアクションを指定

フッターリスト

#footer-in ul li a:hover{
background-color:#fff;
color:#839b5c;
}

 

注意事項

初期設定されている見出しデザインの他、スキンを利用している場合も、初期デザインが異なるので、以下のまとめを参考に必要のない項目を打ち消したり、上書きしてデザインして下さい。

 

まとめ

見出しのクラス名

以下のテーブル内・右側はコピー可能です。

 

タグセレクタ・クラス名
記事タイトルh1
記事内見出し.entry-content h2

.entry-content h3

.entry-content h4

.entry-content h5

サイドバー見出し.sidebar h3
フッター見出し#footer-in h3

 

デザイン用 簡単サンプル

以下のテーブル内・右側はコピー可能です。

 

サンプル
背景色background-color: #fff;
文字色color: #a8b751;
文字サイズfont-size: 22px;
下線(実線)border-bottom:solid 1px #a8b751;
下線(ドット)border-bottom:dotted 2px #a8b751;
角を丸めるborder-radius: 10px;

 

カラーの変更

お好きなカラー設定には以下もご利用下さい。

マカロンビビッドパステル伝統色和色セーフ色名

 

コメント

タイトルとURLをコピーしました