WordPressのダウンロードボタンをCSSで変更する方法｜全体・ページ別・ボタン別（Cocoon対応）

WordPressの「ダウンロードボタン」を、CSSで好きな見た目にカスタマイズする方法です。

ダウンロードボタンの挿入手順については、以下の記事にまとめています。

ダウンロード用のサンプルファイルは、英語のボタン表現をいくつかピックアップしたPDFファイルです。リンク部分をクリックすると、内容を確認できます。上記の記事で使ったファイルと同じです。

ダウンロードボタンの色変更

以下のようなCSSコードを使うと、ボタンの背景色とテキストの太さを変更できます。Cocoonフォーラムでリフィトリーさんから教えていただいたコードです。

.wp-block-file a.wp-block-file__button {
    background-color: salmon;/*ボタンの背景色*/
    font-weight: bold;/*文字ちょっと太く*/
}

色を自分仕様にして貼り付ければOK！

貼り付け場所は、この記事後半の「コードを貼る場所」（目次の３番）で説明します。

編集画面では黒いままです。プレビューで見ると、反映されています。

右側が、上のコードを使った例です。

文字・外枠線・丸みの設定

更に、文字の色やサイズを変えたり、外枠線を足すこともできます。

新しく追加した行は以下です。

color: #FFB2AE;/*ボタンテキストの色*/
font-size: 20px;/*フォントサイズ*/
border: 5px solid #FFB2AE;/*外枠線の太さ　直線　色*/
border-radius: 30px;/*角の丸み*/ 

• border（外枠線）について　（border: 5px solid #FFB2AE;）
  pxの数値を大きくすると太くなります。solidの意味は実線で、最後のカラーコード（#FFB2AE）が外枠線の色です。

• border-radius（角の丸み）について　（border-radius: 30px;）
  数値を変えると、丸みの程度が変化します。

角を直角にしたいときは、0pxにします。以下のようになります。

もっと変えたいとき

徹底的にオシャレなボタンにしたいときは、以下のサルワカさんサイトを見てみましょう。

「ステッチ」というボタンのコードを使ってみました！

コピペの手順

使いたいボタンの下にある[コードを見る]をクリックすると、以下のような感じになっています。

.btn-stitch {
 display: inline-block;
 padding: 0.5em 1em;
 text-decoration: none;
 background: #668ad8;
 color: #FFF;
 border-radius: 4px;
 box-shadow: 0px 0px 0px 5px #668ad8;
 border: dashed 1px #FFF; }

サルワカさんのボタン装飾をWordPressの「ファイル」ブロック（ダウンロードボタン）に使う場合は、
セレクタ（{} の前）を .wp-block-file a.wp-block-file__button に置き換えます。

中々奥が深く、一部の効果が反映されない場合も多いです。大体同じなんだけど、やっぱりちょっと違う・・・みたいな。

その場合、サルワカさんの以下のページで対応策を探ってみましょう。

コードを貼る場所

ブログ内のダウンロードボタン全部に同じデザインを反映したい

｛｝の中身はイロイロですが、以下のようなコードをコピー。

.wp-block-file a.wp-block-file__button {
 background-color: #FCECEA;/ボタン背景色/
 font-weight: bold;/文字ちょっと太く/
 color: #FFB2AE;/ボタンテキストの色/
 font-size: 20px;/フォントサイズ/
 border: 5px solid #FFB2AE;/外枠線の太さ　直線　色/
 border-radius: 30px;/角の丸み/
}

始まりが「.wp-block-file a.wp-block-file__button」となっていますね。

このセレクタは「ブログ内のダウンロードボタンすべて」を指定しています。

そのため、このCSSを貼り付けると、同じデザインがブログ内のダウンロードボタンすべてに反映されます。

１．[外観]メニューから[テーマエディター]を選びます。

２．Cocoonの場合、Cocoon Childのスタイルシートになっていることを確認。
[子テーマ用のスタイルを書く]とあるセクションの[必要ならばここにコードを書く]とあるセクションに貼り付けます。

３．他のテーマでも基本は同じようです。Twenty Seventeenというテーマでも試してみました。同様の動作でした。以下のように貼り付けます。

オレンジ色っぽくなっている部分は「コメント」です。コードではなくメモなので、その中にはコピペしません。新しい行に貼り付けましょう。

４．[ファイルを更新]をクリックして終了です。

特定の記事のダウンロードボタンだけに設定を反映したい場合

Cocoonの場合

該当記事の編集画面で一番下までスクロール。

以下の[カスタムCSS]というセクションにコードを貼り付ければOKです。

お使いのテーマで、ページごとの[カスタムCSS]欄が無い場合

テーマによっては、記事ごとにCSSを書ける［カスタムCSS］欄が用意されていないことがあります。

その場合は、次のセクションで説明する 「高度な設定（追加CSSクラス）」を使う方法で対応できます。

流れとしては以下のようになります。

1. ダウンロードボタンにオリジナルのクラスを設定
2. そのクラスを使ったCSSを
   ［外観］→［テーマエディター］→［style.css］（または追加CSS）
   に貼り付ける。
   
   すると、特定ページだけ反映できました
   （※テストには Twenty Seventeen を使用しています）

ダウンロードボタンごとに違う見た目にしたい場合

ダウンロードボタン1つ1つに別のデザインを設定したい場合は、
各ブロックにある ［高度な設定］ を使います。

ここでボタンに「目印」をつけて、
その目印がついているボタンだけにCSSを反映させます。

この「目印」を「クラス」と言います。あとで、その「クラス」があるブロックに設定を反映してね、という設定をすることができます。

オリジナルのクラスを設定

１．ダウンロードボタンを挿入しているブロックをクリックします。

２．右側に表示される ［高度な設定］ をクリックして開きます。

３．［追加CSSクラス］ に、オリジナルのクラス名を入力します。

クラス名のルールについて

クラス名は、WordPressやテーマで使われていない
オリジナルの名前を設定します。

使用できる文字は以下です。

• 半角アルファベット
• ハイフン（-）
• アンダースコア（_）

※ハイフンとアンダースコアは、先頭・末尾には使いません

自分の名前なら使われていないでしょうから、私はikumiから始まる文字列を使いました。

CSSコードにクラス名を追加する

先程設定したクラス名を、CSSコードのセレクタ部分に追加します。

書き方は、

• .wp-block-file の後に
• ピリオド（.）を付けて
• オリジナルのクラス名を続けます

以下のようになります。（※クラス名と中身のデザインは、人それぞれです。）

.wp-block-file.ikumi-btn-square a.wp-block-file__button {
background-color: #FFF4E1;/ボタン背景色/
font-weight: bold;/文字ちょっと太く/
color: #7EC2C2;/ボタンテキストの色/
font-size: 20px;/フォントサイズ/
border: 5px solid #7EC2C2;/外枠線の太さ　直線　色/
border-radius: 0px;/角の丸み/
}

そのコードを、Cocoonの場合は、編集画面の下部にある[カスタムCSS]というセクションに貼り付けます。

下書き保存してプレビューで確認しましょう。

ページごとの［カスタムCSS］欄がないテーマの場合

その場合は、

1. ［高度な設定］でオリジナルのクラス名を設定
2. そのクラス名を使ったCSSを
   ［外観］→［テーマエディター］→［追加CSS］（または style.css）
   に貼り付けます。

（※テストには Twenty Nineteen を使用しています）

おわりに

いや長かった・・・。初めてダウンロードボタンを使ったのは、2019年4月。

「黒一択？ホントに？？」という検索を大分しました。

その時点では、「CSS」って、検索キーワードに入れることすら思いつきませんでした。笑。そしてあきらめていました。

もちろん「黒を選ぶ」こともあります。でもそれ一択と言われるとチョット寂しいのネ。

最近、CSSというもので変えるらしいと分かり、再び検索にチャレンジ。でも「ボタンごとに変える」方法がどうしても分かりませんでした★。

・・・で、以下のコクーンフォーラムで教えていただきました。ここには、ズバリ私がつまづいていた、そして理解が足りていなかった「セレクタ」というものの設定方法も回答にあります（該当部分にとびます）ので、興味がある方はぜひ読んでみてください。