Press "Enter" to skip to content

WordPress.comでhタグに装飾を付ける方法

文章の中にメリハリを付けるための小さなデザイン

どんな装飾?

hタグ、つまり見出しに装飾をつけます。

WordPressで見出しのデザイン

今回は見出し文の左側にボックス、そして下には線をつけるというありきたりかもしれませんが、こういうデザインの装飾を施したいと思います。英語圏のテーマってこういうデザインないんですよね。

やり方は簡単。追加CSSをいじる

方法はとても簡単です。テーマのカスタマイズにある[追加CSS]に新しい記述を施して、各hタグに装飾をつけます。

テーマのカスタマイズ

WordPressのデザインカスタマイズ

[デザイン]>[カスタマイズ]をクリックします。

WordPressでテーマのカスタマイズ

画面左側のツールバーから[追加CSS]をクリックします。

これだけでCSSを追加記述できます。

追加CSS

WordPressの追加CSS

記述は、このように行います。

h2{
border-left: 15px solid #0f2350;
botder-bottom: 2px solid #0f2350;
padding-left: 10px;
}

これでh2タグは太線と下線のデザインを付与できます。他のh3とh4については皆様のお好きなようにデザインしてみてください😊

終わり

今回の記事はどうでしたでしょうか。
皆様のお役に立てていれば幸いです。
今回はこれにてSee you soon.

Be First to Comment

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください