【Cocoon】見出し タグの設定変更方法

WordPress等

自分の為にも、編集の記録を書き残していきたいと思います。

最初に

Cocoon設定>スキン タグ から画面下部にあるテンプレートがありますので、そこから選択してみて下さい。

全体設定を変更できるようです。

上手く切り替わらない場合は、こちらを確認して下さい。HTTPの設定や

まずは、これを選択して、気に入らなければ、以下の内容について設定するといいと思います。

ブログを始めて5ヶ月目で初めて知りました。

VSA-CYCLIST
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の見出しを紹介した記事をまとめました。

エラーが出たら、重複している命令はないか確認して修正していきます。

コメント

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