こんばんは~。今日はWordPressテーマNishiki proのカスタマイズ記事を書こうと思います。

今回のカスタマイズは、CSSで見出しの見た目を変える方法を書きます。

カスタマイズは自己責任でお願いいたしますm(__)m

ワードプレスの管理画面から、

外観→カスタマイズ→追加CSSの順に進んでください。

追加CSSの欄にCSSを追記します。

CSSで見出しのデザインをお好きなデザインに変える方法

見出しのタイトル例としてh2のデザインを変える方法です。

Nishiki proでは、カスタマイザーから簡単に見出しを変えられる機能がついていますが、それ以外のデザインにしたい場合は、

まず、外観→カスタマイズ→デザイン→見出し→なしに設定してください。

それから、H2の見出しを変えたい場合は、以下のように書きます。

.entry-content>h2 {
 お好きなコード
}

お好きなコードのところに、見出しデザインサイト様などで探したデザインを追記してください。

見出しのデザインはサルワカ君のサイトなどにたくさん記載されています。

【例】h2見出しの先頭に絵文字のハートマークを付ける作例

ここでは、例としてNishiki proに同梱されているアイコンフォントを使って見出しH2の前にアイコンを付けてみます。

以下のように記入します。

.entry-content>h2:before {
  content: "\e9da";
  font-family: "icomoon"
}

そうすると以下のようにh2の見出しが変わりました。

h2の前にハートがついている

Nishiki proではicomoonという絵文字の形式が導入されていますので、その記号\e9daを書いて、表示させます。

各アイコンの記号については、外観→テーマエディター→main.cssにアイコンの記号がずらっと記載されていますので、ここから記号を探してお好みの絵文字の記号を書いてください。

icomoonという絵文字の記号が書いてあります

なお、アイコンフォントの見た目の見本は、管理画面から、外観→Nishiki pro About Pageに載っていますので、お好みのアイコンを見つけてみてください。

以上Nishiki proの見出しのカスタマイズ方法でした。

高性能で書きやすいWordPressテーマNishiki pro、ぜひぜひおすすめいたします。

一生懸命書きましたが、もしどこか間違っていたら、詳しい方、教えていただけると助かります~。

ホーム/ワードプレス/WordPressテーマNishiki proの見出しのデザインのCSSカスタマイズ方法