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

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

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

  2. WordPress

    ムームードメインで初めてドメインを取得する

    この記事では、ムームードメインで、初めてドメインを取得する方向けにお伝…

  3. WordPress

    WordPressプラグインなしで表をシンプルに変更したい

    表の表示って、ワードプレスのテーマによってちがうんですよね。編…

  4. WordPress

    UNWINDのグローバルナビの位置を変更する方法

    この記事では、ワードプレス無料テーマUNWINDのグローバルナビの位置…

  5. WordPress

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

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

  6. WordPress

    UNWINDのブログ一覧ページの設定

    この記事では、UNWINDのブログ一覧ページの見た目(レイアウト)の設…

メルマガ

note記事一覧

最近の記事

スポンサーリンク




Twitter

  1. WordPress

    アメブロからワードプレスに移行するときに注意したいこと
  2. WordPressプラグイン

    画像サイズ自動圧縮プラグインEWWW Image Optimizerの設定方法
  3. つぶやき・仕事術

    マインドとノウハウの前に、女性に必要なのはこれでした
  4. マネタイズ

    すでに持っているスキルをマネタイズするためには
  5. 起業・ビジネス

    相談業の人へ「相談を受けるときの4つのステップ」
PAGE TOP