今試してみました、教わったように設定したところ、できました ? 。

検索しているときに、どこか的外れになったり、理解が追い付かなかったりするのだと思います。

今はパッと試しただけなのですが、ご説明くださったところをよくよく読んでみます。

すっきりしました・・・・。

感謝です、ありがとうございました！

ということは、試していないのですが、以下のように書けば、良いのではないかと思われます。

.wp-block-file.c-color-salmon a.wp-block-file__button {
    background-color: salmon;/*サーモン色*/
    font-weight: bold;/*文字ちょっと太く*/
}

私も、ロコさんのコードを試してみたのですが、上手くダウンロードのダイアログが表示されました。

例えば、高度な設定でクラス名を

c-color-salmon

とすると、以下のように、ブロックにクラスが追加されるようです。

<div class="wp-block-file c-color-salmon">
<a href="http://demo.local/wp-content/uploads/2020/07/2020-07-03-213750.png">画像の拡大効果2020-07-03-213750</a>
<a href="http://demo.local/wp-content/uploads/2020/07/2020-07-03-213750.png" class="wp-block-file__button" download="">ダウンロード</a>
</div>

ikumiさんの試された「高度な設定」で クラスを設定すれば、個々のボタンの色を別の色にすることもできそうです。

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

使うのは半角アルファベットとハイフンとアンダースコアです。（ハイフンとアンダースコアは最初と最後には使わない）

他の記号も実際は、使えるらしいのですが、まあ、使わない方が良いでしょう。

新人コーダーに知っておいて欲しい命名規則の考え方

CSSを適用範囲を絞るときは、よく

.article h2 {

のように半角スペースで繋げて子孫セレクタで用いることが多いのですが、HTMLの同じタグ内にある、要素 や id や  class を半角スペースを空けずに繋げることで、適用範囲を絞ることもできるようになっているようです。

例えば、

<div class="wp-block-file c-color-salmon">

のように、同じHTMLのタグ内に２つの class が付与されている場合に、その２つの class が付与されているHTMLのタグだけに適用範囲を絞ることができます。

その場合は、CSSのセレクタに、２つの class を半角スペースを空けずに並べて記述します。

.wp-block-file.c-color-salmon {

リフィトリーさんとロコさんのおっしゃる通り、画像の効果の設定と関係していました。

画像が好きなわりに、このCocoon設定の画像タブにある設定、全然見てませんでした・・・。

わいひらさんの以下の記事で勉強させていただきました。（わいひらさんありがとうございます・・・！）

https://wp-cocoon.com/lightbox-libraries/

上のページで見て、baguetteBoxのままがいいなぁと思い、ロコさんのコードを利用させていただきました。

感動。

そして、リフィトリーさん、色替えのコードもありがとうございます・・・！実はCSS検索の死闘（？！）を繰り広げ、あきらめていたところでした。

あの・・・。同じページ内に複数のダウンロードボタンを入れて、各ボタンの色を変えることって・・・できますでしょうか？各ブロックにある、「高度な設定」を自己流で試すと、ブロック全部に色がついて、ダウンロードボタンの部分が黒のまま、とかになり。同じシナリオの利用例や説明ページが見つからず・・・。

「無理」という結論でも良いのですが、ご存知だったらご助言いただけると助かります。

サポート外のことだと思うので、ご存知だったらで・・・。

現在設定されている拡大効果はbaguetteBoxで間違いないでしょうか？

baguetteBoxの場合、テストページの投稿編集画面内にあるカスタムJavaScript設定欄に、以下のコード

(function($){baguetteBox.run(".entry-content", {ignoreClass: 'wp-block-file__button'})})(jQuery);

を入力・保存し、テストページのダウンロードボタンから画像をダウンロードできるかどうか再度確認してみてください。

ローカルのテストサイトで png ファイルで試してみたら、画像の拡大効果を「なし」にすると、ダウンロードのダイヤログが表示されました。

しかし、画像の拡大効果を「なし」以外の４種類の、いずれに設定しても、画像の拡大効果として表示されちゃいました。

他テーマで、できたのに、Cocoonでは・・というのは、画像の拡大効果と関係があるのかもしれませんね。

画像の拡大効果を「なし」にすれば、png でもイケるかも？

わいひらさんは、映画見てるかも。

へえ～、そうなんですね。

ブロックエディターだと、ダウンロードボタンを簡単に設置できるんですね。

面白そうなので、やってみようかな・・

あ、そうそう、ダウンロードボタンのセレクタがわかったので、色やデザインも変えられるっぽいです。

.wp-block-file a.wp-block-file__button {
    background-color: salmon;/*サーモン色*/
    font-weight: bold;/*文字ちょっと太く*/
}

等々。