手作りアクセサリーを売りたい! ブログ運営(WordPress)

hタグの見出しデザインをCSSで簡単カスタマイズ

更新日:

AFFINGER4では、カスタマイズから各見出しの装飾デザインや色を変えることができるのは知っているよね。
しかし、装飾デザインは吹き出しのみしか変えられない。

ボクのブログはシンプルで読みやすい記事構成になるように心がけている。
記事内容にメリハリをつけ読みやすくするためにも、見出しのデザインや色はとても重要になってくる。

そこで見出しをCSSでカスタマイズすることにした。
このブログでは、H2タグをリボン見出しに、H4タグを左ボーダー&下ボーダーに装飾している。

 

スポンサーリンク

h2見出しのリボンデザインがこれ

h2見出しにこの装飾を使うことで、記事にしっかりと強調された区切りができる。

ちょっと濃い目の背景色にすると効果的だぞ。

今回CSSを使った見出しデザインのカスタマイズなのだが、背景色やフォントカラーの指定はあえてしなかった。

なぜなら、AFFINGERのカスタマイズを利用すれば、背景色やフォントカラーが自由に設定でき、グラデーションの見出しにまでカスタマイズもできてしまうからだ。

このカスタマイズ機能、使えなくするのは勿体無いからね。

ある程度自由度のある設定にすることで、もしあなたがブログをちょっとイメージチェンジしたいと思ったときに、AFFINGERのカスタマイズからいつでも自由に変更することができるちゅうわけなのだ。

ということで、リボンの見出しデザインに自由に背景色とフォントカラーなどが設定できる仕様になるようなCSSコードにした。

ちなみに、h3はAFFINGER4のカスタマイズに標準装備の吹き出しタイプの見出しを採用♪

この下の見出しね↓

リボン見出しを設定してみよう!

子テーマ(AFFINGER4)を用意する
なぜ、子テーマを使うのかというと、
これからこのようにカスタマイズをしていくことが多くなるでしょう。
その時に親テーマを直接カスタマイズしていくと、テーマをアップデートするとなったときに、
今までしてきたカスタマイズがすべて新しい親テーマにした途端に上書きされて全部消えてしまう恐れがあるからです。

そのような事態にならないように、親テーマは何もいじらず、カスタマイズ用として子テーマをいじっていくのです。

しかし、今回は子テーマは使わず、もうひとつのカスタマイズ用としてプラグインを使っていきます。

プラグイン「Simple Custom CSS」インストール&有効化
このプラグインも子テーマと同じ役割のものです。
テーマのアップロードがあったときに、カスタマイズしたCSSの内容が上書きされないためのプラグインです。

これからCSSのカスタマイズは、基本この「Simple Custom CSS」を利用していきます。

まずは、このプラグインをインストールして有効化していきましょう。

今回のCSSもこの「Simple Custom CSS」プラグインに書き足していきます。

 

WordPress編集画面

外観 ⇒「カスタムCSS」で編集

post-4027a

WordPress管理画面左メニューの外観のところから「カステムCSS」を選んでクリックして編集画面を開きます。

リボン見出しのCSSコードがこれ

/* リボン見出し */
.ribbon {
position: relative;
margin: 20px -10px 20px -10px;
padding: 10px 5px 10px 20px;
}
.ribbon:after, ribbon:before {
content: "";
position: absolute;
top: 100%;
height: 0;
width: 0;
border: 5px solid transparent;
border-top: 5px solid #333;
}
.ribbon:after {
left: 0;
border-right: 5px solid #333;
}
.ribbon:before {
right: 0;
border-left: 5px solid #333;
}

カスタムCSSの編集画面へこのCSSコードをコピペしよう。

 

左ボーダー&下ボーダー見出しを設定しよう

左ボーダー&下ボーダー見出しのCSSコードがこれ

/* 見出し4 */
.border {
  	position: relative;
	padding: .25em 0 .5em .75em;
	border-left: 6px solid #db6983;/* ←色を変更する */
}
.border::after {
	position: absolute;
	left: 0;
	bottom: 0;
	content: '';
	width: 100%;
	height: 0;
	border-bottom: 1px solid #ccc;
}

h4タグに使う見出しのCSSコードがこれだ。#db6983をあなたの好みの色に変更して使ってちょ。

 

CSSデザインされたhタグを記事に挿入

<h2 class="ribbon">H2見出しのタイトル</h2>
<h4 class="border">H4見出しのタイトル</h4>

このHTMLコードをコピーして、挿入したい記事の場所にペーストしよう。

 

まとめ

今回はボクのブログに導入しているhタグのカスタマイズ方法を紹介しました。
これが、それぞれのhタグの見出しです。

post-4759a

見出しは、文章を読みやすく、そしてなによりも分かりやすく伝えるための大事な部分です。
目立ちすぎても、目立たな過ぎてもいけません。

文章とのバランスがむずかしいんだよね。

これ以外にもいろいろと「見出し デザインサンプル」などで検索すればいろいろな見出しが見つかるので、あなたのWEBページに合うものを探してみてほしい。

この記事が気に入ったら
いいね ! しよう

スポンサーリンク

手作りアクセサリー作ってみたい

1

アクセサリーは一体どういう風に作られているのでしょか? あなたがもしこれから手作りアクセサリーの作り方を知って、 自分のオリジナルアクセサリーを作ってみたい、 そしてゆくゆくは販売もしていきたいと考え ...

2

本格的な手作りアクセサリーを作るには、彫金、銀粘土、ロストワックスの3つの方法で作ることが出来る。 もし、あなたが彼女や彼氏に手作りアクセサリーをプレゼントしたいと考えているならば、一体、3つのうちど ...

3

スタッドピアスには必ずストレートのピンが付いています。 ピアスピンと言ったり、ピアス棒、ピアスポストとも呼ばれるこのピンはどうやってピアスデザインとくっついているのか知っていますか? 通常、デザイン部 ...

4

手作りアクセサリーを作るといっても、プロはその作ったものを販売するという視点から作り方を考えていきます。 趣味で作る場合との大きな違いが、この考え方だと言っても過言ではありません。 今回はそんな商売と ...

5

アクセサリーを作るには、地金から作り出す彫金技法やワックスから作り出すロストワックス法があります。 あなたがもし、彫金やロストワックスをはじめたいと考えているのであれば、アクセサリーを作るために必要な ...

-手作りアクセサリーを売りたい!, ブログ運営(WordPress)
-, ,

Copyright© ピアスマップ , 2017 All Rights Reserved.