WordPressの使い方とSNSに依存しないWeb戦略について発信しています

  1. ワードプレス

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

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

見出しもその一つ。

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

私のコラムサイトで以前使用していた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の表(テーブル)の縦線を表示したい

  2. 見出しの装飾カスタマイズが崩れてうまく表示されない

  3. WordPressで起業するメリットは?挫折しない?

  4. ワードプレス「セルのプロパティ」の高度な設定表示が出ない

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

スポンサーリンク


スポンサーリンク


有料コンテンツ

note

スポンサーリンク




Twitter

PAGE TOP