下川宜子 | ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント岡山

コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選

下川宜子 — Sat, 01 Oct 2022 21:00:31 +0000

今回はコピペで作れるCSSボタンデザインをご紹介していきます。

私が現場において使用頻度の高いものを中心に掲載しています。
後半では遊び心のあるボタンデザインも掲載していますので、シーンに合わせて使い分けて頂ければと思います。

ホバーアクション（マウスを重ねた時の変化）も合わせて入れてますので、すぐにご使用頂けます。

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

シンプルなボタンデザイン

Button

最もベーシックな長方形タイプの白抜きバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_01 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	transition: 0.5s;
}
a.btn_01:hover {
	color: #fff;
	background: #27acd9;
}

Button

最もベーシックな長方形タイプのベタ塗りバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_02 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	transition: 0.5s;
}
a.btn_02:hover {
	color: #27acd9;
	background: #fff;
}

Button

角丸タイプの白抜きバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_03 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_03:hover {
	color: #fff;
	background: #27acd9;
}

Button

角丸タイプのベタ塗りバージョン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_04 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	transition: 0.5s;
}
a.btn_04:hover {
	color: #27acd9;
	background: #fff;
}

立体的なボタンデザイン

Button

暗い色の下線を付けるだけで立体的なボタンに。マウスオンで実際にボタンを押したようなアクションに。

コードを表示

HTML

Button

CSS

a.btn_05 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
}
a.btn_05:hover {
	margin-top: 6px;
	border-bottom: 1px solid #0686b2;
	color: #fff;
}

Button

角丸タイプの立体的なボタン。マウスオンで実際にボタンを押したようなアクションに。

コードを表示

HTML

Button

CSS

a.btn_06 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 100vh;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
}
a.btn_06:hover {
	margin-top: 6px;
	border-bottom: 1px solid #0686b2;
	color: #fff;
}

Button

シャドウを付けて浮いたように見せた角丸ボタン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_07 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	color: #27acd9;
	border-bottom: 2px solid #27acd9;
	border-radius: 100vh;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	-webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, .3);
	transition: 0.5s;
}
a.btn_07:hover {
	color: #fff;
	background: #27acd9;
	border-bottom: 2px solid #fff;
	transform: translateY(3px);
}

Button

浮き出し効果で立体的なボタンデザインに。マウスオンで明るく変化します。

コードを表示

HTML

Button

CSS

a.btn_08 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: #27acd9;
	border: 6px outset #1699c5;
	color: #fff;
	transition: 0.5s;
}
a.btn_08:hover {
	background: #44c6f2;
	border: 6px outset #27acd9;
	color: #fff;
}

グラデーションのボタンデザイン

Button

濃淡のグラデーション+シャドウで高級感を出したボタンデザインに。マウスオンで透過します。

コードを表示

HTML

Button

CSS

a.btn_09 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: linear-gradient(to top, rgb(5, 130, 174), #27acd9);
	color: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_09:hover {
	color: #fff;
	opacity: 0.5;
}

Button

違う2色のグラデーション+シャドウでお洒落なボタンデザインに。マウスオンでグラデが左右反転します。

コードを表示

HTML

Button

CSS

a.btn_10 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
	border-radius: 100vh;
	color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	transition: 0.5s;
}
a.btn_10:hover {
	color: #fff;
	background-image: linear-gradient(to left, #27acd9 0%, #b4e12b 100%);
}

Button

モノトーンのグラデーション+シャドウによるリアルなボタンデザイン。マウスオンで透過します。

コードを表示

HTML

Button

CSS

a.btn_11 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background-image: linear-gradient(to top, #D8D9DB 0%, #fff 80%, #FDFDFD 100%);
	border-radius: 100vh;
	color: #333;
	border: 1px solid #999;
	text-shadow: 0 1px #fff;
	box-shadow: 0 3px 2px 1px #fcfcfc, 0 4px 6px #cecfd1, 0 -2px 2px #cecfd1, 0 -4px 2px #eee, inset 0 0 2px 2px #cecfd1;
	transition: 0.5s;
}
a.btn_11:hover {
	opacity: 0.5;
}

矢印やアイコンの付いたボタンデザイン

Button

左側に矢印の付いたボタンデザイン。マウスオンで少し明るい色に変化します。

コードを表示

HTML

Button

CSS

a.btn_12 {
	display: flex;
    justify-content: space-evenly;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem 1rem 3rem;
	font-weight: bold;
	background: #27acd9;
	color: #fff;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn_12::before {
	content: '';
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
a.btn_12:hover {
	background: #44c6f2;
	color: #fff;
}

Button

右側にスタイリッシュな矢印の付いたボタンデザイン。マウスオンで背景が色付きます。

コードを表示

HTML

Button

CSS

a.btn_13 {
	display: flex;
    justify-content: space-between;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	background: #eee;
	color: #27acd9;
	border-radius: 100vh;
	position: relative;
	transition: 0.5s;
}
a.btn_13::before {
	content: '';
	position: absolute;
	top: calc(50% - 2px);
	right: 1em;
	transform: translateY(calc(-50% - 2px)) rotate(45deg);
	width: 10px;
	height: 1px;
	background: #27acd9;
}
a.btn_13::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	transform: translateY(-50%);
	width: 50px;
	height: 1px;
	background-color: #27acd9;
}
a.btn_13:hover {
	background: #d4eef7;
	color: #27acd9;
}

Button

左側にFont Awesomeのアイコンを置いたボタンデザイン。

コードを表示

HTML

Button

CSS

a.btn_14 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border-bottom: 7px solid #0686b2;
	background: #27acd9;
	color: #fff;
}
a.btn_14:before {
    content: "\f0e0";
    position: relative;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 15px;
}
a.btn_14:hover {
	margin-top: 6px;
	border-bottom: 1px solid #0686b2;
	color: #fff;
}

カジュアルなボタンデザイン

Button

斜線で囲ったカジュアルなボタンデザイン。マウスオンで実線に変化します。

コードを表示

HTML

Button

CSS

a.btn_15 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	background-color: #e9f6fb;
	border-image-source: repeating-linear-gradient(45deg, #27acd9 0, #27acd9 6px, rgba(0, 0, 0, 0) 6px, rgba(0, 0, 0, 0) 8px);
	border-image-slice: 4;
	border-width: 4px;
	border-image-repeat: round;
	border-style: solid;
	color: #27acd9;
}
a.btn_15:hover {
	border: 4px solid #27acd9;
	color: #27acd9;
}

Button

右側にスタイリッシュな矢印の付いたボタンデザイン。マウスオンで背景が色付きます。

コードを表示

HTML

Button

CSS

a.btn_16 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 0.3rem;
	border: 2px dashed #27acd9;
	color: #27acd9;
	box-shadow: 5px 5px 0 #27acd9;
	transition: 0.3s ease-in-out;
}
a.btn_16:hover {
	box-shadow: 0 0 0;
	transform: translate(5px, 5px);
	color: #27acd9;
}

Button

囲み線をずらしたボタンデザイン。マウスオンで線と背景が重なってカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_17 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	color: #27acd9;
	background: #e1f3f9;
	transition: 0.3s ease-in-out;
}
a.btn_17::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border: 2px solid #27acd9;
  transition: 0.2s;
}
a.btn_17:hover {
	background: #27acd9;
	color: #fff;
}
a.btn_17:hover::before {
  top: 0;
  left: 0;
}

Button

太い囲み線+斜め後ろに影を入れたボタンデザイン。マウスオンで実際にボタンを押したようなアクションに。

コードを表示

HTML

Button

CSS

a.btn_18 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	position: relative;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 10px;
	color: #27acd9;
	border: 3px solid #27acd9;
	box-shadow: 5px 5px #27acd9;
	transition: 0.3s ease-in-out;
}
a.btn_18:hover {
	box-shadow: none;
	transform: translate(5px, 5px);
	color: #27acd9;
}

動くボタンデザイン

Button

上下に跳ねるボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_19 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_a 2s infinite;
}
@keyframes move_a {
    0% {transform: translate(0px, 4px);}
    5% {transform: translate(0px, -4px);}
    10% {transform: translate(0px, 4px);}
    15% {transform: translate(0px, -4px);}
    20% {transform: translate(0px, 4px);}
    25% {transform: translate(0px, -4px);}
    30% {transform: translate(0px, 0px);}
}
a.btn_19:hover {
	color: #27acd9;
	background: #fff;
}

Button

左右に揺れるボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_20 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_b 2s infinite;
}
@keyframes move_b {
    0% {transform: translate(4px, 0px);}
    5% {transform: translate(-4px, 0px);}
    10% {transform: translate(4px, 0px);}
    15% {transform: translate(-4px, 0px);}
	20% {transform: translate(4px, 0px);}
    25% {transform: translate(-4px, 0px);}
    30% {transform: translate(0px, 0px);}
}
a.btn_20:hover {
	color: #27acd9;
	background: #fff;
}

Button

シーソーのように中心を軸にゆらゆら揺れるボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_21 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_c 1s infinite;
}
@keyframes move_c {
    0% {transform: translate(0px, 0)}
    50% {transform: translate(0px, 0) rotateZ(5deg)}
}
a.btn_21:hover {
	color: #27acd9;
	background: #fff;
}

Button

ピコピコとボタンを押す動きを繰り返すボタンデザイン。マウスオンでカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_22 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	background: #27acd9;
	color: #fff;
	border-radius: 5px;
	transition: 0.5s;
	animation: move_d 2s infinite;
	box-shadow: 0 5px 0 rgb(6, 134, 178, 1);
	position: relative;
}
@keyframes move_d {
    0% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}
    10% {box-shadow: 0 0 0 rgb(6, 134, 178, 1); top: 5px;}
    20% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}
    30% {box-shadow: 0 0 0 rgb(6, 134, 178, 1); top: 5px;}
    40% {box-shadow: 0 5px 0 rgb(6, 134, 178, 1); top: 0px;}
}
a.btn_22:hover {
	color: #27acd9;
	background: #fff;
	border: 2px solid #0686b2;
}

ホバーアクションが個性的なボタンデザイン

Button

マウスオンで左側から色が変わります。

コードを表示

HTML

Button

CSS

a.btn_23 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border: 2px solid #27acd9;
	color: #27acd9;
	cursor: pointer;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
}
a.btn_23::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgb(39, 172, 217);
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}
a.btn_23:hover::before {
	transform: translateX(0);
}
a.btn_23:hover {
	color: #fff;
}

Button

マウスオンで下側から円形状に色が変わります。

コードを表示

HTML

Button

CSS

a.btn_24 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	font-weight: bold;
	border-radius: 4px;
	border: 1px solid #27acd9;
	color: #27acd9;
	position: relative;
 	overflow: hidden;
 	z-index: 1;
	transition: all 0.2s ease-in;
}
a.btn_24:before {
 content: "";
 position: absolute;
 left: 50%;
 transform: translateX(-50%) scaleY(1) scaleX(1.25);
 top: 100%;
 width: 140%;
 height: 180%;
 background-color: rgba(0, 0, 0, 0.05);
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

a.btn_24:after {
 content: "";
 position: absolute;
 left: 55%;
 transform: translateX(-50%) scaleY(1) scaleX(1.45);
 top: 180%;
 width: 160%;
 height: 190%;
 background-color: #27acd9;
 border-radius: 50%;
 display: block;
 transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
 z-index: -1;
}

a.btn_24:hover {
 color: #ffffff;
 border: 1px solid #27acd9;
}

a.btn_24:hover:before {
 top: -35%;
 background-color: #27acd9;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

a.btn_24:hover:after {
 top: -45%;
 background-color: #27acd9;
 transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

Button

マウスオンでグラデーションに変化します。

コードを表示

HTML

Button

CSS

a.btn_25 {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	text-decoration: none;
	height: 4rem;
	width: 120px;
	margin: auto;
	padding: 0 4rem;
	border-radius: 100vw;
	background: #6a6e78;
	background-size: 400%;
	color: #fff;
}
a.btn_25:hover::before {
  transform: scaleX(1);
}
a.btn_25:hover {
	color: #fff;
}
a.btn_25 span {
  position: relative;
  z-index: 1;
}
a.btn_25::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
  transform-origin: 0 50%;
  width: 100%;
  height: inherit;
  border-radius: inherit;
  background: linear-gradient(
    82.3deg,
    rgba(39, 172, 217, 1) 10.8%,
    rgba(18, 83, 229, 1) 94.3%
  );
  transition: all 0.475s;
}

Button

マウスオンでシャドウがモワッと広がります。

コードを表示

HTML

Button

CSS

a.btn_26 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	border-radius: 100vw;
	color: #fff;
	background: #27acd9;
}
a.btn_26:hover {
	background-position: right center;
	background-size: 200% auto;
	-webkit-animation: pulse 2s infinite;
	animation: shad26 1.5s infinite;
	color: #fff;
}
@keyframes shad26 {
	0% {box-shadow: 0 0 0 0 #27acd9;}
	70% {box-shadow: 0 0 0 10px rgb(39 172 217 / 0%);}
	100% {box-shadow: 0 0 0 0 rgb(39 172 217 / 0%);}
}

Button

マウスオンでラインで囲いながらカラーが反転します。

コードを表示

HTML

Button

CSS

a.btn_27 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	color: #fff;
	font-weight: bold;
	background: #27acd9;
	position: relative;
	transition: 0.3s ease-in-out;
}
a.btn_27:hover {
    background: #fff;
    color: #27acd9;
}
a.btn_27:before, a.btn_27:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
a.btn_27:before {
  top: 0;
  left: 0;
}
a.btn_27:after {
  bottom: 0;
  right: 0;
}
a.btn_27:hover:before, a.btn_27:hover:after {
  width: 100%;
  height: 100%;
}
a.btn_27:hover:before {
  border-top-color: #27acd9;
  border-right-color: #27acd9;
  transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
}
a.btn_27:hover:after {
  border-bottom-color: #27acd9;
  border-left-color: #27acd9;
  transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
}

Button

マウスオンで全体がグラデーションに変化します。

コードを表示

HTML

Button

CSS

a.btn_28 {
	margin: auto;
	width: 240px;
	padding: 3px;
	align-items: center;
	text-align: center;
	background-image: linear-gradient(145deg,#27acd9 , #195892 50%,#b4e12b);
	border: 0;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	display: flex;
	justify-content: center;
	text-decoration: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s;
}
a.btn_28:active,a.btn_28:hover {
 outline: 0;
}
a.btn_28 span {
 background: #000;
 padding: 1rem 4rem;
 border-radius: 6px;
 width: 100%;
 height: 100%;
 transition: 300ms;
}
a.btn_28:hover span {
 background: none;
	color: #fff;
}

Button

マウスオンでキラリと光ります。

コードを表示

HTML

Button

CSS

a.btn_29 {
	display: block;
	text-align: center;
	vertical-align: middle;
	text-decoration: none;
	width: 120px;
	margin: auto;
	padding: 1rem 4rem;
	position: relative;
	border-radius: 5px;
	border: 1px solid #27acd9;
	font-weight: bold;
	letter-spacing: 2px;
	background: transparent;
	color: #27acd9;
	overflow: hidden;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
a.btn_29:hover {
	color: #fff;
	background: #27acd9;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
a.btn_29:hover::before {
	-webkit-animation: sh02 0.5s 0s linear;
	-moz-animation: sh02 0.5s 0s linear;
	animation: light 0.5s 0s linear;
}
a.btn_29::before {
	content: '';
	display: block;
	width: 0px;
	height: 86%;
	position: absolute;
	top: 7%;
	left: 0%;
	opacity: 0;
	background: #fff;
	box-shadow: 0 0 50px 30px #fff;
	-webkit-transform: skewX(-20deg);
	-moz-transform: skewX(-20deg);
	-ms-transform: skewX(-20deg);
	-o-transform: skewX(-20deg);
	transform: skewX(-20deg);
}
@keyframes light {
	from {opacity: 0; left: 0%;}
	50% {opacity: 1;}
	to {opacity: 0;left: 100%;}
}

Thanks
Button

マウスオンでテキストと背景の表示が立体的に切り変わります。

コードを表示

HTML


		Thanks
    	Button

CSS

a.btn_30 {
	display: flex;
	vertical-align: middle;
	text-decoration: none;
	margin: auto;
	width: 20em;
	height: 4em;
	color: #ccc;
	cursor: pointer;
	transition: all 0.85s cubic-bezier(.17,.67,.14,.93);
	transform-style: preserve-3d;
	transform-origin: 100% 50%;
}
a.btn_30:hover {
	transform: rotateX(-90deg);
}
a.btn_30 .side {
	box-sizing: border-box;
	position: absolute;
	display: inline-block;
	width: 20em;
	text-align: center;
	padding: 1.2rem 4rem;
	font-weight: bold;
	letter-spacing: 2px;
}
a.btn_30 .top {
	background: #b4e12b;
	color: #fff;
	transform: rotateX(90deg) translate3d(0, 0, 2em);
}
a.btn_30 .front {
	background: #27acd9;
	color: #fff;
	transform: translate3d(0, 0, 2em);
}

まとめ

今回も様々なサイトで使い回しができるように、なるべくシンプルに仕上げました。
一見シンプルなボタンでもホバーアクションを工夫すればデザイン性もグッと上がりますね！
是非ご活用ください！

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談　ご利用後の流れ

しつこい電話セールスなどは一切いたしません。逆に、弊社サービスをご検討頂ける場合には、お見積もりやサービス内の詳細についてご案内をさせて頂きます。

ただ、メルマガの登録だけお願いします。
このメルマガでは新サービスの案内やコラムの更新情報のご案内をしております。

メルマガの解除はいつでもできますので、そこだけご理解とご協力をお願いいします。

▼お申し込みはこちらから

Web集客の無料相談こちらをクリック

Webで売上を伸ばすためには、
「認知」「集客」「教育」「販売」
このステップが大事です。

しかし、Webで売上を伸ばせていないほとんどのケースは、この4つを正しく理解して運用出来ていません。

例えば、、、

あなたのお客様について適切な分析が出来ていない
マーケットを正しく分析が出来ていない
SNSやブログについて正しい知識が無い
Web集客の対策に必要な技術や時間がない
売れる仕組みの確立が出来ていない

この内容は、我々のようなWeb集客の専門業者でも日々情報を集め、何度もテストを繰り返し失敗を重ねながら正解を探している工程です。
その工程を無くして、Webからの売上を伸ばす事が出来るでしょうか？

無理ですよね。

エクセレントでは、Webを利用して売上を伸ばす「認知」「集客」「教育」「販売」このステップについてしっかりとサポートさせて頂きます。

あなたの商品やサービスについて分析し、売上アップ出来るまで伴走型サポートにて対応させて頂きます。

そんな当社の売上アップのための伴走型サポートについてご興味がございましたら、お気軽にお電話・メール・LINEにてご連絡ください。

お問い合わせはこちら

Instagram運用によるWeb集客が得意な会社　株式会社エクセレント

The post コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

コピペで使える！ビジネスブログ向けの囲み枠デザイン20選

下川宜子 — Thu, 25 Aug 2022 21:00:52 +0000

今回はオウンドメディアサイトなどで活用できる、囲み枠（ボックスデザイン）をご紹介したいと思います。
HTML+CSSだけで構成していますので、コピペですぐに使えます！
背景色（background）、線（border）の太さや色、枠と本文の間隔（padding）を調整して、ご自身のサイトに合った雰囲気にカスタマイズすることも可能です。

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

シンプルな囲み枠

枠線だけのシンプルなボックス。線（border）の太さを変えれば、スタイリッシュにもカジュアルにもなります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_01 {
	border: solid 2px #27acd9;
	padding: 1em;
	}

点線のボックス。実線よりもカジュアルな印象になります。線（border）の太さを変えるだけでもまた違った雰囲気に。

コードを表示

HTML

ここに文章を入れる

CSS

.box_02 {
	border: dashed 3px #27acd9;
	padding: 1em;
	}

二重線と角丸にしたボックス。角の丸み（border-radius）の数値を大きくするほど、より柔らかな印象になります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_03 {
	border: double 4px #27acd9;
	border-radius: 10px;
	padding: 1em;
	}

背景に色を入れたボックス。背景に濃い色を設定する場合は、文字色を白にすれば読みやすくより強調されます。

コードを表示

HTML

ここに文章を入れる

CSS

.box_04 {
	background: #eaf5f9;
	padding: 1em;
	}

背景と枠線を組み合わせたボックス。これまでの枠線（border）のCSSを参考して、実線（solid）・二重線（double）などに変えて様々なスタイルにカスタマイズできます。

コードを表示

HTML

ここに文章を入れる

CSS

.box_05 {
	background: #eaf5f9;
	border: dotted 2px #27acd9;
	padding: 1em;
	}

2種類の要素を組み合わせて作ったボックス。少しの工夫でデザイン性が格段にアップしますね。

コードを表示

HTML


ここに文章を入れる

CSS

.box_06 {
	border: solid 1px #27acd9;
	padding: 0;
	}
.box_06_txt {
	border: solid 10px #eaf5f9;
	padding: 1em;
	margin: 0;
	}

立体的な囲み枠

シンプルに影を付けた立体的なボックス。右下にふんわりシャドウを付けることで、少し浮いたように見せています。

コードを表示

HTML

ここに文章を入れる

CSS

.box_07 {
	border: solid 1px #27acd9;
	box-shadow: 2px 5px 5px #eeeeee;
	padding: 1em;
	}

グラデーションを使ったボックス。背景をワントーンのグラデーションにすることで、立体感を出しました。下部を暗い色にすることがポイント！自然な立体感を表現することが可能です。

コードを表示

HTML

ここに文章を入れる

CSS

.box_08 {
	background: linear-gradient(
    to top,
    #d8d8d8 0%,
    #eeeeee 30%,
    #f8f8f8 100%
  );
	border-radius: 10px;
	padding: 1em;
	}

下側に線を入れて立体感を出したボックス。分厚いボード風になりました。カジュアルなサイトでのご使用がおすすめです。

コードを表示

HTML

ここに文章を入れる

CSS

.box_09 {
	color: #fff;
	background: #27acd9;
	border-bottom: solid 8px #0f8fbb;
	border-radius: 10px;
	padding: 1em;
	}

デザイン性のある囲み枠

吹き出しデザインの囲み枠。文章とは別にワンポイントのアドバイスなど、少しくだけたコメントを載せるのにもおすすめです。

コードを表示

HTML

ここに文章を入れる

CSS

.box_10 {
	position: relative;
	padding: 1em;
	color: #fff;
	background: #27acd9;
	}
.box_10::after {
	position: absolute;
	content: '';
	top: 100%;
	left: 50px;
	border: 15px solid transparent;
	border-top: 15px solid #27acd9;
	width: 0;
	height: 0;
}

角を折ったメモ風デザインの囲み枠。ベースの背景が薄い色でも、角の折れた部分を濃い色にすることでアクセントになり、目に留まりやすい項目となります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_11 {
	position: relative;
	background: #eaf5f9;
	padding: 1.5em;
	border: solid 1px #27acd9;
	}
.box_11::after {
	position: absolute;
	content: '';
	left: -1px;
	top: -1px;
	border-style: solid;
	border-width: 0 0 20px 20px;
	border-color: #fff #fff #27acd9;
	}

便箋風デザインの囲み枠。テキストに下線を付けて行間にゆとりを持たせることがポイントです。長い文章を掲載すると固い印象になりがちですが、こうして便箋デザインにすることで柔らかな印象になり、格段に読みやすくなります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_12 {
	background: #eaf5f9;
	padding: 2em 1.5em 1.5em;
	}
.box_12 span {
	border-bottom: solid 1px #97C4D4;
	line-height: 2;
	}

ルーズリーフ風デザインの囲み枠。先ほどの便箋スタイルにプラスして、サイドにパンチ穴の丸を並べることで、ルーズリーフに早変わり。よりカジュアルな印象になります。

コードを表示

HTML

ここに文章を入れる

CSS

.box_13 {
	background: #eaf5f9;
	border-left: 10px dotted rgba(0,0,0,.1);
	box-shadow: 0 0 0 15px #eaf5f9;
	padding: 1em 1em 1em 1.5em;
	}
.box_13 span {
	border-bottom: solid 1px #97C4D4;
	line-height: 2;
	}

ステッチの付いた布風デザインの囲み枠。点線で囲んで縫い目を表現しています。ソーイングやハンドメイド関連のサイトで活躍しそうですね。線（border）の太さを調整すればまた印象が変わって見えますので、お好みでお試しください。

コードを表示

HTML

ここに文章を入れる

CSS

.box_14 {
	background: #27acd9;
	color: #fff;
	border: 2px dashed #fff;
	box-shadow: 0 0 0 10px #27acd9;
	padding: 1em;
	border-radius: 2px;
	}

タイトル付きの囲み枠

タイトル部分

シンプルなタイトルを付けた囲み枠。スタイリッシュな印象なのでビジネスライクなサイトで活躍するシンプルなスタイルです。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_15 {
	background: #eaf5f9;
	padding: 1.5em;
	}
.box_15_ttl {
	border-left: solid 4px #27acd9;
	padding-left: 15px;
	color: #27acd9;
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 10px;
	}
.box_15_txt {
	margin-top: 10px;
	}

タイトル部分

上部にタイトルを入れた囲み枠。太いタイトルの帯が目立ちますので、要点をまとめたい時などに活躍します。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_16 {
	border: 1px solid #27acd9;
	}
.box_16_ttl {
	margin: 0;
	background: #27acd9;
	color: #fff;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	}
.box_16_txt {
	margin: 0;
	padding: 1em;
	}

タイトル部分

リボン風のタイトルを付けた囲み枠。リボンの折り返し部分を付けただけで、シンプルながらおしゃれな印象になります。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_17 {
	position: relative;
	background: #eaf5f9;
	}
.box_17_ttl {
	position: relative;
	display: inline-block;
	padding: 0.5em 2em;
	background: #27acd9;
	color: #fff;
	font-weight: bold;
	top: 20px;
	left: -10px;
	}
.box_17_ttl::before {
	position: absolute;
	content: '';
	top: 100%;
	left: 0;
	border: none;
	border-bottom: solid 10px transparent;
	border-right: solid 10px rgb(149, 158, 155);
	}
.box_17_txt {
	margin: 0;
	padding: 1em 1.5em 1.5em;
	}

タイトル部分

囲み枠の上部にタイトルを挟んだスタイル。シンプルなデザインなので目立ちすぎず、補足説明の要素として配置するのにおすすめです。枠線とタイトルの文字色を統一するのが見やすさのポイントです！

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_18 {
	position: relative;
	padding: 1.5em;
	border: 2px solid #27acd9;
	}
.box_18_ttl {
	position: absolute;
	padding: 0 0.5em;
	left: 30px;
	top: -10px;
	background: #fff;
	font-weight: bold;
	color: #27acd9;
	}

タイトル部分

タイトルタブを上側に付けた囲み枠。これもシンプルですが、タブにポイントカラーを入れることで目立たせています。

コードを表示

HTML

ここにタイトルを入れる

ここに文章を入れる

CSS

.box_19_ttl {
	background: #27acd9;
	color: #fff;
	font-weight: bold;
	padding: 0.5em 1em 0.2em;
	display: inline-block;
	margin-bottom: 0;
	border-radius: 5px 5px 0 0;
	}
.box_19 {
	border: 1px solid #27acd9;
	background: #eaf5f9;
	padding: 1em;
	}

タイトル部分

いろいろな要素を組み合わせた囲み枠。一つのコンテンツとしてしっかり魅せらるデザイン性です。

コードを表示

HTML


ここにタイトルを入れる
ここに文章を入れる

CSS

.box_20 {
	border: 1px solid #27acd9;
	background: #eaf5f9;
	padding: 1.5em;
	}
.box_20_ttl {
	border-left: solid 4px #27acd9;
	padding-left: 10px;
	color: 27acd9;
	font-size: 1.2em;
	font-weight: bold;
	margin-bottom: 15px;
	}
.box_20_txt {
	background: #fff;
	border-radius: 10px;
	padding: 1em;
	margin-top: 10px;
	box-shadow: 0 2px 3px #ccc;
	}

まとめ

いかがでしたでしょうか？
今回はビジネスでも活用できそうなシンプルなボックスデザインでまとめています。
CSSを組み合わせればパターンは無限に増えていきます。お好みでカスタマイズしてご利用ください。

無料相談の流れ

1.お申込み

下記お申込フォームより、お気軽にご連絡ください。

2.日程調整

担当より日程のご連絡をいたします。

3.無料相談

30分程度の相談会を実施いたします。

4.商談

弊社サービスをご検討頂ける場合には、お見積もりやサービスのご案内をさせて頂きます。

無料相談　ご利用後の流れ

▼お申し込みはこちらから

Web集客の無料相談こちらをクリック

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

インスタ集客とブログ集客で反応率を3倍に引き上げるホームページ制作会社　株式会社エクセレント

The post コピペで使える！ビジネスブログ向けの囲み枠デザイン20選 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

Google Search Consoleで表示される「孤立したページ」を見つける方法

下川宜子 — Wed, 15 Jun 2022 21:00:15 +0000

今回はGoogle Search Consoleで「孤立したページ」を見つける方法をご紹介します！

「孤立したページ」とは、サイト内のどこからも「内部リンク」が貼られていないページのことです。

内部リンクについてはこちらで詳しく解説していますのでご参照ください。
▼該当記事

2022.06.12

SEO対策に効果的な内部リンクを設定する方法

この記事では「SEO対策に効果的な内部リンクを設定する方法」をご紹介します！ SEO対策を行うのであれば、「内部リンク」を最適化するこ...

テスト用の一時的なページを放置している
今は活用していない古いコンテンツが残っている
内部リンクの重要性を知らない

1つでも心当たりのある方は、「孤立したページ」が及ぼす影響を理解した上で対処していかれることをおすすめします。

孤立したページがSEOに与える影響

検索ロボットのクローラーは内部リンクを辿ってサイト内を巡回しますので、どのページからもリンクが貼られていないページはクローラーに認識されにくい状態にあります。
そのため、孤立したページは重要ではないと見なされ、インデックスされなくなる可能性があることからSEOに与える影響は大きいと言えます。

当然にサイトを訪れたユーザーも該当のページを見つけることができません。

孤立しているページは、一時的にテストで作ったページであったり、活用していないコンテンツであったり、何かしらの理由があって孤立しているはずです。
まずは、孤立したページを見つけて、削除するか、ページの内容を見直してサイト内の適切な場所に内部リンクを設置しましょう。

孤立したページの見つけ方

サイト内の全ページを確認して、内部リンクを確認していくのは大変な労力と時間を費やしますが、Google Search Console（Googleサーチコンソール）を活用すれば、簡単に孤立したページを見つけられます！

それでは早速、Googleサーチコンソールの設定方法から見て行きましょう。

STEP1：Google Search Consoleにログインする

まずは「Google Search Console」で検索して、ログインページを開きましょう。
Googleアカウントでログインしてください。

※Googleアカウントをお持ちでない場合は、「アカウントを作成」から登録の上でログインしましょう

STEP2：サイトを登録する

「ドメイン」または「URLプレフィックス」のいずれかのタイプで対象のサイトを登録します。
「URLプレフィックス」を選択すればGoogleアナリティクスを連携することも可能なので、今回は「URLプレフィックス」タイプで登録を進めたいと思います。
サイトのURLを入力して「続行」ボタンをクリックします。

STEP3：所有権の確認を行う

サイトの所有権を確認する為の画面が開きます。
確認方法はいくつかありますが、ここではウェブサイトにHTMLファイルをアップロードする方法を説明します。
該当のHTMLファイルをダウンロードします。

ダウンロードしたHTMLファイルをサーバーのルートドメインの直下にアップロードします。

Google Search Consoleの画面に戻り、「確認」ボタンをクリックします。

「所有権を証明しました」と表示されれば、無事に設定が完了です。
そのまま「プロパティに移動」をクリックして内容を確認していきましょう。

STEP4：インデックス未登録ページの確認

左側のメニューから「カバレッジ」を選択して、メインコンテンツ内の「除外」にチェックを入れます。

ページを下にスクロールして「検出 – インデックス未登録」を選択します。

インデックス未登録ページのリストが表示されます。

ここに表示されたURLのページは、以下のような原因が考えられます。

（1）サイト内からリンクが貼られていない孤立したページ
（2）noindex ディレクティブによって意図的に除外されている場合
（2）サイトの過負荷などの理由により、クロールの再スケジュールが必要となった場合

この中から（1）の孤立したページであるかチェックしていきます。

STEP5：内部リンクの確認をする

STEP4で出したURLのリストを元に、孤立したページかどうかを確認するため、ウィンドウを複製してから進むと後々スムーズです。
左側のメニューから「リンク」を選択して、表示された画面右側の「詳細」をクリックします。

フィルタリングアイコンをクリックして、「ターゲットページ」にチェックを入れます。

下図の赤枠で囲った部分に、STEP4で表示されたリストのURLをコピーして貼り付けます。

内部リンクが検出されれば、内部リンクは受けているが何らからの原因でページがインデックスされていないということになります。

下図のように何も表示されなければ、どこからも内部リンクを受けていない判定となり「孤立したページ」とわかります。

同様に他のURLも1つずつチェックしてみましょう。

まとめ

当サイトでも、システム上意図的に孤立させたページに紛れて、削除し忘れたディレクトリが見つかりました。

このような不要なページが多くあると、SEOの観点でもサイト自体の評価が下がってしまいます。孤立したページの対処をして、サイトの品質向上に努めましょう！

SEOでお困りのことがありましたら、お気軽にお問い合わせください。

▼関連記事

2022.03.30

無料で利用出来るSEOチェックツール20選！【初心者向け】

SEO対策と言っても、正しく対策が出来ているか分からない・・・そんな時に便利なのがSEOチェックツール！ SEOツールを使えば効率...

2022.08.29

検索意図とは？SEO対策で重要な調べ方と考え方を解説します。

検索意図とは、ユーザーが検索するときに考えていることです。具体的には、ユーザーがGoogleやYahooなどの検索エンジンでキーワー...

2022.03.21

SEO対策の費用・料金相場を早見表で徹底解説【2022年最新版】

SEO対策費用・料金について SEO対策の費用・料金は、対応する会社やサービス内容によって価格が違います。ここではSEO対策の費用...

▼関連サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策と商品ページ制作代行ならエクセレント

The post Google Search Consoleで表示される「孤立したページ」を見つける方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

SEO対策に効果的な内部リンクを設定する方法

下川宜子 — Sat, 11 Jun 2022 21:00:07 +0000

この記事では「SEO対策に効果的な内部リンクを設定する方法」をご紹介します！

SEO対策を行うのであれば、「内部リンク」を最適化することが重要です。
内部リンクを正しく理解して適切に設置することで、検索順位の上位化が期待できます。

内部リンクって何？
なぜSEOと内部リンクが関係あるの？
どこにどうやって設置すれば良いの？

このような疑問をお持ちの方に、効果的な内部リンクの貼り方や注意点をわかりやすく解説していきます。

内部リンクとは？

内部リンクとは、自サイト内のページを繋ぐリンクのことを呼びます。
逆に、他のサイトへ飛ばすリンクのことを外部リンクと言います。

ページを探しにくい・関連するコンテンツからたどりにくい等の問題があるサイトは、この内部リンクを上手に設置できていない可能性があり、ユーザーの利便性が損なわれます。

それだけでなく、内部リンクはSEOとも密接な関係があるので、内部リンクの重要性をしっかり理解していきましょう。

内部リンクとSEOの関係性

ネット上にはクローラーという検索ロボットがあります。このクローラーがサイトを巡回して情報を持ち帰り、サイトを評価して表示順位が決められています。

クローラーはリンクを辿る性質があり、このリンクによってサイト内のページを移動します。その為、適切に内部リンクが貼られているサイトはクロールされやすくなり、SEOで良い評価をしてもらえる可能性が高まります。

ただし、とにかく内部リンクを設置すればいいというものではありません！
SEOに効果があるからといって、サイト内の関連性が無いページへもむやみにリンクを貼るのはNGです。こうした不自然な内部リンクが増えれば、検索エンジンからペナルティ判定を受ける可能性があるので注意が必要です。

あくまでも、ページ同士の関連性を考慮してリンクさせることが重要です。

内部リンク最適化の4つポイント

内部リンクを効果的に設置するには、以下の4点に気を付けましょう！

サイト内の関連するページへリンクさせる
リンクはページ同士を相互に繋げる
リンク先の内容と一致するアンカーテキストにする
重要なページに内部リンクを集める

それぞれ詳しく見ていきましょう！

【ポイント1】サイト内の関連するページへリンクさせる

内部リンクを設置する際は、リンク元ページとリンク先ページの関連性を重視する必要があります。

関連するページの内部リンクを貼ることで、ユーザーは目的の情報を見つけやすくなり、サイト内の回遊率が上がってユーザビリティの向上が期待できます。
これによってユーザーの平均セッション時間が上がり、サイトパフォーマンスが良くなることで、検索エンジンからの評価が上がりさらなる上位化が期待できるようになります。

【ポイント2】リンクはページ同士を相互に繋げる

先に述べた通り、クローラーは内部リンクをたどってサイトを巡回していくため、一方通行のリンクでは行き止まりが生じます。ユーザーの離脱率や直帰率も上がってしまうでしょう。

さらに、どこからも内部リンクが貼られていない孤立したページは、クローラーから認識されにくくなります。そのため重要ではないページと判断され、インデックスされない事態となります。

内部リンクは、必ず相互に繋げましょう。

【ポイント3】リンク先の内容と一致するアンカーテキストにする

「アンカーテキスト」とは、aタグで囲んだテキストのことです。

よくあるNG例ですが、「詳しくはこちら」等の文言でリンクを貼るのは避けてください！
アンカーテキストは、検索エンジンに対してリンク先ページの内容を伝える役割を担っているため、「詳しくはこちら」等の漠然としたワードでは効果的なリンクになりません。

内部リンクを貼るときは、アンカーテキストの文言とリンク先のコンテンツの内容を一致させましょう。具体的には、リンク先のページタイトルをそのままアンカーテキストの文言にすることをおすすめします。

【ポイント4】重要なページに内部リンクを集める

内部リンクは評価を高めたいページに対して集中して貼ることが大切です。

検索エンジンは、ページの内部リンクの数をページ重要度の判定の一つとしており、内部リンクが多く貼られているページは、重要なページであると判断され検索順位の上昇に繋がります。
サイト名で検索した時にトップページが1番に表示されるのは、最も内部リンクを受けているからです。

ただし、繰り返しとなりますが関連性のないのリンクは評価を落としますのでやめましょう。

効果的な内部リンクの設置場所

具体的にサイト内のどこへ内部リンクを貼るのが適切なのか紹介します。
当サイトの表示例とともに詳しく見ていきましょう！

ナビゲーション（ヘッダー・サイド・フッター）
パンくずリスト
サイトマップ
ページ本文

ナビゲーション（ヘッダー・サイド・フッター）

ヘッダー・サイド・フッターは全ページに共通で設置されているナビゲーションです。
サイトの主要なページを表示させることができ、探しているページがあるユーザーはナビゲーションからページを辿っていくので重要なリンクです。

ヘッダー（グローバルナビゲーション）

サイドメニュー

フッター

パンくずリスト

パンくずリストとは、上位の階層から順にリスト表示しているもので、ユーザーがサイト内の現在位置を把握するのに役立ちます。パンくずリストを見れば、どのカテゴリーに属するページなのか直感的に理解できます。

ユーザーだけでなくクローラーの巡回しやすさも向上するため、検索エンジンにサイトの構造を正しく伝えることができます。

サイトマップ

サイト内のすべてのページの構成をリストでまとめたページのことを、サイトマップといいます。クローラーの巡回・ユーザの使いやすさの両面から重要な役割を担います。

クローラビリティという観点では、クロールを促してインデックスを促進するXMLサイトマップのみでも十分だと言われていますが、HTMLサイトマップを設置することでユーザが目的のコンテンツにすばやくたどり着くことができるためユーザビリティの向上に役立ちます。

ページ本文

本文とは、ヘッダー・サイド・フッターなどのナビゲーションを除く、ページのメイン部分のことです。

設置場所として挙げた4つの中でも、ページの本文中に設置する内部リンクが最も重要です。
検索エンジンは、サイト共通部分よりも本文の内部リンクを重要と判断するためです。

本文内に内部リンクを設置する方法としては、テキストリンクの他に、ブログカードで設置する方法があります。

ブログカードはアイキャッチ画像があり目につきやすいため、本サイトでも頻繁に利用しています。

▼ブログカード表示例

目立つが故に本文を集中して読みたい人にとっては邪魔になることもあり、さらには、広告と表示が似ているためクリックするのを嫌煙する人もいます。

そのため、ブログカードを設置する場合は、リード文の後などの本題に入る前や、本文の最後に入れると良いでしょう。

文章中にはテキストリンクで、目立たせたい関連記事は本文の前後にブログカードで設置するなど、上手く使い分けて活用してください。

まとめ

今回はSEO対策に効果的な内部リンクについて解説しました。

内部リンクの最適化はSEO対策においてかなり重要度の高いものですが、運営者側で簡単に行えるSEO施策なので是非チェックしてみてください。

クローラーとユーザー両方のサイト内回遊率を高め、検索順位の向上を図りましょう！

▼関連記事

2022.03.30

無料で利用出来るSEOチェックツール20選！【初心者向け】

SEO対策と言っても、正しく対策が出来ているか分からない・・・そんな時に便利なのがSEOチェックツール！ SEOツールを使えば効率...

2022.08.29

検索意図とは？SEO対策で重要な調べ方と考え方を解説します。

検索意図とは、ユーザーが検索するときに考えていることです。具体的には、ユーザーがGoogleやYahooなどの検索エンジンでキーワー...

2022.03.21

SEO対策の費用・料金相場を早見表で徹底解説【2022年最新版】

SEO対策費用・料金について SEO対策の費用・料金は、対応する会社やサービス内容によって価格が違います。ここではSEO対策の費用...

▼関連サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策と商品ページ制作代行ならエクセレント

The post SEO対策に効果的な内部リンクを設定する方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

パンフレット型ホームぺージとは？その役割と必要なコンテンツをわかりやすく解説

下川宜子 — Tue, 07 Jun 2022 05:25:40 +0000

ビジネスのオンライン化により、必要不可欠となっている「パンフレット型ホームぺージ」。

本記事では、パンフレット型ホームぺージとは何か？
その目的や役割と、パンフレット型ホームぺージに必要な構成要素をご紹介します！
正しく理解した上でコンテンツの充実をはかり、自社の広報活動を担うものへと進化させましょう。

パンフレット型ホームぺージとは？

コーポレートサイトは、企業の経営理念や概要、サービスに関する情報が掲載されている「公式のWebサイト」のことで、言ってみればWeb上のパンフレットのようなものです。

ここでは「コーポレートサイト = パンフレット型ホームぺージ」と認識して頂ければと思います。

人間の第一印象は見た目で決まると言いますが、Web上での情報収集が当たり前となった現代では、“企業の第一印象はコーポレートサイトで決まる”と言っても過言では無いでしょう。

パンフレット型ホームぺージの目的・役割

パンフレット型ホームぺージは、企業情報を案内することが主な目的ですが、その役割はサイトの訪問者であるユーザーによって多岐にわたります。

例えば、サービスの導入を検討している人と、リクルート目的の求職者とでは必要とする情報が異なります。そのため、様々なユーザーのニーズに応えるコンテンツを用意する必要があります。

ここからは具体的にどのような目的・役割があるのか紹介していきます！

自社のサービスを紹介する

パンフレット型ホームぺージの一番大きな目的は自社のサービスや商品に関する情報を伝えることす。それは顧客でも求職者でも、どのようなユーザーであっても共通して求めている情報です。

サービスの概要だけでなく、他社サービスとの違いを明確に示して自社商品をアピールしましょう。さらに、料金情報や納品実績、利用者の声などを掲載することで信頼度も上がります。

求職者へ自社の魅力を伝えて優秀な人材を獲得する

求職者が働きたい会社であるかを判断する材料として、パンフレット型ホームぺージは重要な役割を果たします。

募集中の職種や待遇などの条件面はもちろんですが、企業理念やビジョン、具体的な事業内容の他にも、実際に働く姿をイメージできるように、社内の雰囲気の伝わる写真や先輩の声なども紹介すると良いでしょう。

企業側にとっても求めている人材を獲得するチャンスです！「ここで働いてみたい！」と思ってもらえるように内容を充実させましょう！

問い合わせ対応のサポートとして

パンフレット型ホームぺージに問い合わせフォームを設ければ、顧客からのお問い合わせにスムーズに対応できるようになります。電話対応の場合、離席によるすれ違いも多く、最悪の場合はせっかくのビジネスチャンスを失うことにもなるでしょう。お互いに時間を選ぶことなくやり取りができる問い合わせフォームであれば確実にメッセージを受け取ることができ、記録として残るのも強みです。

さらに、問い合わせフォームと併せて「よくある質問」を掲載しておけば、同様の質問を重複して受ける機会も減り、業務の効率化が図れます。

ブランディング戦略でファンを獲得

パンフレット型ホームぺージは、自社の特徴をアピールしやすい場であり、企業のブランディングにも役立ちます。さらに、自社の存在を知ってくれた人に継続的に情報を発信していくことで宣伝効果が得られます。結果的に、ロイヤリティを高めファンの獲得なども期待できます。

パンフレット型ホームぺージに必要なコンテンツ

パンフレット型ホームぺージの構成要素は、事業内容によって様々ですが、多くの共通する主なコンテンツをご紹介します。

会社概要

まず、会社概要は欠かせないコンテンツです。最低限以下の情報は掲載しましょう。

会社名
代表者名
所在地
資本金
設立日
事業内容

このほかにも、電話番号、取引銀行、主要取引先、役員名、従業員数などを掲載するとより信用度が上がるでしょう。項目が多いため、表を作成するなどして読みやすくする工夫をしましょう。

会社訪問時に所在地を確認するユーザーも想定されるため、住所はテキストだけでなく地図も掲載すると親切です。

企業理念・ビジョン

企業のパーソナリティを伝える重要なコンテンツです。企業理念やビジョンなどを明示することは、ユーザーへのアピールだけでなく、社内の意識を高めることも期待できます。

ユーザーの心に響くように、共感・信頼のできるメッセージであることが大切です。

サービス・商品紹介

提供しているサービス・商品の特長や魅力を伝えるページです。顧客がサービスを検討するうえで必要な情報が得られる内容にしましょう。

基本的な商品概要のほか、他社とは違う強みやベネフィットを伝えることが顧客獲得への近道です。サービス内容が多岐に渡る場合には、複数のページに分けて紹介するなど工夫すると良いでしょう。

また、実際にサービスに興味を持たれた方や不明点が出た場合にすぐに問い合わせできるなど、ニーズに合った導線を用意することで機会ロスを防ぎましょう。

実績紹介

実績がない企業へ仕事を依頼するのは不安がありますので、販売実績や開発実績などを掲載しましょう。利用イメージが沸かせることができますので、掲載する件数が多ければ多いほど良いです。

さらに取引先の社名など具体的に掲載するとが信憑性が上がって良いでしょう。掲載する際は、予め取引先に許可を得ることを忘れないようにしましょう。

スタッフブログ・コラム

ユーザーにとって役立つ情報を発信するコンテンツを設置するとさらに充実したサイトになります。

更新性の高いブログやコラムは、パンフレット型ホームぺージへのアクセス数を伸ばすという意味では、最重要コンテンツとも言えるでしょう。現在は、パンフレット型ホームぺージにオウンドメディアの要素も持たせて運用している企業も多くあるのはそういった意図があるからです。

スタッフブログはユーザーに親近感を与え、情報を発信するコラムはその業界において専門的な知識があることを証明することができます。さらなるファン獲得のために、是非活用していきましょう。

お問い合わせフォーム

ユーザーが好きなタイミングでメッセージを送ることができるお問いわせフォームは、大変便利なツールです。

「電話して確認するほどの内容ではないけど・・・」といった場合でも、ユーザーがアクションを取る敷居が低くなります。企業側にとっても、内容をしっかり精査した上で回答ができるため顧客対応がスムーズになるでしょう。

お問い合わせフォームと関連して、よくある質問をまとめたページへのリンクを繋げておけば、同様の疑問があった場合にすぐに解決できるため、ユーザーの満足度がさらに向上するでしょう。

個人情報保護方針（プライバシーポリシー）

サイトにおいて収集した個人情報をどう扱うのかなどを示した個人情報保護方針（プライバシーポリシー）は必須のコンテンツです。

お問い合わせフォームの入力時には、メールアドレスや氏名などの個人情報を入力することが多いため、この個人情報の利用目的や開示請求先を明記することで企業の信用を高め、ユーザーに安心感を与えることができます。
お問い合わせフォームに付随してリンクを貼るほか、サイトのフッター内にもリンクを設置すると良いでしょう。

お知らせ・最新情報

パンフレット型ホームぺージは、常に最新の情報を掲載することが重要です。
新しいサービスのリリース情報や活動報告、長期休暇時の営業案内、メディア掲載情報など随時更新していきます。
トップページの目立つ場所に時系列でお知らせを掲載し、詳細ページにリンクを貼って詳しい内容を確認できるようにしましょう。

お知らせの更新が止まっていればユーザーに不安を抱かせますので、最低でも月1回程度は情報の更新ができると良いでしょう。

採用情報

現在では、ほとんどの求職者がコーポレートサイトを確認しているでしょう。
求職者にとって、具体的な求人情報に加えて企業の社風を知って入社後の働く姿をイメージをできることが大切だからです。

先輩社員からのメッセージや社内の雰囲気がわかる情報を掲載すれば、求職者の希望とマッチするか判断する材料となります。エントリーに必要な導線も設置しておくとスムーズでしょう。

優秀な人材を獲得してより良い企業に成長するためには、コーポレートサイトの採用情報こそ充実させるべきコンテンツです。

まとめ

パンフレット型ホームぺージには、様々な役割があることをおわかりいただけたでしょうか？
多くの情報を掲載できるので、情報が複雑になり上手く伝わらなくなる恐れもあります。
ユーザーが求めている情報は何なのかをしっかりと整理して、魅力的なパンフレット型ホームぺージを構築しましょう！

パンフレット型ホームぺージ制作・運用でお困りの方は、当社へお気軽にご相談ください。

▼該当サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策が得意なホームぺージ制作会社エクセレント

The post パンフレット型ホームぺージとは？その役割と必要なコンテンツをわかりやすく解説 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

WordPressのブロックエディタを利用してページ編集する方法とその投稿方法

下川宜子 — Sat, 21 May 2022 21:00:24 +0000

WordPressでのサイト納品後に、必ずと言ってよいほど頂くご質問・・・

「ページの編集はどうすれば良いのですか？」
「ブロックエディタって何ですか？」
「画像はどうやれば掲載できますか？」
「文字の色はどこで変えられますか？」

そこで今回はWordPressの標準エディタ（ブロックエディタ）を使ったページ編集の方法について解説します。管理画面の進み方から、基本的な文字の装飾、画像の挿入方法、リンクの入れ方など、わかりやすく説明していきます。

※ご利用のWordPressのバージョンや設定、ご利用のプラグインによっては表示が異なる場合がございます。予めご了承ください。

記事の編集画面を開く

ブログのようなコンテンツは「投稿」から記事を作成していきます。
まずはWordPressの管理画面に入り、「投稿」→「新規追加」の順に進んで編集画面を開きましょう。

すると、下図のような編集画面が開きます。

右サイドバーが表示されていない場合は、画面右上の歯車のアイコンをクリックすると表示・非表示の切り替えができます。
今回は「表示」にして編集をしていきます。

記事タイトルを入れる

まずは、「タイトルを追加」と表示されている部分をクリックして、記事タイトルを入力します。

ここでは「WordPressの記事の書き方」とタイトルを設定しました。

後から変更できるので、いったん仮で入れても構いません。

記事本文の書き方

続いて、本文を書いていきます。
先ほど編集したタイトルの下は、記事の本文を書くエディターになっています。
「ブロックを選択するには「/」を入力」の部分にクリックして文章を入力していきます。

ブロック内で改行したい場合は、「Shift＋Enter」で可能です。

Enterキーを押すと新しいブロック（段落）が下に追加されます。
下図のように縦点のマークを選択し、「前に挿入」または「後に挿入」をクリックしてブロックを挿入することも可能です。

ブロックの削除もメニュー内から可能です。

記事に見出しを入れる

新しいブロックの「＋」をクリックして、表示されたメニューの中から「見出し」を選択します。

表示された枠の中に見出しを入力します。

デフォルトではＨ2で設定されていますが、～H6までの見出しが選択できます。
（※H1は記事タイトルに割り振られていますので、Ｈ2以下を選択すると良いでしょう）

文字を修飾する

入力した本文に装飾を加えてみましょう。

太字にする

太字にしたい文字列を選択して、上に表示されるメニューバーから「Ｂ」を選択してください。
「Ctrl＋B」で簡単に太字にすることもできます。

太字になりました。

文字の色を変更する

色を変えたい文字列を選択して、上に表示されるメニューバーから「ｖ」をクリックし、「ハイライト」もしくは「文字色」を選択してください。

色を選択できる小窓が表示されるので、好きな色を選んでください。

お好みのカラーに調整したい場合は、下図の赤枠で囲った部分を選択してください。カラーパレットから表示され調整が可能です。

文字の色が変更されました。

ブロック単位でできること

上記では文章の一部を選択して文字を装飾する方法をご紹介しましたが、ブロック単位で変更することも可能です。
ブロック単位では、文字の大きさを変えたり、文字の背景に色を付けることも可能です。
編集したいブロックにカーソルを入れて、右サイドバーから編集してみましょう。

文字の色を変えてみます。

文字の大きさも変えられます。

記事に画像を入れる

続いて、本文に画像を挿入してみましょう。
画像を追加したい箇所の「+」クリックしてメニューを開き、「画像」を選択します。

画像のブロックが表示されるので、「アップロード」から画像を新たに登録するか、既に「メディアライブラリ」に画像を登録済みであれば選択して挿入してください。

画像が挿入されました。

画像を選択した状態で、右サイドバーから画像を角丸に変更したりAltテキストの挿入、画像の表示サイズ変更も可能です。

記事にリンクを入れる

文字にリンクを貼ってみましょう。
リンクを貼りたい文字列を選択して、表示されるメニューバーからリンクアイコンを選択します。

小窓が表示されますので、リンク先のURLを入力します。
外部リンクなどリンク先のページを別のタブで表示させたい場合は、「新しいタブで開く」をONにします。

テキストにリンクを設定できました。

記事にテーブル（表）を入れる

テーブル（表）も簡単に追加できます。
テーブルを追加したい箇所の「+」をクリックしてメニューを開き、「テーブル」を選択します。
「テーブル」の表示が無い場合は、検索するか「すべて表示」をクリックします。

画面左側に表示されたメニューから「テーブル」を選択してください。

カラム数と行数を入力し、「表を作成」をクリックします。
※カラム数は縦列、行数は横列を意味します。

表示されたテーブルの内容を変更して、表を完成させます。
右サイドバーでテーブルのデザインの変更も可能です。

記事に箇条書きを入れる

箇条書き（リスト）を挿入してみましょう。文章の要点を伝えやすく、文章も読みやすくなります。
リストを追加したい箇所の「+」をクリックしてメニューを開き、「リスト」を選択します。
小窓に表示が無い場合は検索してください。

リストが挿入されますので、内容を書き換えます。
Enterを押す度に箇条書きが増えていきます。

下図のアイコンを選択すると、番号つきのリストに切り替えることも可能です。

記事にアイキャッチを設定する

アイキャッチ画像は、記事の最上部に表示される画像で、ブログ記事の一覧ページでサムネイル画像としても表示されます。
まずは、右サイドバーの「文章」タブを選択します。

右サイドバーを下がっていって「アイキャッチ画像を設定」をクリックし画像を選択します。

アイキャッチ画像が表示されれば、設定は完了です。

記事を公開（投稿）する

記事を書き終えたらいよいよ投稿（公開）ですが、投稿前にプレビューで表示を確認しましょう。
画面右上の「プレビュー」ボタンをクリックします。「デスクトップ」を選択し「新しいタブでプレビュー」をクリックします。
（モバイルを選択すると、スマホ版を確認できます。）

表示に問題が無ければ、画面右上の「公開」ボタンをクリックします。

公開確認の内容が表示されるので、必要であれば設定してください。
特に設定を変更せず「公開」ボタンを押すと、すぐに記事が公開されます。

以上でWordPressの記事投稿は完了です。

WordPressの記事の書き方まとめ

いかがでしょうか？今回はWordPressの記事の書き方を解説しました。
HTMLの知識がない方でも、簡単に記事ページの作成が可能なことをご理解頂けたかと思います。

最も重要なのは記事の内容ですが、文章の装飾や画像が全く無ければ、味気ない印象になります。逆に装飾をやりすぎても、読みにくいと感じられるので注意が必要です。
ご自分で読みやすいと感じるブログページを参考にしながら、適度に装飾を加えていかれることをおすすめします。

▼関連記事

2022.05.11

WordPressで改行が上手くできない！反映されない！訳が分からない！そんな時の解決策を教えます。

という野球好きなら分かって頂ける？？意味不明な説明をしてその場を切り抜けることが多いWordPr...

2022.04.21

XML Sitemap & Google Newsの使い方と設定方法

XMLサイトマップは検索エンジンにサイト構造を伝えるためのものです。 WordPressのプラグインを使えば、簡単にXMLサイトマップを作...

▼関連サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

Web集客サポートと商品ページ制作代行ならエクセレント

The post WordPressのブロックエディタを利用してページ編集する方法とその投稿方法 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

コピペで使える！ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選

下川宜子 — Wed, 18 May 2022 21:00:10 +0000

ビジネスライクな見出しデザインのご紹介

今回はオウンドメディアサイトなどでビジネスブログ向けで活用できる、ビジネスライクな見出しデザインをご紹介したいと思います。

HTML+CSSだけで構成していますので、コピペですぐに使えます！

※テーマや既存のCSSによっては見え方が多少異なる場合がありますのでその都度調整をお願いします。

CSSの知識が少しある方であれば、サンプルを組み合わせて、自分好みの見出しを作ることも可能かと思いますので、ご自由にカスタマイズしてください。

それでは早速にご紹介させて頂きます！！

ラインだけのシンプルな見出し

シンプルな下線付き見出し

下線のみ引いた定番スタイル。使い勝手がよく多用されています。

コードを表示

HTML

シンプルな下線付き見出し

CSS

h2 {
	border-bottom: solid 3px #27acd9;
	padding: 10px 0;
}

二重の下線付き見出し

二重線バージョン。線幅を太くすればカジュアルな印象に。

コードを表示

HTML

二重の下線付き見出し

CSS

h2 {
	border-bottom: double 4px #27acd9;
	padding: 10px 0;
}

点線付き見出し

点線バージョン。線幅を太くすればよりカジュアルな印象に。

コードを表示

HTML

点線付き見出し

CSS

h2 {
	border-bottom: dashed 2px #27acd9;
	padding: 10px 0;
}

2色の下線付き見出し

ツートンカラーにするだけでグッとおしゃれに。切り替え位置（width）の調整も可能です。

コードを表示

HTML

2色の下線付き見出し

CSS

h2 {
	position: relative;
	border-bottom: 5px solid #ddd;
	padding: 10px 0;
	}
h2:before {
	position: absolute;
	left: 0;
	bottom: -5px;
	width: 20%;
	height: 5px;
	content: '';
	background: #27acd9;
	}

下線+左側にラインでアクセント

左側にラインをプラスするだけで引き締まった印象に。

コードを表示

HTML

下線+左側にラインでアクセント

CSS

h2 {
	border-bottom: 1px solid #A3A3A3;
	padding: 0.2em 0.5em;
	border-left: solid 5px #27acd9;
	}

上下に二重線の付いた見出し

二重線（double）をただのライン（solid）や点線（dotted）に変えて使っても良し！

コードを表示

HTML

上下に二重線の付いた見出し

CSS

h2 {
	border-top: double 4px #27acd9;
	border-bottom: double 4px #27acd9;
	padding: 0.5rem 0;
	}

蛍光マーカー風の見出し

文字に薄いラインを重ねて蛍光マーカー風に。タイトル以外でも重宝されています。

コードを表示

HTML

蛍光マーカー風の見出し

CSS

h2 {
	background: linear-gradient(transparent 60%, #c8f1ff 60%)
	}

囲み線の付いた見出し

シンプルな囲み見出し

ラインで囲んだシンプルなスタイル。文字色も枠に合わせて統一感を出しています。

コードを表示

HTML

シンプルな囲み見出し

CSS

h2 {
	border: solid 2px #27acd9;
	padding: 1rem 1.5rem;
	color: #27acd9;
}

二重の囲み見出し

実線の内側に点線を入れた二重の囲みスタイルです。

コードを表示

HTML

二重の囲み見出し

CSS

h2 {
  position: relative;
  padding: 1rem 1.5rem;
  border: 3px solid #27acd9;
}
h2:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  content: '';
  border: 1px dotted #27acd9;
}

背景付きの見出し

背景に色を入れた見出し

大見出し等におすすめの目立つパターン。黒文字+背景を薄い色にすれば落ち着いた印象に。

コードを表示

HTML

背景に色を入れた見出し

CSS

h2 {
	background: #27acd9;
	color: #fff;
	padding: 0.75rem 2rem;
}

角丸背景の見出し

4つ角を丸くすれば柔らかな印象に。

コードを表示

HTML

背景+左線の見出し

CSS

h2 {
	color: ##27acd9;
	background: #eaf5f9;
	border-radius: 10px;
	padding: 0.75rem 2rem;
}

背景+左線の見出し

左に太めのラインを入れて付箋のようなデザインに。

コードを表示

HTML

背景+左線の見出し

CSS

h2 {
	background: #eaf5f9;
	border-left: solid 10px #27acd9;
	padding: 0.75rem 1.5rem;
}

背景+左線（内側）の見出し

インデントを付けてアクセントに。

コードを表示

HTML

背景+左線（内側）の見出し

CSS

h2 {
	background: #eaf5f9;
	padding: 1rem 1rem 1rem 2.5rem;
	position: relative;
	}
h2:before {
    position: absolute;
    top: 20%;
    left: 20px;
    width: 6px;
    height: 60%;
    content: '';
    border-radius: 3px;
    background: #27acd9;
}

リボン風の見出し

三角形を下に入れて立体的なリボン風に。帯のカラーより濃い色にするのがポイント。

コードを表示

HTML

リボン風の見出し

CSS

h2 {
	background: #27acd9;
	padding: 1rem;
	position: relative;
	color: #fff;
	}
h2:before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 10px transparent;
    border-right: solid 20px rgb(20, 86, 110);
}

グラデーションの見出し

シンプルなグラデーション見出し

上下のグラデーションで立体的に。濃淡を付け過ぎないことが綺麗に見せるポイント。

コードを表示

HTML

シンプルなグラデーション見出し

CSS

h2 {
	position: relative;
	padding: 0.75em 1.5em;
	background: linear-gradient(to top, rgb(39, 172, 217), #45c4ee);
	color: #fff;
}

傾斜の付いたグラデーション見出し

全体に傾斜を付けてスタイリッシュな印象に。スポーツ系のサイト等におすすめ。

コードを表示

HTML

傾斜の付いたグラデーション見出し

CSS

h2 {
	padding: 1rem 2rem;
	color: #fff;
	transform: skew(-15deg);
	background-image: linear-gradient(to right, #27acd9 0%, #b4e12b 100%);
}

ライン+グラデーション見出し

グレーの薄いグラデーションで陰影を付け、ラインでアクセントを入れました。

コードを表示

HTML

ライン+グラデーション見出し

CSS

h2 {
	position: relative;
	padding: 1rem 1.5rem;
	border: 1px solid #D8D8D8;
	border-top: 4px solid #27acd9;
	background: linear-gradient(#ffffff 0%, #eee 100%);
}

アイコン付きの見出し

矢印アイコン付き見出し

左側にFont Awesomeのアイコンを置いたシンプルな見出しです。

コードを表示

HTML

矢印アイコン付き見出し

CSS

h2 {
	position: relative;
	padding-left: 1.5em;
}
h2:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	left: 0;
	top: 0;
	font-weight: 900;
	font-size: 1em;
	color: #27acd9;
}

アイコン+枠付き見出し

枠でメリハリをプラス。Font Awesomeのアイコン使用しています。

コードを表示

HTML

アイコン+枠付き見出し

CSS

h2 {
	position: relative;
	padding: 0.5em 0.75em;
	border: solid 1px #27acd9;
	border-left: solid 2.5em #27acd9;
}
h2:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f0eb";
	font-weight: 900;
	color: #fff;
	padding: 0;
	left: -1.6em;
	top: 50%;
	transform: translateY(-50%);
}

アイコン+背景付き見出し

背景を入れた強調したスタイル。Font Awesomeのアイコン使用しています。

コードを表示

HTML

アイコン+背景付き見出し

CSS

h2 {
	position: relative;
	background: #eaf5f9;
	padding: 0.5em 0.75em 0.5em 2.5em;
}
h2:before {
	position: absolute;
	font-family: "Font Awesome 5 Free";
	content: "\f138";
	font-weight: 900;
	color: #27acd9;
	padding: 0;
	left: 20px;
	top: 50%;
	transform: translateY(-50%);
}

吹き出しのデザイン見出し

斜め線で作る吹き出し見出し

左側にコンを置いたシンプルな見出しです。

コードを表示

HTML

斜め線で作る吹き出し見出し

CSS

h2 {
	position: relative;
	display: table-cell;
	padding: 0 45px;
}
h2:before, h2:after {
	content: '';
	position: absolute;
	top: 50%;
	display: inline-block;
	width: 44px;
	height: 2px;
	background-color: #27acd9;
}
h2:before {
	left:0;
	transform: rotate(60deg);
}
h2:after {
	right: 0;
	transform: rotate(-60deg);
}

吹き出しカラー見出し

吹き出し風のデザインで遊び心をプラス。

コードを表示

HTML

吹き出しカラー見出し

CSS

h2 {
	position: relative;
	padding: 1rem 2rem;
	border-radius: 10px;
	background: #27acd9;
	color: #fff;
}
h2:after {
	position: absolute;
	content: '';
	width: 0;
	height: 0;
	bottom: -10px;
	left: 1.5em;
	border-width: 10px 10px 0 10px;
	border-style: solid;
	border-color: #27acd9 transparent transparent transparent;
}

下線のみの吹き出し風見出し

下線だけで吹き出しを表現した今風のお洒落なスタイル。

コードを表示

HTML

下線のみの吹き出し風見出し

CSS

h2 {
	position: relative;
	padding: 1rem 0.5rem;
	border-bottom: 3px solid #27acd9;
	color: #27acd9;
}
h2:before, h2:after {
	position: absolute;
	content: '';
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0;
	border-style: solid;
}
h2:before {	
	bottom: -14px;    
	border-color: #27acd9 transparent transparent;
}
h2:after {
	bottom: -10px;
	border-color: #fff transparent transparent;
}

カギ括弧+背景カラー見出し

カギカッコでアクセントを付けました。

コードを表示

HTML

カギ括弧+背景カラー見出し

CSS

h2 {
	position: relative;
	background: #f4fbfd;
	padding: 1rem 1.5rem;
	text-align: center;
}
h2:before, h2:after { 
	content:'';
	width: 20px;
	height: 40px;
	position: absolute;
	display: inline-block;
}
h2:before {
	border-left: solid 3px #27acd9;
	border-top: solid 3px #27acd9;
	top:0;
	left: 0;
}
h2:after {
	border-right: solid 3px #27acd9;
	border-bottom: solid 3px #27acd9;
	bottom:0;
	right: 0;
}

ワンポイン入れたデザイン見出し

先頭の文字だけ色を変えた見出し

一文字目のカラーを変えて、さらに下線でアクセントをプラス。

コードを表示

HTML

先頭の文字だけ色を変えた見出し

CSS

h2 {
	color: #555;
	border-bottom: solid 2px #27acd9;
	padding: 10px 0;
}
h2:first-letter {
	color: #27acd9;
}

左側に横ラインを入れた見出し

アクセントカラーを左側に入れてワンポイント。

コードを表示

HTML

左側に横ラインを入れた見出し

CSS

h2 {
	position: relative;
	display: table-cell;
	padding-left: 55px;
}
h2:before {
	position: absolute;
	content: '';
	top: calc(50% - 5px);
	width: 40px;
	left: 0;
	height: 6px;
	border-top: solid 6px #27acd9;
}

短いライン付きの中央寄せ見出し

シンプルでありながら洗練された印象を与える装飾。

コードを表示

HTML

短いライン付きの中央寄せ見出し

CSS

h2 {
	position: relative;
	text-align: center;
	padding: 1.5rem;  
}
h2:before {
	position: absolute;
	content: '';
	background: #27acd9;
	bottom: 0;
	left: calc(50% - 30px);
	width: 80px;
	height: 5px;
}

English Title英語+下線の見出し

英語を添えてお洒落な印象に。サブタイトルとしても使えます。

コードを表示

HTML

English Title英語下線の見出し

CSS

h2 {
	border-bottom: solid 2px #27acd9;
	padding: 10px 0;
}
h2 span {
	display: block;
	font-size: 0.75rem;
	color: #27acd9;  
}

固定文字+囲み線の見出し

CSS側で共通で表示させる文字の編集が可能です。

コードを表示

HTML

固定文字+囲み線の見出し

CSS

h2 {
	position: relative;
	padding: 1rem 2rem;
	border: solid 2px #27acd9;
}
h2:after {
	position: absolute;
	content: "Excellent Point";
	top: -10px;
	left: 15px;
	background: #fff;
	font-size: 0.75rem;
	color: #27acd9;
	padding: 0 10px;
}

01枠+数字を入れた見出し

契約の流れなどSTEPのあるコンテンツに最適。アイコン等に変更して使っても良し！

コードを表示

HTML

01枠+数字を入れた見出し

CSS

h2 {
  position: relative;
  overflow: hidden;
  padding: 1rem 2rem 1rem 120px;
  border: solid 2px #27acd9;
}
h2:before {
  position: absolute;
  content: '';
  top: -150%;
  left: -100px;
  width: 200px;
  height: 300%;
  transform: rotate(25deg);
  background: #27acd9;
}
h2 span {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	z-index: 1;
	font-size: 30px;
	font-size: 3rem;
	padding-left: 16px;
	color: #fff;
}

まとめ

いかがでしたでしょうか？
今回は使いやすいシンプルなスタイルをまとめました。

ライン幅などは細めに設定して、全体的にスタイリッシュな印象にしております。
カラーや線幅などを調整すれば、カジュアルにもポップにも印象を変えられますので、お好みでカスタマイズしてご利用ください。

コピペOkシリーズと言えば先日、【HTML&CSS】で作る(表・table・テーブル)デザインの記事もございますので、併せてご利用頂ければと思います。

▼該当記事

2022.04.30

コピペで使える！スマホで見ても崩れない！【HTML&CSS】で作る(表・table・テーブル)デザイン

表なのか？tableなのか？テーブルなのか？まぁーーーーいろいろな呼び方がありますよね。どれが正解なのかで言うと・・・・どれも正...

▼該当サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策が得意なホームぺージ制作会社エクセレント

The post コピペで使える！ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

下川宜子 | ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント 岡山

コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選

シンプルなボタンデザイン

立体的なボタンデザイン

グラデーションのボタンデザイン

矢印やアイコンの付いたボタンデザイン

カジュアルなボタンデザイン

動くボタンデザイン

ホバーアクションが個性的なボタンデザイン

まとめ

無料相談の流れ

無料相談 ご利用後の流れ

コピペで使える！ビジネスブログ向けの囲み枠デザイン20選

シンプルな囲み枠

立体的な囲み枠

デザイン性のある囲み枠

タイトル付きの囲み枠

まとめ

無料相談の流れ

無料相談 ご利用後の流れ

Google Search Consoleで表示される「孤立したページ」を見つける方法

孤立したページがSEOに与える影響

孤立したページの見つけ方

STEP1：Google Search Consoleにログインする

STEP2：サイトを登録する

STEP3：所有権の確認を行う

STEP4：インデックス未登録ページの確認

STEP5：内部リンクの確認をする

まとめ

SEO対策に効果的な内部リンクを設定する方法

内部リンクとは？

内部リンクとSEOの関係性

内部リンク最適化の4つポイント

【ポイント1】サイト内の関連するページへリンクさせる

【ポイント2】リンクはページ同士を相互に繋げる

【ポイント3】リンク先の内容と一致するアンカーテキストにする

【ポイント4】重要なページに内部リンクを集める

効果的な内部リンクの設置場所

ナビゲーション（ヘッダー・サイド・フッター）

ヘッダー（グローバルナビゲーション）

サイドメニュー

フッター

パンくずリスト

サイトマップ

ページ本文

まとめ

パンフレット型ホームぺージとは？その役割と必要なコンテンツをわかりやすく解説

パンフレット型ホームぺージとは？

パンフレット型ホームぺージの目的・役割

自社のサービスを紹介する

求職者へ自社の魅力を伝えて優秀な人材を獲得する

問い合わせ対応のサポートとして

ブランディング戦略でファンを獲得

パンフレット型ホームぺージに必要なコンテンツ

会社概要

企業理念・ビジョン

サービス・商品紹介

実績紹介

スタッフブログ・コラム

お問い合わせフォーム

個人情報保護方針（プライバシーポリシー）

お知らせ・最新情報

採用情報

まとめ

WordPressのブロックエディタを利用してページ編集する方法とその投稿方法

記事の編集画面を開く

記事タイトルを入れる

記事本文の書き方

記事に見出しを入れる

文字を修飾する

太字にする

文字の色を変更する

ブロック単位でできること

記事に画像を入れる

記事にリンクを入れる

記事にテーブル（表）を入れる

記事に箇条書きを入れる

記事にアイキャッチを設定する

記事を公開（投稿）する

WordPressの記事の書き方まとめ

下川宜子 | ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント岡山

無料相談　ご利用後の流れ

無料相談　ご利用後の流れ