記事にボタンを設置をする方法

2019年08月22日 2021年04月11日

Jo Masafumi

次は、記事にボタンを設置をする方法をします。

記事にボタンを設置をする方法

ワードプレスの管理画面を開きます。

左上の「投稿」を押します。

左上の「新規追加」を押します。

左上の「タイトルを追加」に「記事にボタンを設置をする方法」と入力します。

右側の「テキスト」を押します。

下記コードを「テキスト」にコピーして、貼り付けます。

<div class="chuou">
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="btn-flat-border">クラウドワークス公式</a>
</div>

貼り付けました。

右側の「公開」を押します。

「OK」を押します。

右上の「変更をプレビュー」を押します。

ボタンが表示されていることを確認します。

学習状況をツイッターでつぶやく

↑じょうまさふみに学習状況を報告すると喜びます(^^)/

ボタンの説明

HTML


<div class="chuou">
<a href="https://crowdworks.jp" rel="noopener noreferrer" target="_blank" class="btn-flat-border">クラウドワークス公式</a>
</div>

ボタンは、URLリンクと、CSSを入れて作成します。

「div class="chuou"」は、ボタンを中央に表示させるために入れています。

「https://crowdworks.jp」のところに自分の好きなURLリンクを入れてください。

「クラウドワークス公式」のところに自分の好きな文字を入れてください。

例えば、「https://crowdworks.jp」に「https://www.yahoo.co.jp」を入れます。

「クラウドワークス公式」に「ヤフー公式」を入れます。

HTML

<div class="chuou">
<a href="https://www.yahoo.co.jp" rel="noopener noreferrer" target="_blank" class="btn-flat-border">ヤフー公式</a>
</div>

上記のように変更して使います。

いろいろなボタンの記入例

押し込みボタン

CSS

/*押し込みボタン*/
.btn1 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  border-bottom: solid 4px #627295; /*枠線色*/
  border-radius: 3px; /*角まるみ*/
}
/*ボタンを押したとき*/
.btn1:active {
  -webkit-transform: translateY(4px) !important;/*下に動く*/
  transform: translateY(4px) !important;/*下に動く*/
  border-bottom: none !important;/*線を消す*/
}

HTML

<a href="#" class="btn1">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

上から見たボタン

CSS

/*上から見たボタン*/
.btn2 {
  display: inline-block; /*横並び*/
  position: relative; /*通常の表示位置が基準*/
  padding: 0.35em 1em; /*余白*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  text-decoration: none !important; /*装飾なし*/
}
/*ボタンの上側*/
.btn2:before {
  content: ""; /**/
  position: absolute; /*親要素の左上基準*/
  top: -16px; /*上側位置*/
  left: 0; /*左側位置*/
  width: -webkit-calc(100% - 0px); /*横幅*/
  width: calc(100% - 0px); /*横幅*/
  height: 0; /*高さ*/
  border: solid 8px transparent; /*ボタン上側　太さ*/
  border-bottom-color: #8eacec; /*ボタン上側　色*/
}
 /*ボタン押したとき*/
.btn2:active {
  padding: 0.32em 0.9em; /*余白*/
  -webkit-transform: translateY(-2px); /*押し込み位置調整*/
  transform: translateY(-2px); /*押し込み位置調整*/
}

.btn2:active:before { 
  width: -webkit-calc(100% - 0px); /*横幅*/
  width: calc(100% - 0px); /*横幅*/
}

.btn2:active:before {
  top:-12px; /*上位置*/
  border-width: 6px; /*横幅*/
}

HTML

<a href="#" class="btn2">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

丸みのあるボタン

CSS

/*丸みのあるボタン*/
.btn3 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  padding: 0.25em 0.5em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #fd9535;/*背景色*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05) !important; /*影*/
  font-weight: bold; /*文字太さ*/
  border: solid 2px #d27d00;/*線色*/
}
/*ボタンを押したとき*/
.btn3 {
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30) !important; /*影*/
}

HTML

<a href="#" class="btn3">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

ふせんボタン

CSS

/*ふせんボタン*/
.btn4 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #f7f7f7; /*背景色*/
  border-left: solid 6px #ff7c5c;/*左線*/
  color: #ff7c5c !important;/*文字色*/
  font-weight: bold; /*文字太さ*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
}
/*ボタンを押したとき*/
.btn4:active {
  box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); /*影*/
  transform: translateY(2px); /*縦変形*/
}

HTML

<a href="#" class="btn4">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

本物みたいなボタン

CSS

/*本物みたいなボタン*/
.btn5 {
  display: inline-block; /*横並び*/
  text-decoration: none !important; /*装飾なし*/
  color: blue !important; /*アイコン色*/
  width: 80px; /*横幅*/
  height: 80px; /*縦幅*/
  line-height: 80px; /*行高さ*/
  font-size: 40px; /*アイコンサイズ*/
  border-radius: 50%; /*角丸み*/
  text-align: center; /*中央位置*/
  overflow: hidden; /*非表示*/
  font-weight: bold !important; /*文字太さ*/
  background-image: linear-gradient(#e8e8e8 0%, #d6d6d6 100%); /*グラデーション*/
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66); /*影*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); /*影*/
  border-bottom: solid 2px #b5b5b5; /*線色*/
}
.btn5 i {
  line-height: 80px; /*行高さ*/
}
/*ボタンを押したとき*/
.btn5:active {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 2px rgba(0, 0, 0, 0.19); /*影*/
  border-bottom: none; /*線なし*/
  color: orange !important; /*アイコン色*/
}

HTML

<a href="#" class="btn5"><i class="fa fa-power-off"></i></a>

記事をプレビュー表示したとき

シンプル枠付きボタン

CSS

/*シンプル枠付きボタン*/
.btn6 {
  display: inline-block; /*横並び*/
  padding: 0.3em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #67c5ff !important; /*文字色*/
  border: solid 2px #67c5ff; /*枠線*/
  border-radius: 3px; /*角丸み*/
  transition: .4s; /*変化時間*/
}
.btn6:hover {
  background: #67c5ff; /*背景色*/
  color: white !important; /*文字色*/
}

HTML

<a href="#" class="btn6">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

両端線ボタン

CSS

/*両端線ボタン*/
.btn7 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*余白*/
  border-left: solid 4px #668ad8; /*左線*/
  border-right: solid 4px #668ad8; /*右線*/
  color: #668ad8 !important; /*文字色*/
  background: #e1f3ff; /*背景色*/
  transition: .4s; /*変化時間*/
}
.btn7:hover {
  background: #668ad8 !important; /*背景色*/
  color: #FFF !important; /*文字色*/
}

HTML

<a href="#" class="btn7">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

アイコン付きボタン

CSS

/*アイコン付きボタン*/
.btn8 {
  position: relative; /*通常の表示位置が基準*/
  display: inline-block; /*横並び*/
  font-weight: bold !important; /*文字太さ*/
  padding: 0.25em 0.5em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  color: #FFF !important; /*文字色*/
  background: #00bcd4; /*背景色*/
  transition: .4s; /*変化時間*/
}
/*ボタンの上にマウスがのったとき*/
.btn8:hover {
  background: #1ec7bb; /*背景色*/
}

HTML

<a href="#" class="btn8"><i class="fa fa-chevron-right"></i>クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

グラデーションボタン

CSS

/*グラデーションボタン*/
.btn9 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  border-radius: 4px; /*角丸み*/
  color: #ffffff !important; /*文字色*/
  background-image: linear-gradient(#6795fd 0%, #67ceff 100%); /*グラデーション*/
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29); /*影*/
  border-bottom: solid 3px #5e7fca; /*下線*/
}
/*ボタンを押したとき*/
.btn9:active {
  -webkit-transform: translateY(4px); /*下線変化*/
  transform: translateY(4px); /*下線変化*/
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2); /*影*/
  border-bottom: none; /*下線なし*/
}
/*ボタンの上にマウスをのせたとき*/
.btn9:hover {
  background-image: linear-gradient(#6795fd 0%, #67ceff 70%); /*グラデーション*/
}

HTML

<a href="#" class="btn9">クラウドワークス公式</a>

記事をプレビュー表示したとき

クラウドワークス公式

この記事を書いた人

最近書いた記事

特典６つ目：ブログ１記事だけで10万円稼ぐ方法

特典５つ目：1ツイートで2万円稼ぐ方法

無料版ワードプレス作成

記事にアイキャッチ画像を設定する方法3

おすすめの記事