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

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

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

  2. WordPress

    名刺より前にワードプレスを立ち上げるべき理由

    こんにちは。藤江です。ネットビジネスが全てではないですが、個人…

  3. WordPress

    リファラ「semalt」からのアクセスをサクッとブロックする方法

    参照元(リファラ)によくわからないドメインがありました。seo…

  4. WordPress

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

    こんにちは。藤江です。この記事は、今回初めてロリポップを契約し…

  5. WordPress

    センスが光る無料WordPressテーマ「UNWIND」

    今回は、センスを発揮してオシャレなサイトを作りたい人向けのワードプレス…

  6. WordPress

    サイトのタイトルとキャッチフレーズをつけよう

    こんにちは。藤江です。この記事では、サイトのタイトルとそれに関…

メルマガ


 
 

note

最近の記事

スポンサーリンク




Twitter

  1. 起業・ビジネス

    わくわく依存症に注意!起業女性が身につけたい両輪思考
  2. 起業・ビジネス

    キラキラ・自撮り・あれもこれも不要と言うコンサルにだまされない
  3. WordPressプラグイン

    ワードプレスのセキュリティ対策のプラグインSiteGuard WP Plugin…
  4. つぶやき・仕事術

    “今すぐ幸せ”に惑わされない、幸せになるための3つの条件…
  5. マネタイズ

    楽しさを提供する商品のつくり方
PAGE TOP