【Cocoon】見出しをカスタマイズする

Cocoonを利用し始めたが、見出しが自分の好みにカスタマイズできるか調べてメモ。

カスタマイズの流れ

①現在のデザインをリセットする
 ↓
②好みの見出しを調べる
 ↓
③編集したコードを反映させる
 ↓
④動作確認

現在のデザインをリセットする

リセットするにはリセット用のコードをスタイルシートに追記する必要がある。

手順1-1 スタイルシートの編集画面を開く

WordPressのダッシュボードを開き、[外観]-[テーマエディタ]を開く。

右上の[編集するテーマを選択]で正しく選択されているか確認する。

手順1-2リセット用コードを入力する

下記のリセット用コードをスタイルシートにコピペする。

/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}

コピペする箇所は表示されているスタイルシートの最後尾。

貼り付け後は、[ファイルを更新]をクリック。

好みの見出しを調べる

いろいろなサイトでコードが公開されているので、自分で作るよりは好みのデザインを探して、カスタマイズする方が簡単。

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50
https://www.nxworld.net/tips/50-css-heading-styling.html

原色大辞典
https://www.colordic.org/

編集したコードを反映させる

反映は②のリセット用コードの下に追記すればよい。
画面下部の[ファイルを更新]をクリックし保存されれば反映の有無を確認する。

コメント

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