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

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

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

  3. WordPress

    サイト立ち上げ作業に疲れてしまう理由

    こんにちは。藤江です。ワードプレスの立ち上げは、人生で何回もあ…

  4. WordPress

    【初心者向け】ムームードメインでドメインを取得する

    こんにちは。藤江です。ワードプレス立ち上げへの道。第一歩はここ…

  5. WordPress

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

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

  6. WordPress

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

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

メルマガ


 
 

note

最近の記事

スポンサーリンク




Twitter

  1. コミュニティ論

    コミュニティ主催者に向いているのはこんな人
  2. 起業・ビジネス

    起業お役立ち【裏】情報~やってはいけないこと編~
  3. マインドセット・考え方の枠組み

    あなたの役割は何ですか?
  4. マインドセット・考え方の枠組み

    本当の「強み」や「個性」や「魅力」を知るためには?
  5. つぶやき・仕事術

    自分のことを深く知りたいなら異なる環境に身を置くこと
PAGE TOP