CSSによって疑似要素:afterでアイコンフォントを表示しているのだと思うので、:afterの方は削除して:beforeで表示するようにすれば可能だと思います。

実際のページがないので検証はしていません。

emikichiさん

はるさんがお答えになったので、便乗します。
はるさんの仰った通りなんですけど。

何と申しますか、非常にお答えしづらい質問なんです。

できるかできないかと言われれば、できますということです。

ただ。

CSSに何も考えずに書けば、同一ページに表示されている囲みボタンが、全部同じようになってしまうと思います。

そうならないためには、なんらかの方法でこの囲みボタンだけという指定にせねばならないとは思います。

それを、何らかの曖昧な表現で回答者側が答えたとして。
それでできる場合もありますが、できない場合もあります。

もしできなかった場合、できなかったと更に質問が来て、また曖昧なまま回答者が答える。
更にまた質問が来る。

という、やりとりが増えてしまうんです。

そういう意味で、非常に難しい質問で、はるさんのように答えるしかなくなってしまうんです。

そのため、お昼過ぎに私もこのご質問を見るに見たのですが、大変申し訳ないですがスルーしてしまいました。

@haruinoue

コメント頂き、ありがとうございます。

質問に書くべきでしたが、まだまだWordPressを始めたばかりの超初心者です。また、この質問が初めての質問となります。質問の仕方や書くべき事も分からず、見て頂く方に、ご負荷をかけてしまい申し訳ありません。

対象の囲みボタンのHTMLを参照したところ、下記のようなHTML文が書かれていました。

<div class="wp-block-cocoon-blocks-button-wrap-1 aligncenter btn-wrap btn-wrap-block button-block btn-wrap-l has-text-color has-background has-border-color has-black-color has-white-background-color has-grey-border-color"><a href= https://testsite.com/>
次の記事へ
</a></div>

（注：すみません。サイトのアドレスは架空のものとなり、アクセスできません。）

このwp-block-cocoon-blocks-button-wrap-1を定義しているCSSを参照して左側に＜マークが表示される新しいCSSを記述すれば良いでしょうか？

ただ、wp-block-cocoon-blocks-button-wrap-1を定義しているCSSの保管されている場所が分かっていません。この囲いボタンのCSSの保管されているcocoonの場所もしくはCSSのコードをお教え頂けないでしょうか。

宜しくお願い致します。

@mk2_mk2

コメント頂けるだけでも励みになります。ありがとうございます。

すみません。初めて質問させて頂いております。まだどのように質問を記入すれば、分かりやすいかすら分かっていない状況です。回答者様にご負担をおかけしないよう、質問の書き方も勉強していきます。

emikichiさん

実は2度回答を書いたのですが、その2度とも消しました。
曖昧な回答しか出来ないからです。

「どういう風に質問をすれば」というお悩みもあるのだとは思います。
しかし、回答者側も「どういう風に回答をすれば」と、大変思い悩んでいる状態なんだと思います。

他の回答者の方々もご覧にはなっているものの、どう回答すれば良いか分からず、お困りなんだと思います。
（少なくとも、私はそうです。）

曖昧な質問には、曖昧な回答しかできません。

その結果、質問が繰り返される事態は避けたいです。
そして、そのつもりはなくとも結果的に、回答者が嘘をついたという状態になることも避けたいです。

ここで、私がなんらかの曖昧な回答をして、他の回答者の方々にご負担を掛けることも避けたいです。

そういう思いで、先に書いた回答は2回とも消してしまいました。

どうすれば良いんでしょうね。

CSSの場所を教えろということであれば、親テーマのスタイルシートです。

あとは、はるさんが仰っていた通りです。

after要素を消して、before要素で追加するんだろうなと思います。

こんな回答を書いてしまうと、更なる質問ややりとりを生んでしまいそうです。
それに、不正確極まりない、実に曖昧な回答だと自分でも思います。

こんな回答は書きたくありませんが、振り絞って書いたつもりです。
困り果てました。

勘で回答して良いなら、

投稿者:: @haruinoue

:afterの方は削除して:beforeで表示するように

とは、子テーマのstyle.css(管理画面左側の外観>テーマエディターから、右上でCocoon Childが選択されていることを確認した上で、その下のstyle.css)に

.btn:before {
    font-family: FontAwesome;
    content: "\f104";
    position: absolute;
    left: 0;
    margin-left: 12px;
}
.btn:after {
    content: "";
}

みたいに書くという意味です。

ただこの方法だとmk2さんが書かれているように

投稿者:: @mk2_mk2

CSSに何も考えずに書けば、同一ページに表示されている囲みボタンが、全部同じようになってしまうと思います。

という状態になるので、

投稿者:: @mk2_mk2

そうならないためには、なんらかの方法でこの囲みボタンだけという指定にせねばならないとは思います。

ということになります。

質問の仕方としては、実際のページのURLを提示するのが一番です。

提示できない事情があるのであれば、回答としてもこれが精一杯だと思います。

投稿者:: @emikichi

この囲いボタンのCSSの保管されているcocoonの場所

ボタン関連はstyle.cssの4027行目辺りから書かれているようです。

URLの提示や、自身でのカスタマイズが難しい場合は、有償になりますがカスタマイズ依頼をご検討ください。
https://wp-cocoon.com/cocoon-custom/
これなら、公開ページにURLを公開することなく対応していただけると思います。

無料テーマのフォーラムの性質上、皆様無償で対応してくださっているので、個別に丁寧に1から方法を説明するということは難しいということはご了承ください。

「CSS 擬似要素」や「CSS before」で検索すると使い方の解説が出てきます。

CSSやWordPressの初心者向けの記事やトピックを紹介しているトピックもありますので、こちらも合わせて見てみてください。

【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

https://wp-cocoon.com/community/postid/31048/

また、WordPressやCSS初心者向けの解説書もたくさん出ています。初心者ならウェブで学ぶより、一から順に必要なことを解説されている本がオススメです。ウェブで学ぶと基礎を飛ばして答えだけしか得れないこともあるので。

もちろん、わいひらさんがおっしゃるようにプロに依頼するのも選択肢としてありです。

質問の仕方や書くべき事も分からず、見て頂く方に、ご負荷をかけてしまい申し訳ありません。

こちらに関しては過去のトピックをいくつか読んで、スムーズにやり取りしているトピックを参考にしてみてはどうでしょうか。

沢山のコメントありがとうございます。すみません、オーバーフローしています。一つずつ確認させて頂きますので、少し時間を下さい。

自分の作っている最中のサイトの出来と内容がまだまだ稚拙すぎて、お見せするのが恥ずかしい状況です。ただ、Web上には置いてあります。。。

AIやディープラーニングについてのプログラムについての解説のサイトを作ろうと考えております。WordPressで作りこむ部分は、アドバイス頂いたようにプロにお願いした方がゴールに早くたどり着くように思います。検討させて下さい。

@haruinoue

ご返信が遅れて申し訳ありません。

お教え頂いた内容を何度も読み返し、少しずつ理解できてきました。

新しい囲みボタンのCSSをCocoonの子テーマに定義してそのCSSを使ってボタンを表示すればできそうな気がしてきました。

WordPressやCocoonのプロになるつもりはないのですが、自分であれこれやってみると色々と勉強になります。まだまだ、始めたばかりでお金があまりかけられない状況なのですのが、はるさんのようなプロの方にお仕事を依頼させて頂けるようになるよう、こつこつ頑張ってみようと思います。

さる子さんが貼って下さったページも参照させて頂きました。また、参考書も調べてみましたが、下記のようにaの前に>を記述しているのは何の機能として働いているのか、分かりませんでした。aの前の>は、なんのコマンドなのでしょうか？

.btn2-wrap > a { color: #fff; }

お手数をお掛けして申し訳ありませんが、お教え下さい。

@saruko

コメントありがとうございます。

囲みボタン.btn-lの右にある＞マークを、左に＜マークを付けるということは、新しい囲みボタンをCSSで定義すればできそうな気がしてきました。

まず、お教え頂いた、【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピックを見て勉強しました。ただWordPressでのCSSは少し一般的な参考書に載っているものと異なっているような気がして戸惑っています。下記は囲みボタンを作った時に出てくるHTML側の記述ですが、CSSにはどこにもこのクラスがなく、WordPress特有のものかと考えております。

<div class="wp-block-cocoon-blocks-button-wrap-1">

「CSS 擬似要素」や「CSS before」についても勉強してみます。

やりたいことをプロにご依頼させて頂きたいとは思っているのですが、まだまだ個人でサイトを作り始めたばかりで、あまりコストがかけられない状況です。プロの方にご依頼させて頂けるようになるよう、こつこつ頑張ってみようと思います。

過去のトピックについても、まだ参照できていませんので、これから読み込んでみます。思ったのですが、ここのフォーラムは、初心者が何でも気軽にお聞きして良いというものではなく、もしかしてプロの方々の交流の場なのでしょうか？もしそうであれば、大変申し訳ない事をしてしまいました。

emikichiさん

流石にこれは。

これいうことを1から教えていては、回答者は回らないです。

ここは、プロの方もいらっしゃいますが、素人の方も大変多くいらっしゃいます。
かくいう私も素人です。

Cocoonというテーマを使って、サイトを運営していたり、これから始めようとする方々の交流の場所であり、Cocoonのカスタマイズに関する質問、Cocoonの機能の質問、機能追加の要望、などが活発に意見交換されていると思います。

Cocoonに関するフォーラムです。
それだけでなくWordPressなど、他のことも意見交換されてはいます。

今回、emikichiさんのお書きになったことは、CSSを1から教えてくれというような内容です。

流石にちょっと。
ネットで「CSS セレクタ」で検索すれば、いくつか解説サイトが見つかると思います。

投稿者:: @emikichi

aの前の>は、なんのコマンドなのでしょうか？

.btn2-wrap > a { color: #fff; }

コマンドではありません、「1つ下の階層の子要素にのみ」へ適用したい時に書きます。

つまりclass「btn2-wrap」の1つ下の階層の<a>タグのみに適用するということです。 
他の場所の<a>タグには適用しないように指定しています。

投稿者:: @emikichi

下記は囲みボタンを作った時に出てくるHTML側の記述ですが、CSSにはどこにもこのクラスがなく、WordPress特有のものかと考えております。

<div class="wp-block-cocoon-blocks-button-wrap-1">

いえ、classを定義しています、WordPress独特でもなく、普通の定義です。
（Cocoonが定義したclassではありますが。）

記載のとおり、「wp-block-cocoon-blocks-button-wrap-1」というclassです。

CSSにはこのclassで指定されていないだけです。

おそらくemikichiさんがお書きになった以下の部分の指定が見つからないということかと思いますが。

投稿者:: @emikichi

<div class="wp-block-cocoon-blocks-button-wrap-1 aligncenter btn-wrap btn-wrap-block button-block btn-wrap-l has-text-color has-background has-border-color has-black-color has-white-background-color has-grey-border-color"><a href= https://testsite.com/>
次の記事へ
</a></div>

ここには1つではなく、スペース区切りで複数のclassが指定されているということです。

ということを1つ1つは難しいです。
これを1人1人に、1つ1つは無理だと、先の返信でもわいひらさんがお書きになったかと思います。

例えば、以下のリンクで少し知識を得てみるのも良いと思います。
（外部サイトです。）

https://saruwakakun.com/html-css/reference/selector

ネットには、かなりの情報が載っていますから、お調べいただくのがよろしいかと思います。
（ただし、ネットには間違った情報も多いですが、解説本に劣らない良質なサイトも結構あります。）

そして、さる子さんがご紹介くださったトピックにも、たくさんの有用な情報があると思うのですが。
まずは読んだり見たりしましょうよ。

さる子さんも仰っていましたが、ネットで断片な知識を得るよりは、解説書などで体系的に学ばれるのがお勧めです。
（私はネットだけで断片的に…な口ですが。）

紙媒体の本は、今のご時世大きな本屋さんに行くのも大変かも知れませんが、ネットで購入もできますし、電子書籍もあるはずです。

@mk2_mk2

丁寧に説明して下さり、ありがとうございます。

はい。さる子さんが書いてくれたサイトは昨日頑張って読んできました。昨日の段階では「CSS セレクタ」＞について書かれた記事にたどり着けませんでした。お教え頂いた「CSS セレクタ」で検索して、理解できました。ありがとうございます。

また、はるさんに教えて頂いた、CocoonのCSS「ボタン関連はstyle.cssの4027行目辺り」を参照して、ボタン関連のCSSの記述については、書籍やWebページを見て勉強できました。ただ、私の持っている書籍は入門書の為か古い本からなのか、「スペース区切りで複数のclassを指定する」ことや「CSS セレクタ」についての記述がありませんでした。

過去のトピックについても少し見てみたのですが、私が初心者過ぎて、どれがスムーズにやり取りしているトピックなのかも、まだよく分かっていない状況です。すみません。皆様から頂いたコメントから、まだまだ足りていない事は承知しており、勉強して普通に会話が成り立つくらいにはなりたいと考えています。

emikichiさん

私は素人ですので、もしかしたら昔classは1つしか指定できなかったのかも、とか、いつから複数指定できるようになったか、などは分からないです。

ただ…ですよ。

「HTML class指定」と検索するだけで、検索上位のサイトには、classの指定方法、複数の指定など、記載されています。
簡単に見つかります。

また、HTMLとCSSは関係が深いですが、別のものです。
HTMLの箇所には、CSSのことが書いてないこともあるでしょう。

これも、「CSS セレクタ」と検索すれば、検索上位のサイトに、かなり詳しく解説されています。
（私が、先程リンクしたサイトもそうです。）

他の回答者の方がリンクしてくださったトピックのリンクから、外部サイトへ行くことができます。
そこには、かなり丁寧に、解説書に劣らないくらいに解説されています。

それをまずは一通り読んで学べば、かなりのことが理解できます。
それを学ぶだけで、今回のようなご質問はなくなってしまいます。

誰もが始めたばかりの頃は初心者です。

でも、今の時代、検索するだけでかなりの情報を得ることができます。
（だからこそ、取捨選択は必要ですが。）

申し訳ない限りですが、先程のご質問は、ほんの少し検索しただけで、回答がネットで見つかります。

例えば、なんらかのスクールで同じような質問をすれば、いくらかの料金を取られてしまうと思いますよ。

ここは無料のフォーラムですが、他人の時間を使って、自分の利を得ようとしていることを忘れてはならないと思います。

知識を得るだけでは頭でっかちになりますから、試すことも必要です。

やってみて、上手くいかなかった。
なぜ上手くいかなかったのか、それを考えてまた調べる。

そういうことも必要だと思います。
初めから上手くいく訳がありません。

そして。

私は感情的になっているかも知れませんが。
他の方々は冷静に、しかも親切丁寧にアドバイスくださっています。

それなのに、それを無にするというのか、そのアドバイスを後回しにしてやってみずに、また同じような質問を繰り返す行為というのか。

それは、アドバイスくださった方々に失礼なのではないかなと、思ってしまいます。

@mk2_mk2さん

皆様に教えて頂いたことを一生懸命勉強しております。あまりに反応が遅くなってもと思い、一度返信を書かせて頂きました。知見のある方にコメント頂くと、自分では調べきれなかったこともWeb検索等でヒットするようになり大変助かりました。また、さる子さんのサイトは、すごく良くできていて感動しました。正直「ここまでは自分では作れないな。」とあきらめがつくレベルでした。まだまだ、ご指導頂いたことをキャッチしきれていない部分のありますが、ご恩返しができるよう頑張っていきます。

emikichiさん

最初は言葉すら分からなくて、検索すらできないんだろうなぁと推測します。

しかし、ご紹介のあったトピックにリンクのあるサイトは、とても良くできていて、あのサイトを一通り読むだけで、かなりのことができるようになります。

まずは、時間や手間を惜しむのではなく、読んだり調べたりすることです。
私もあのサイトは良く参考にさせていただいています、今も。

何より一番は、ご自身で試してみることです。

ただ、サーバー上にある本番環境で試すことは怖いと思います。

サーバー上にサブドメインなどで、テスト環境を作ることも一案です。
それか、ローカル環境をツールで作成して、WordPressをPC上で動かし、そこでテストするのも一案です。

ローカル環境のツールとしては「Local by Flywheel」などがあります。
「WordPress ローカル環境」で検索すると、いくつか解説サイトがヒットすると思います。

何事も、まずはやってみて失敗してのトライ&エラーの繰り返しです。
それで学ぶことが多いのではないかと、私は思います。

頑張ってください。

@mk2_mk2さん

ありがとうございます。

はい。ソースコードをコピペしてGoogleで検索してもヒットせず、なかなか難しい状況でした。教えて頂いたことや、さる子さんのサイトや関連サイトをみて、勉強の効率がかなり上がった気がしています。

まだまだ作り始めたばかりで、メインサーバー自体がテスト環境と化している状況です。現時点であまりコストが捻出できないのもありますが、依頼側にあまりに知識がなさすぎる状態では、カスタマイズのご依頼をさせてもらっても、トラブルの元となってしまいそうです。教えて頂いたサイトや関連のサイトを繰り返し読み進め、トライ&エラーをしながら少しずつやってみて、まず知識を身につけたいと考えています。

emikichiさん

人から何かアドバイスをもらった時は、それはどういうことなんだろうと調べた方が良いと思いますよ。

通常のレンタルサーバーであれば、サブドメインの取得もサブドメインでの環境構築も、費用は掛かりません。

そして、ローカル環境のツールも、費用の掛からないものが多いです。
私が紹介したものも、費用は掛かりません。

ということで、このトピックは閉じていただければと思います。
（emikichiさんがよろしければ、「解決済」にしてください。）

投稿者:: @emikichi

WordPressでのCSSは少し一般的な参考書に載っているものと異なっているような気がして戸惑っています。

WordPress自体が複雑な作りになっていて、初心者向けではないから理解しにくいのだと思います。CSSの基本はCSSの解説書に載っているものと変わりません。

CSSの基本がわかってもWordPressに組み込むのがわからないということであれば、WordPressに関しても勉強する必要があります。

ただ、複数のセレクタについて書かれていない参考書は相当古いものだと思うので使い物にならないかもしれません。できればここ1、2年以内に出版された新しい本を購入されることをオススメします。

ウェブ関係の技術は移り変わりや進化が早いのでできる限り新しい情報を参考にしてください。

ここのフォーラムは、初心者が何でも気軽にお聞きして良いというものではなく、もしかしてプロの方々の交流の場なのでしょうか？

フォーラムのガイドラインに沿っていればどなたでも歓迎かと思います。ただの一利用者である私の判断ですが…。単純に回答者側は書き込み数が増えるため、名前を覚えてしまうだけです。

プロに頼むのはお金がかかると尻込みされてますが、ちょっとしたカスタマイズだと数千円と意外と料金がかからなかったりもします。「上手く伝えれるかわからない」ことも想定された上で対応してくださると思うので、ここのフォーラムよりスムーズに対応してくださると思います。何より非公開でやり取りできるのでブログアドレスの提示がしやすいと思います。

初めてCSSを触る人が1日や2日でできるようになるものではないです。返信は急がなくていいので、一度じっくりと参考書を読んだり、いろいろと検索して調べてみてください。

フォーラムのガイドライン違反により削除

管理者

勝手に人の名前もじって、品性の欠片もないことを言わないで欲しいのですけど。

少し文章もあせてみようとしたり。
そんな言葉は使いませんが、私は。

フォーラムのガイドライン違反により削除

管理者

わいひらさん、サポーターのみなさん、こんにちは

回答者の方が上から目線というのは私も感じていました

回答するのもしないのも自由なのに、まるで義務だから仕方なく回答して“あげている”感じがひしひしと伝わってきます

高慢なのか意固地になっているのか、環境情報がなくても回答できるようなことでも環境情報を出せと言って嫌がらせをするあたりは本当に性格が悪いです

初心者がどのような気持ちでここにたどり着いたのか、質問を書き込むためにどれだけの勇気がいったのか、少しは初心者の気持ちになって考えてほしいです

環境情報は、必要だから提示をお願いしています。
それは、フォーラム冒頭のガイドラインにも書かれています。
必要だから情報の提示をお願いしているのに、上から目線も何もないかと思います。
ガイドラインに書いてあることを「嫌がらせ」というのもちょっと感覚的によくわからないです。

あと、仮に初心者が必死にこのフォーラムにたどり着いたとしても、必要な情報を提示しないのは、また違うと思います。
もちろん、情報を出すか出さないかは、本人の自由ではあります。
なので、情報を出せない場合は、プライベート対応していただけるカスタマイズ依頼を推奨しています。
https://wp-cocoon.com/cocoon-custom/

書かれていることに全く同意はできません。

トピック主さんの書き込みはないようですし、荒れているようなのでこのトピックはクローズさせていただきます。