サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020-07-01 01:19
お世話になっております。
SNSフォローボタンをサイドバーに表示させており、ボタンを丸くし、インスタグラムのボタンをピンクに設定しております。
しかしPCでプレビューを行うと、色も変わらず形も初期状態
モバイル版においては色のみ変わり形は変わらずといった状態です。
修正方法をご教示いただきたいです。
以下テーマエディターCSSです。
.sidebar .sns-follow-buttons a {
width: 18%; /*ボタンの幅*/
}
.sidebar .sns-follow {
margin: 0 0 24px 0;
}
.sidebar .sns-follow-buttons a {
border-radius: 50px;
}
.sidebar .instagram-button {
background-color: #c522b8 !important;
}
Topic starter
2020-07-01 22:13
大変失礼いたしました。
下記の通りです。
よろしくお願いいたします。
URL：snsgenerationrom.com
---------------------------------------------- サイト名：test サイトURL： https://snsgenerationrom.com ホームURL： https://snsgenerationrom.com コンテンツURL：/wp-content インクルードURL：/wp-includes/ テンプレートURL：/wp-content/themes/cocoon-master スタイルシートURL：/wp-content/themes/cocoon-child-master 親テーマスタイル：/wp-content/themes/cocoon-master/style.css 子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css スキン：/wp-content/themes/cocoon-master/skins/simple-green/style.css WordPressバージョン：5.4.2 PHPバージョン：7.0.33 ブラウザ：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36 サーバーソフト：LiteSpeed サーバープロトコル：HTTP/1.1 エンコーディング：gzip, deflate, br 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.2.0.3 カテゴリ数：1 タグ数：0 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.2 style.cssサイズ：5184バイト functions.phpサイズ：205バイト ---------------------------------------------- Gutenberg：1 AMP：0 PWA：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：0 ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg ---------------------------------------------- ブラウザキャッシュ有効化：0 HTML縮小化：0 CSS縮小化：0 JavaScript縮小化：0 Lazy Load：0 WEBフォントLazy Load：0 ---------------------------------------------- 利用中のプラグイン： ----------------------------------------------
2020-07-01 22:33
@rom さん
ちょっと、試しにCSSを書いてみました。
.sidebar .sns-follow-buttons {
justify-content: space-evenly;
}
.sidebar .sns-follow-buttons a {
width: 45px;
}
#container .sidebar .sns-buttons a {
border-radius: 50%;
}
.bc-brand-color.sns-follow .instagram-button {
background-color: #c522b8;
}
実際には試していないので、上手くいくかどうか・・
わいひら reacted
Topic starter
2020-07-01 22:39
ありがとうございます。
スマホ・タブレットでは丸くなり、色も変わりましたが、PCでは変化せずでした。
Topic starter
2020-07-01 22:56
何個かボタンはありましたが、今現在修正していたため、3つになっています。
2020-07-01 23:01
@rom さん
ボタンを円形のまま、サイズを変えたいときは、
.sidebar .sns-follow-buttons a {
width: 45px;
}
のところを、
以下のように変えてください。
.sidebar .sns-follow-buttons a {
width: 50px;
height: 50px;
}
サイドバーの幅は画面幅によって、変化するので、ボタンの横幅は、「％」で指定するより、「px」で指定した方が良いかもしれません。
Topic starter
2020-07-01 23:12
ご丁寧にありがとうございます。
度々申し訳無いのですが、
下記の添付ファイルのようにするにはどのようにするのでしょうか。
2020-07-01 23:20
@rom さん
その場合は、
#container .sidebar .sns-buttons a {
border-radius: 50%;
}
のところを、
#container .sidebar .sns-buttons a {
border-radius: 50px;
}
に変えます。ちょうど、ボタンの高さと同じ値にします。
なので、ボタンのサイズの指定は、
.sidebar .sns-follow-buttons a {
width: 100px;
height: 50px;
}
こんな感じでイケルのではないかと思います。
ボタンの高さを変えたときは、
border-radius
の値も変える感じです。
あっ！ボタンの幅が100pxだと、画面幅を狭くしていった場合に、下にはみ出しちゃいますね。
その辺は、適宜、適当なサイズに修正してください。（85pxぐらいがいいかも）
Topic starter
2020-07-01 23:28
何度もご回答の方をしていただきありがとうございます。
理想の形にできました。
本当にありがとうございました。
リフィトリー reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。