WordPress

簡単にワードプレスの見出しを装飾したい

ワードプレスの無料テーマは、無料で使えることがメリットですが、いろいろなところがシンプルなデザインになっていたります。

見出しもその一つ。

今回は、見出しを簡単に装飾する方法を紹介します。

私のコラムサイトで使用しているOLSENというテーマで見ていきますね。

<before>

赤枠の部分が見出しです。(h3を使用)

<after>

シンプルな装飾を選んだので、わかりにくいかもしれませんが、拡大するとこんな感じです。

追加CSSに入力するだけ

プラグインや難しい設定は不要で、コピペして入力するだけです。

外観>カスタマイズ>追加CSS

装飾のコードをコピペしてください。

今回、私が選んだ見出しはこちらのコードです。

h3 {
padding: .75em 0;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}

シンプルな見出しを希望している方は、こちらのサイトが参考になります。

上記も使用させていただきました。

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

見出しやタイトルの装飾は、たくさんのサイトが紹介しているので、好みのものを探してみてくださいね。

 

スポンサーリンク


関連記事

  1. WordPress

    ワードプレスでSSLを設定する

    こんにちは。藤江です。ロリポップでSSLの設定できたら、ワード…

  2. WordPress

    Twitterでブログ画像シェアがうまくいかないときの対処法

    こちらの記事で紹介しているOLSENというテーマ(デザイン)のサイトを…

  3. WordPress

    【初心者向け】独自ドメインを登録する方法(ロリポップ以前から契約)

    こんにちは。藤江です。こちらの記事は、今回ドメインは新たに取得…

  4. WordPress

    UNWIND 初期設定のフォント(文字)を変更する方法

    この記事では、WordPressのテーマ「UNWIND」のフォント(文…

  5. WordPress

    サイトタイトルの英語スペルが大文字になってしまうときの対処法

    ワードプレスのサイトタイトルに小文字の英語を入力したのに、大文字になっ…

  6. WordPress

    ムームードメインで再びドメインを取得する(ムームーIDあり)

    この記事では、以前、ムームードメインでドメインを取得したことがある方向…

ブログ・文章・発信メルマガ

メルマガ

note記事一覧

最近の記事

スポンサーリンク




Twitter

  1. 起業・ビジネス

    認定講師になりたいアメブロ起業女子
  2. WordPressプラグイン

    WordPressにInstagramの画像を埋め込むプラグイン Instagr…
  3. WordPress

    SELAのグローバルナビの色を変更する方法
  4. つぶやき・仕事術

    好きなことを仕事にするときの”好き”の見つけ方
  5. WordPress

    サブドメインでサイトを作る方法
PAGE TOP