【WordPress】ダウンロードボタンのデザインを変える

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

『WordPressのファイルブロックを使えば、サイトにダウンロードボタンを簡単に設置できる』
というのが、前回の記事の内容でした。

今回は 設置したダウンロードボタンのデザインを cssでカスタマイズしてみます。

サイトのWordPressテーマは『Cocoon』です。

スポンサーリンク

デザインを変えてみる

基本のコードは以下。

.wp-block-file a.wp-block-file__button {
/*この部分にデザインの要素を追加する*/
}

上のコードを テーマエディターファイルの子テーマ(Cocoon Child)のスタイルシートに追加します。

背景色を変える

「background-color」を書き加える。

.wp-block-file a.wp-block-file__button{
  background-color: #5c9799; /*背景色*/
}
カラーコードの確認はこちら

文字色を変える

「color」を書き加える。

.wp-block-file a.wp-block-file__button{
  color: #ffc0cb; /*文字色*/
}

文字を太くする

「font-weight」を書き加える。

.wp-block-file a.wp-block-file__button{
  font-weight: bold; /*文字を太くする*/
}

文字サイズを変える

「font-size」を書き加える。

.wp-block-file a.wp-block-file__button{
  font-size: 18px; /*文字サイズ*/
  padding: 6px 16px; /*内側の間隔調整*/
}

ボタンに枠線を付ける

「border」を書き加える。

.wp-block-file a.wp-block-file__button{
  border: 3px solid #ff0000; /*枠線を付ける*/
}

ボタンの枠線を二重線にする

「border」をdoubleにする。

.wp-block-file a.wp-block-file__button{
  border: 4px double #fff; /*二重枠線にする*/
}

ボタンを四角い形にする

「border-radius」を書き加える。

.wp-block-file a.wp-block-file__button{
  border-radius: 0px; /*ボタンの角*/
}

ボタンを角丸にする

「border-radius」のpx値で丸みを調整する。

.wp-block-file a.wp-block-file__button{
  border-radius: 10px; /*ボタンの角*/
}

ボタンに影を付ける

「box-shadow」を書き加える。

.wp-block-file a.wp-block-file__button{
  box-shadow: 2px 2px 4px #696969; /*影を付ける*/
}

まとめ

↓↓ここまでのいろんな要素をひとつに詰め込むとこんな感じになります。

.wp-block-file a.wp-block-file__button{
  color: #331907; /*文字色*/
  font-size: 18px; /*文字サイズ*/
  padding: 6px 16px; /*内側の間隔調整*/
  background-color: #d1b9a7; /*背景色*/
  border: 3px solid #66330e; /*枠線を付ける*/
  border-radius: 11px; /*ボタンの角*/
  box-shadow: 2px 2px 4px #696969; /*影を付ける*/
}

配色のセンスはまぁイマイチですが、それでもデフォルトに比べればだいぶマシでしょ?

最後に・・・

今回の記事では、またまたサルワカ先生のサイト記事を参考にさせていただきました。

おしまい

タイトルとURLをコピーしました