サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年8月23日 12:23
[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
2019年8月23日 12:24
- display: block;が不要な理由
現状はあってもなくても問題ありません。でも装飾する際、769px～839pxの間だけ、装飾がおかしくなるから不要だと思って。
https://gyazo.com/7614a749bf7b6d30758e4275b1268120
上画像は変。
下画像はdisplayの値がflexでちょっと見栄えが違って、良いかも。
https://gyazo.com/7fa4a7b99d70d5e4a0977018edb2451b
デフォルトの状態でチェックしても、なに一つ変化がないのでCSSダイエットにも良いかなと思った感じです。
Topic starter
2019年8月23日 12:26
ちなみに、上のほうで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のダイエット感覚だけで。ちょっとした報告だと思ってください。
2019年8月23日 22:21
SCSSの方のソースコードを見てみると、fb_like_boxでincludeされるものを上書きするためにそのようにしていたようです（@mixinを変更するのが億劫だった）。
ただ、@mixinに引数を割り当てることで、出力しないようにもできるので変更しておきました。
https://github.com/yhira/cocoon/commit/19e2a9a9e160c94af6d353a4c0a9067d1a32755a
display: block;は必要なような気がします。
これがないと、画像と文字の部分が縦並びにならないからです。
Topic starter
2019年8月24日 09:28
なるほど。noimage画像あたりのページで確認してしまったようです？
画像付きで再度、確認させてください(｡>人<｡)
以前も確認を怠った事があり、モバイルヘッダーとフッターがposition:fiexdになってるのが原因だと思って微妙に気持ち悪さを感じたことがあるので。
Topic starter
2019年8月24日 17:49
個人的に不要だと思うところをチェックしてみました。
縦長の大きなアイキャッチ・小さなアイキャッチ・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
2019年8月24日 19:10
わすれもの。
追記するコードを忘れてました！
@media screen and (max-width: 834px) {
.fb-like-box {
flex-direction: column;
}
}
現状私のページでは親テーマの一番下に追記して書いてます。
これがないとダメじゃん！的な＾＾；
わいひら reacted
Topic starter
2019年8月24日 20:48
https://github.com/yhira/cocoon/commit/77f89112c3b4209a745e63de378212326a00e208
とりあえずですが。ご確認いただいた作業。それ自体。
ありがとうございました！ ?
ご足労かけたような感じもしながら、需要面も考えてしまった節も、チェックしながら個人的にあったけど。よかったかも知れません？
いつも色んな対応されているのでお疲れ様です！ってほとんどの人がミンナ思ってると思います！
※分かってもらっているか不明ですが。ディスってません。初めてカスタマイズするときとかよくあるので、それをチェックしてくれる人が居れば。って思うけどいない。
またそんなマニアックな事を誰もしない。って言う面もあってのことです。うまく言えませんが。
プチダイエットが出来ていて、少しだけでもダイエットができてれば、それでいいかな。って思います。コチラのタイミングで、イラン事言って申し訳ないです＾＾；
This post was modified 5年前 by かうたっく
わいひら reacted
2019年8月24日 23:00
全然、ディスってるなんて思ってませんよ笑
現段階でのCocoon開発では、とてもじゃないけどCSSダイエットのことを考える時間も余裕もないので、滅茶苦茶助かります。
機能を作ってスタイリングするとき、とりあえずいろいろ試すので、いろいろ試したCSSの残骸を消し忘れているのは、結構あると思います。
そう思えば、他の機能でもダイエットするところはまだまだありそうですね ?
それにしても、今回結構ダイエットできましたね。
Topic starter
2019年8月26日 01:04
全然、ディスってるなんて思ってませんよ笑
良かったです（笑
実際ディスる要素が全くないですし＾＾
そう思えば、他の機能でもダイエットするところはまだまだありそうですね ?
設定が多いのでスリムになり切れるか分からないですけど、また機会があれば！そしてダイエットの気力が出た頃、またチェックしてみますね❦
AMPが無けりゃ・・・ ですねっ? ?
対応お疲れさまでした！
わいひら reacted
2019年8月26日 19:43
AMPさえなければ、そこまで気を遣う必要もないんですけどね ?
もちろん、余計なコードが少なければ少ないほど良いのは間違いないんでしょうけど。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。