CSS | ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント 岡山 https://excellent.ne.jp 「何から始めればいい？」を解決。SNS・検索対策・ECサイトまで一貫サポート Thu, 29 Sep 2022 20:01:22 +0000 ja hourly 1 https://wordpress.org/?v=6.0.12 https://excellent.ne.jp/wp-content/uploads/2022/02/cropped-cropped-logoicon-1-32x32.png CSS | ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント 岡山 https://excellent.ne.jp 32 32 コピペですぐ使える！ビジネスライクなCSSボタンデザイン30選 https://excellent.ne.jp/homepage/6562/ https://excellent.ne.jp/homepage/6562/#comments Sat, 01 Oct 2022 21:00:31 +0000 https://excellent.ne.jp/?p=6562 今回はコピペで作れるCSSボタンデザインをご紹介していきます。 私が現場において使用頻度の高いものを中心に掲載しています。 後半では遊び心のあるボタンデザインも掲載していますので、シーンに合わせて使い分けて頂ければと思い […]

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

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

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

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

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

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

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

HTML
<a href="" class="btn_01">Button</a>

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
<a href="" class="btn_02">Button</a>

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
<a href="" class="btn_03">Button</a>

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
<a href="" class="btn_04">Button</a>

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
<a href="" class="btn_05">Button</a>

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
<a href="" class="btn_06">Button</a>

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
<a href="" class="btn_07">Button</a>

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
<a href="" class="btn_08">Button</a>

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
<a href="" class="btn_09">Button</a>

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
<a href="" class="btn_10">Button</a>

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
<a href="" class="btn_11">Button</a>

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
<a href="" class="btn_12">Button</a>

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
<a href="" class="btn_13">Button</a>

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
<a href="" class="btn_14">Button</a>

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
<a href="" class="btn_15">Button</a>

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
<a href="" class="btn_16">Button</a>

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
<a href="" class="btn_17">Button</a>

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
<a href="" class="btn_18">Button</a>

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
<a href="" class="btn_19">Button</a>

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
<a href="" class="btn_20">Button</a>

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
<a href="" class="btn_21">Button</a>

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
<a href="" class="btn_22">Button</a>

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
<a href="" class="btn_23">Button</a>

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
<a href="" class="btn_24">Button</a>

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
<a href="" class="btn_25"><span>Button</span></a>

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
<a href="" class="btn_26">Button</a>

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
<a href="" class="btn_27">Button</a>

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
<a href="" class="btn_28"><span>Button</span></a>

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
<a href="" class="btn_29">Button</a>

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
<a href="" class="btn_30">
		<span class="side top">Thanks</span>
    	<span class="side front">Button</span>
</a>

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集客の無料相談こちらをクリック

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

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

例えば、、、

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

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

無理ですよね。

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

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

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

お問い合わせはこちら

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

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

]]> https://excellent.ne.jp/homepage/6562/feed/ 1 WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編 https://excellent.ne.jp/wordpress/6167/ https://excellent.ne.jp/wordpress/6167/#respond Thu, 22 Sep 2022 21:00:59 +0000 https://excellent.ne.jp/?p=6167 HTMLタグ WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法 WordPressを利用したブログを運用しているお客様から、「改行が上手く出来ないんだけど・・・」とご連絡を頂くこと […]

The post WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

]]> HTMLタグ

WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法

WordPressを利用したブログを運用しているお客様から、「改行が上手く出来ないんだけど・・・」とご連絡を頂くことがございます。確かにWordpressの改行って自動整形機能というのが作動して意図しているモノとは違う改行となるケースがあります。

WordPressのバージョンによるものなのか、プラグインのバグなのか、私の知識が薄いのか・・・・・私どもも理解が出来ないケースがたまにあります

下記の記事ではその時に利用出来る対策として、基本のhtmlソースについてお伝えしたいと思います。
2022.06.04
WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法
改行が上手く出来ない理由 Wordpressを利用したブログを運用しているお客様から、「改行が上手く出来ないんだけど・・・」とご連絡を...

WordPressで投稿するブログで <br> と <br /> はどちらが正しいの？何が違うのか解説します。

ワードプレスを利用してページを編集していて、ホームぺージ制作会社からもらったソースの見本は　<br />　と記入があるけど、、、　<br>　とどう違うんだ？

と疑問に思われたことないですか？

私はあります。恥ずかしながら・・・・あります。

最近、 <br> と <br /> を入れても改行が出来ない事があるんですよね。
その原因はWordpressの自動何とか機能のせいらしいのですが・・・・下記の記事ではその件ついて解説しています。
2022.05.24
WordPressで投稿するブログで <br> と <br /> はどちらが正しいの？何が違うのか解説します。
ワードプレスを利用してページを編集していて、ホームぺージ制作会社からもらったソースの見本は　<br />　と記入があるけど、、、...

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

WordPressはエディターで入力した文章に自動でタグを追加する自動整形機能を搭載しています。

この自動整形機能はHTMLの知識が無くとも自動的に記事を整形してくれる便利な機能ですが、自分の思った通りに整形されないことがあるという難点があります。

例えば複数回改行したいときに、エディター上で何度改行してもその分は削除されて表示されるのがその現象です。

プラグインの導入やコードの書き換えを行うことで、自動整形機能を無効にできますが、プラグイン同士の相性が悪い場合、プラグインを停止しなければならない場合があります。そのために既存のプラグインを停止したり、将来的に改行を行うプラグインを停止する事が起きると、すべての記事の改行が反映されなくなってしまいますのでこの方法はお勧めできません。

そこで、下記の記事はプラグインを使用せず、シンプルな方法で解決する方法をご紹介します。
2022.05.11
WordPressで改行が上手くできない！反映されない！訳が分からない！そんな時の解決策を教えます。
という野球好きなら分かって頂ける？？ 意味不明な説明をしてその場を切り抜けることが多いWordPr...

編集方法

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

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

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

そこで下記の記事はWordPressの標準エディタ（ブロックエディタ）を使ったページ編集の方法について解説します。管理画面の進み方から、基本的な文字の装飾、画像の挿入方法、リンクの入れ方など、わかりやすく解説しています。
2022.05.22
WordPressのブロックエディタを利用してページ編集する方法とその投稿方法
WordPressでのサイト納品後に、必ずと言ってよいほど頂くご質問・・・ 「ページの編集はどうすれば良いのですか？」 「ブロッ...

まとめ

WordPressで制作をさせて頂いたお客様から編集方法についてよく相談を頂きます。

WordPressについては当社で発明・開発したものではないので正直なところ、完璧に理解をしているわけではないので時々回答に困る事があります。

今回の記事の「改行」についてはまさにそうで・・・。
法則性があるんでしょうが・・・・複雑すぎて理解が出来ません。
その環境で出来る改行方法を探して、その方法を見つけるのが正解という状況です。(知識不足で申し訳ないです。)

そんな知識不足なエクセレントでも、多少は編集方法についてはプロであるのでそれなりに頼って頂ければと思います。

▼該当サービス
ホームぺージレスキューサービス

無料相談の流れ

1.お申込み

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

2.日程調整

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

3.無料相談

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

4.商談

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

無料相談　ご利用後の流れ

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

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

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

Web集客の無料相談

▼お申し込みはこちらから
Web集客の無料相談

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

メールでのお問い合わせ

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

LINEでのお問い合わせ

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

SEO対策によるWeb集客が得意な会社　株式会社エクセレント

The post WordPress(ワードプレス)まとめ記事　HTMLタグ・編集方法編 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

]]> https://excellent.ne.jp/wordpress/6167/feed/ 0 コピペで使える！ビジネスブログ向けの囲み枠デザイン20選 https://excellent.ne.jp/homepage/5620/ https://excellent.ne.jp/homepage/5620/#respond Thu, 25 Aug 2022 21:00:52 +0000 https://excellent.ne.jp/?p=5620 今回はオウンドメディアサイトなどで活用できる、囲み枠（ボックスデザイン）をご紹介したいと思います。 HTML+CSSだけで構成していますので、コピペですぐに使えます！ 背景色（background）、線（border）の […]

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

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

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

シンプルな囲み枠

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

HTML
<div class="box_01">ここに文章を入れる</div>

CSS
.box_01 {
	border: solid 2px #27acd9;
	padding: 1em;
	}
点線のボックス。実線よりもカジュアルな印象になります。線（border）の太さを変えるだけでもまた違った雰囲気に。

HTML
<div class="box_02">ここに文章を入れる</div>

CSS
.box_02 {
	border: dashed 3px #27acd9;
	padding: 1em;
	}
二重線と角丸にしたボックス。角の丸み（border-radius）の数値を大きくするほど、より柔らかな印象になります。

HTML
<div class="box_03">ここに文章を入れる</div>

CSS
.box_03 {
	border: double 4px #27acd9;
	border-radius: 10px;
	padding: 1em;
	}
背景に色を入れたボックス。背景に濃い色を設定する場合は、文字色を白にすれば読みやすくより強調されます。

HTML
<div class="box_04">ここに文章を入れる</div>

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

HTML
<div class="box_05">ここに文章を入れる</div>

CSS
.box_05 {
	background: #eaf5f9;
	border: dotted 2px #27acd9;
	padding: 1em;
	}
2種類の要素を組み合わせて作ったボックス。少しの工夫でデザイン性が格段にアップしますね。

HTML
<div class="box_06">
<div class="box_06_txt">ここに文章を入れる</div>
</div>

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

立体的な囲み枠

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

HTML
<div class="box_07">ここに文章を入れる</div>

CSS
.box_07 {
	border: solid 1px #27acd9;
	box-shadow: 2px 5px 5px #eeeeee;
	padding: 1em;
	}
グラデーションを使ったボックス。背景をワントーンのグラデーションにすることで、立体感を出しました。下部を暗い色にすることがポイント！自然な立体感を表現することが可能です。

HTML
<div class="box_08">ここに文章を入れる</div>

CSS
.box_08 {
	background: linear-gradient(
    to top,
    #d8d8d8 0%,
    #eeeeee 30%,
    #f8f8f8 100%
  );
	border-radius: 10px;
	padding: 1em;
	}
下側に線を入れて立体感を出したボックス。分厚いボード風になりました。カジュアルなサイトでのご使用がおすすめです。

HTML
<div class="box_09">ここに文章を入れる</div>

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

デザイン性のある囲み枠

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

HTML
<div class="box_10">ここに文章を入れる</div>

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
<div class="box_11">ここに文章を入れる</div>

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
<div class="box_12"><span>ここに文章を入れる</span></div>

CSS
.box_12 {
	background: #eaf5f9;
	padding: 2em 1.5em 1.5em;
	}
.box_12 span {
	border-bottom: solid 1px #97C4D4;
	line-height: 2;
	}
ルーズリーフ風デザインの囲み枠。先ほどの便箋スタイルにプラスして、サイドにパンチ穴の丸を並べることで、ルーズリーフに早変わり。よりカジュアルな印象になります。

HTML
<div class="box_13"><span>ここに文章を入れる</span></div>

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
<div class="box_14">ここに文章を入れる</div>

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

タイトル付きの囲み枠

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

HTML
<div class="box_15">
<div class="box_15_ttl">ここにタイトルを入れる</div>
<div class="box_15_txt">ここに文章を入れる</div>
</div>

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
<div class="box_16">
<div class="box_16_ttl">ここにタイトルを入れる</div>
<div class="box_16_txt">ここに文章を入れる</div>
</div>

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
<div class="box_17">
<div class="box_17_ttl">ここにタイトルを入れる</div>
<div class="box_17_txt">ここに文章を入れる</div>
</div>

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
<div class="box_18">
<div class="box_18_ttl">ここにタイトルを入れる</div>
ここに文章を入れる
</div>

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
<div class="box_19_ttl">ここにタイトルを入れる</div>
<div class="box_19">
ここに文章を入れる
</div>

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
<div class="box_20">
<div class="box_20_ttl">ここにタイトルを入れる</div>
<div class="box_20_txt">ここに文章を入れる</div>
</div>

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集客の無料相談

▼お申し込みはこちらから
Web集客の無料相談

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

メールでのお問い合わせ

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

LINEでのお問い合わせ

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

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

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

]]> https://excellent.ne.jp/homepage/5620/feed/ 0 WordPressで投稿するブログで <br> と <br /> はどちらが正しいの？何が違うのか解説します。 https://excellent.ne.jp/homepage/3509/ https://excellent.ne.jp/homepage/3509/#respond Mon, 23 May 2022 21:00:39 +0000 https://excellent.ne.jp/?p=3509 ワードプレスを利用してページを編集していて、ホームぺージ制作会社からもらったソースの見本は　<br />　と記入があるけど、、、　<br>　とどう違うんだ？ と疑問に思われたことないですか？ 私は […]

The post WordPressで投稿するブログで
と
はどちらが正しいの？何が違うのか解説します。 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

]]> ワードプレスを利用してページを編集していて、ホームぺージ制作会社からもらったソースの見本は　<br />　と記入があるけど、、、　<br>　とどう違うんだ？

と疑問に思われたことないですか？

私はあります。

恥ずかしながら・・・・あります。

最近、 <br> と <br /> を入れても改行が出来ない事があるんですよね。
その原因はWordpressの自動何とか機能のせいらしいのですが・・・・

▼参考記事
2022.05.11
WordPressで改行が上手くできない！反映されない！訳が分からない！そんな時の解決策を教えます。
という野球好きなら分かって頂ける？？ 意味不明な説明をしてその場を切り抜けることが多いWordPr...

しかし、、、、、、気になる　　 <br> と <br /> 　　の違いついて調べてみました。

似て非になるもの

<br>
<br />

いずれも改行を命令するためのタグですが、そもそもの開発の経緯が違います。

<br>

その文書がHTMLで書かれているのであれば、こちらを利用します。

<br />

その文章がXHTMLで書かれているのであれば、こちらを利用します。

ここからは　<br>　の一択で良い

基本、タグというものは開始タグと終了タグをセットにして使いますが、
やなどの空要素と呼ばれるタグは終了タグがありません。

HTML5以前の仕様であるXHTMLの文法では、空要素と呼ばれるタグは、<br /> と書くようにと決められました。XHTMLの文書はこう書かれていない場合、文法チェックでエラーと診断されていました。その他時期に利用されていたのが、<br /> 　となります。

しかし、HTML5で運用が可能になった今後は、　<br> 　の一択の利用で問題なくなりました。

今後は、　<br> 　の一択の利用で問題なくなりました。

何とも導入経過から今後の使用に関しての結論まで明確な説明となりました。

いやいや、すっきりですね。

メールでのお問い合わせ

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

LINEでのお問い合わせ

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

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

The post WordPressで投稿するブログで
と
はどちらが正しいの？何が違うのか解説します。 first appeared on ホームページの問い合わせを増やす！インスタ・LINE活用のWEB集客サポート | 株式会社エクセレント　岡山.

]]> https://excellent.ne.jp/homepage/3509/feed/ 0