次は、ボタンの色を変えるCSSコードを追加する方法をします。

ボタンの色を変えるCSSコードを追加する方法

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

左下の「外観」を押します。

左下の「外観」の下の「カスタムCSS」を押します。

一番下の行に移動します。
キーボードの「Enter」を押して、1行ふやします。

下記のCSSコードをコピーして、一番下の行に貼り付けます。

/*色が変わるボタン(基本)*/
.irokawaru-btn1 {
  display: inline-block; /*横並び*/
  padding: 0.5em 1em; /*余白*/
  text-decoration: none !important; /*装飾なし*/
  background: #668ad8;/*背景色*/
  color: #FFF !important; /*文字色*/
  transition: 0.5s; /*変化時間*/
}
/*ボタンの上にマウスがのったとき*/
.irokawaru-btn1:hover {
  background: orange;/*背景色*/
}

貼り付けました。

一番下の「カスタムCSSの更新」を押します。

↑じょうまさふみに学習状況を報告すると喜びます(^^)/
講座1, 講座2の関連記事
  • アイコンを光らせるHTMLとCSSを使ってする方法
  • ボタンの色を変えるCSSコードを追加する方法
  • アイコンの色を変えるCSSコードを追加する方法
  • 記事にアイキャッチ画像を設定する方法2
  • Brainを使ってお金を稼ぐ方法(紹介記事の書き方)
  • ブログタイトル名と説明文の変更2
おすすめの記事
講座1
作業目安時間5分 次は、アイキャッチ画像の高さを、変更します。 現在は、アイキャッチ画像の高さがバラバラになっているので、画像の高さをそろえ...
講座2
次は、文字を回すCSSコードを追加する方法をします。 文字を回すCSSコードを追加する方法 ワードプレスの管理画面を開きます。 左下の「外観...
講座1
作業目安時間3分 次は、ワードプレスの初期設定時に入っている「Hello World」の記事を削除します。 「Hello World」の記事...