サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
23/08/2019 12:23 pm
[C] Facebookボックスのスタイルを変更していて気づいたんですが、メディアクエリmax-width: 834px内の以下スタイルは不要なので削除しても良い気がします。
.fb-like-box {
max-width: 640px;
display: block;
}
https://github.com/yhira/cocoon/blob/master/style.css#L9210
- 上記max-widthがいらない理由
すぐ下のスタイルで上書きされているので640px・none、どちらか1つは不要だからです。
.fb-like-box {
max-width: none;
}
わいひら reacted
Topic starter
23/08/2019 12:24 pm
- display: block;が不要な理由
現状はあってもなくても問題ありません。でも装飾する際、769px～839pxの間だけ、装飾がおかしくなるから不要だと思って。
https://gyazo.com/7614a749bf7b6d30758e4275b1268120
上画像は変。
下画像はdisplayの値がflexでちょっと見栄えが違って、良いかも。
https://gyazo.com/7fa4a7b99d70d5e4a0977018edb2451b
デフォルトの状態でチェックしても、なに一つ変化がないのでCSSダイエットにも良いかなと思った感じです。
Topic starter
23/08/2019 12:26 pm
ちなみに、上のほうでdisplay: flex;の指定もキチンとあります。
.fb-like-box {
background-color: #444;
color: #fff;
display: flex;
flex-wrap: nowrap;
}
https://github.com/yhira/cocoon/blob/master/style.css#L6324
*****
デフォルト状態では、WindowsPCのIE・Chromeでしか確認してませんけど、display: block;の上書きは削除しても問題ないようです。
https://gyazo.com/705b05c27b51852512a29b5bcfaa3f9a
***
scss
https://github.com/yhira/cocoon/blob/master/scss/breakpoints/_max-width-834.scss#L180
https://github.com/yhira/cocoon/blob/41d44c1a60ce12303fd679d55abe25a022d3ffd1/scss/_defins.scss#L261
おまけ
https://github.com/yhira/cocoon/search?q=fb-like-box&unscoped_q=fb-like-box
*****
関係ないですが
[C] Facebookボックスのmargin-bottomの指定はないので、次の要素とピッタリくっつくかも。
https://gyazo.com/1840a3f47ce1324ebe9eda4199af20c7
- 『余白用』と右端にかいているのは、HTMLウィジェットで文字列を入れただけ。
- その下には広告ウィジェットで広告ラベルありにした状態です。
強い要望ではなく、CSSのダイエット感覚だけで。ちょっとした報告だと思ってください。
23/08/2019 10:21 pm
SCSSの方のソースコードを見てみると、fb_like_boxでincludeされるものを上書きするためにそのようにしていたようです（@mixinを変更するのが億劫だった）。
ただ、@mixinに引数を割り当てることで、出力しないようにもできるので変更しておきました。
https://github.com/yhira/cocoon/commit/19e2a9a9e160c94af6d353a4c0a9067d1a32755a
display: block;は必要なような気がします。
これがないと、画像と文字の部分が縦並びにならないからです。
Topic starter
24/08/2019 5:49 pm
個人的に不要だと思うところをチェックしてみました。
縦長の大きなアイキャッチ・小さなアイキャッチ・noimageとかでチェックしてデザインが現状と変わらないのを（時間的に）所々でチェックしました。漏れがあったらスミマセン。
CSSしかチェックしてませんけど、現状Version: 1.9.3.4親テーマstyle.cssの6331～6380行目
https://github.com/yhira/cocoon/blob/master/style.css#L6331
ダイエットできそうで、もしかしたらいらないかも。って思う所をコメントしてます。※scss的にものすごくややこしくて面倒！って感じもあるかと思いますけど。
/*
.fb-like-box .fb-like-thumb > *,
.fb-like-box .fb-like-content > * {
min-width: 100%;
}
*/
.fb-like-box img {
/* display: block; */
width: 100%;
height: 100%;
}
.fb-like-box .fb_reset {
display: none;
}
.fb-like-thumb {
/* max-width: 56%; */
}
.fb-like-content {
display: flex;
flex-direction: column;
justify-content: center;
/* align-items: center; */
/* align-content: space-around; */
text-align: center;
}
.fb-like-content > div {
padding-top: 8px;
}
.fb-like-message {
color: #eee;
font-size: 0.9em;
}
.fb-like-sub-message {
color: #ccc;
font-size: 0.7em;
margin-bottom: 8px;
}
.fb-like-buttons {
padding: 0;
text-align: center;
}
.fb-like-buttons > div {
margin: 8px;
display: flex;
/* align-items: center; */
justify-content: center;
}
@media screen and (max-width: 834px)のくだり、9210行目
https://github.com/yhira/cocoon/blob/master/style.css#L9210
/*
.fb-like-box {
max-width: none;
display: block;
}
.fb-like-box > div,
.fb-like-box > figure {
width: 100%;
max-width: none;
}
*/
見た目
https://bibabosi-rizumu.com/cocoon-header-logo-each-page/#toc9
noimageアイキャッチの見た目
https://bibabosi-rizumu.com/siteguard-captcha-none/#toc6
- HTML・CSSの圧縮を切ってます。
- 親テーマにコメントを入れたものを一時的に導入。（次FTPで親テーマをアップロードするまで）
～～追記～～
- 子テーマでの[C] Facebookボックスの装飾は一旦、無効化済み
- FBボックスの場所は記事下。
広告
FBボックス ←ここ
SNSシェアボタン
This post was modified 5年前 2回 by かうたっく
Topic starter
24/08/2019 7:10 pm
わすれもの。
追記するコードを忘れてました！
@media screen and (max-width: 834px) {
.fb-like-box {
flex-direction: column;
}
}
現状私のページでは親テーマの一番下に追記して書いてます。
これがないとダメじゃん！的な＾＾；
わいひら reacted
Topic starter
24/08/2019 8:48 pm
https://github.com/yhira/cocoon/commit/77f89112c3b4209a745e63de378212326a00e208
とりあえずですが。ご確認いただいた作業。それ自体。
ありがとうございました！ ?
ご足労かけたような感じもしながら、需要面も考えてしまった節も、チェックしながら個人的にあったけど。よかったかも知れません？
いつも色んな対応されているのでお疲れ様です！ってほとんどの人がミンナ思ってると思います！
※分かってもらっているか不明ですが。ディスってません。初めてカスタマイズするときとかよくあるので、それをチェックしてくれる人が居れば。って思うけどいない。
またそんなマニアックな事を誰もしない。って言う面もあってのことです。うまく言えませんが。
プチダイエットが出来ていて、少しだけでもダイエットができてれば、それでいいかな。って思います。コチラのタイミングで、イラン事言って申し訳ないです＾＾；
This post was modified 5年前 by かうたっく
わいひら reacted
Topic starter
26/08/2019 1:04 am
全然、ディスってるなんて思ってませんよ笑
良かったです（笑
実際ディスる要素が全くないですし＾＾
そう思えば、他の機能でもダイエットするところはまだまだありそうですね ?
設定が多いのでスリムになり切れるか分からないですけど、また機会があれば！そしてダイエットの気力が出た頃、またチェックしてみますね❦
AMPが無けりゃ・・・ ですねっ? ?
対応お疲れさまでした！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。