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

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

見出し装飾例

上記サイトを参考にして、少し変えていくつか見出しを作ってみました。

左ボーダー&背景色ありの見出し

h3 {
padding: .5em .75em;
background-color: #f6f6f6;
border-left: 6px solid #F3A68C;
}

h3のところは、あなたのブログに合わせてh2やh4に変更してくださいね。

 

左&ボーダーラインの見出し

h3 {
position: relative;
padding: .25em 0 .5em .75em;
border-left: 6px solid #F3A68C;
}
h3::after {
position: absolute;
left: 0;
bottom: 0;
content: ”;
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
}

 

2色のボーダーラインの見出し

h3 {
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
h3::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: ”;
width: 20%;
height: 4px;
background-color: #F3A68C;
}

 

見出しの装飾が変わるだけでも気分が変わりますよね。

ぜひ試してみてください。

 

スポンサーリンク


関連記事

  1. WordPress

    WordPress無料テーマ「SELA」のトップページの設定あれこれ

    ホームページに合っているWordpress無料テーマ「SELA」。…

  2. WordPress

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

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

  3. WordPress

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

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

  4. WordPress

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

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

  5. WordPress

    アメブロからワードプレスに移行するときに注意したいこと

    仕事用のブログを、まだアメブロだけで何とかしようとする人もいますが、メ…

  6. WordPress

    ワードプレスの投稿ページと固定ページとは?

    こんにちは。藤江です。ワードプレスには2種類のページがあります…

メルマガ

 
 

note

最近の記事

  1. slack

スポンサーリンク




Twitter

  1. Business

    同年代の同性に起業相談するメリットとデメリットを考えてみた
  2. Blog・Writing✎

    アメブロで気をつけたい2つのこと
  3. Mind set

    「豊かさの循環」や「お金を払う許可」を唱える人の本音
  4. WordPress

    ドメイン取得の前に知っておきたい価格のハナシ
  5. Blog・Writing✎

    アメブロが2~3年前と変わってない気がする
PAGE TOP