自分の為にも、編集の記録を書き残していきたいと思います。
最初に
Cocoon設定>スキン タグ から画面下部にあるテンプレートがありますので、そこから選択してみて下さい。
全体設定を変更できるようです。
上手く切り替わらない場合は、こちらを確認して下さい。HTTPの設定や
まずは、これを選択して、気に入らなければ、以下の内容について設定するといいと思います。
ブログを始めて5ヶ月目で初めて知りました。

VSA-CYCLIST
自分で設定した段落で、約1年半運営してきましたが、用意されているスキンから選んで運営しています。
10記事位、書いたらスキンを設定するのがいいと思います。
スキンが変わると、画像などがマッチしなくなる場合があります。
テーマエディタに書き込むと、そちらが優先されるようです。
テーマエディタを開く

外観>テーマエディタ をクリックしてください。
見出し、タグの装飾変更方法
「子テーマ用のスタイルを書く」以降の内容を変更していきます。
/ ******************************
** 子テーマ用のスタイルを書く
/ ******************************
/必要ならばここにコードを書く/
/* 見出しカスタマイズ / / H2 */
ブロックタイプ「T」のH2、H3、H4のタグの装飾を変更します。
デフォルト
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
line-height: 1.25;
font-weight: bold;
}
.article h3, .article h4, .article h5, .article h6 {
margin-top: 35px;
margin-bottom: 20px;
}
.article h4, .article h5, .article h6 {
font-size: 20px;
padding: 6px 10px;
}
.article h2 {
font-size: 24px;
margin-top: 40px;
margin-bottom: 20px;
padding: 25px;
background-color: #f3f4f5;
}
.article h3 {
border-left: 6px solid #777;
border-right: 1px solid #ccc;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: 22px;
padding: 6px 20px;
}
.article h4 {
border-top: 2px solid #ccc;
border-bottom: 2px solid #ccc;
}
.article h5 {
border-bottom: 2px solid #ccc;
}
.article h6 {
border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 480px) {
.entry-title, .article h2, .article h3, .article h4, .article h5, .article h6 {
font-size: 20px;
padding: 10px;
margin: 6px 0 12px;
}
}
一度リセット
設定を一度リセットします。書き換えます。
.article h2 {
padding: 0;
background: none;
}
.article h3 {
border: none;
padding: 0;
}
.article h4 {
border: none;
padding: 0;
}
.article h5 {
border: none;
padding: 0;
}
.article h6 {
border: none;
padding: 0;
}
私の設定
/ ******************************
** 子テーマ用のスタイルを書く
/ ******************************
/必要ならばここにコードを書く/
/* 見出しカスタマイズ /
/ H2 /
.article h2{
background:none;
background: #222222; /背景色/
padding: 0.5em;/文字周りの余白/
color: white;/文字を白に/
border-radius: 0.5em;/角の丸み*/
}
/* H3 /
.article h3{
border-top:none;
border-bottom: 2px solid #ccc;
border-left:none;
border-right:none;
background: #fff; /背景色/
padding: 0.5em;/文字周りの余白/
color: #222222;/文字色/
border-radius: 0.5em;/角の丸み*/
}
/* H4 /
.article h4{
border-top:none;
border-bottom: 1px dotted #ccc;
background: #fff; /背景色/
padding: 0.5em;/文字周りの余白/
color: #222222;/文字を黒に*/
}
/* H5 /
.article h5{
border-top:none; border-bottom:none;
background: #fff; /背景色/
padding: 0.5em;/文字周りの余白/
color: white;/文字を白に/
border-radius: 0.5em;/角の丸み*/
}
/* H6 /
.article h6{ border-bottom:none;
background: #fff; /背景色/
padding: 0.5em;/文字周りの余白/
color: white;/文字を白に/
border-radius: 0.5em;/角の丸み*/
}
関連サイト
CSSで簡単に作れる見出しデザイン40選

CSSで簡単に作れる見出しデザイン40選|オシャレ装飾で見出しに存在感を
ホームページの重要な要素の1つである見出しですが、毎回似たり寄ったりのデザインになったり、作るのに時間がかかりすぎていたりしていませんか。今回は見出しデザインで悩む方に向けて、オシャレな装飾ができるCSSの見出しを紹介した記事をまとめました...
エラーが出たら、重複している命令はないか確認して修正していきます。
コメント