サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年9月28日 03:34
わいひらさん
いつもお世話になっております。
別のトピックを書きこみ終わるころに気づいたのですが、ヘッダー、固定ヘッダー、フッターのロゴを画像に設定した際に、画像の下にaタグのスペースが出来ています。
これも、フォーラムで回答している時にちょっと気になっていたのですが、すっかり忘れていました。
ロゴ画像の img タグに vertical-align: middle; とか vertical-align: bottom; とか、どちらでも良いのですが、vertical-align の指定を当てておくと、ロゴ画像下の余分なスペースがなくなるような気がします。
特に固定ヘッダーのときは、上下のスペースが狭いので上下中央に配置しやすくなるような気がしました。
全てのブラウザや、さまざまなロゴ画像のサイズで検証した訳ではないので、間違っているかもしれません。
フッター下の隙間の件のときに一緒に書いておけばよかったです。すみません。
このトピックは5年前 5回からリフィトリーに変更されました
トピックスターター 2020年9月28日 03:55
でも、いきなり、vertical-align: middle; を指定すると、上下方向のデザインのバランスが狂っちゃった、という苦情があるかもしれない、と、いう心配も 無きにしも非ずではあります。
Ikumi reacted
2020年9月28日 20:07
ありがとうございます。
とりあえず修正しておきます。
https://github.com/yhira/cocoon/commit/ba805bec8a41dcca37875c4c110051f554c8291b#diff-da232d78aa810382f2dcdceae308ff8eR697
でも、いきなり、vertical-align: middle; を指定すると、上下方向のデザインのバランスが狂っちゃった、という苦情があるかもしれない、と、いう心配も 無きにしも非ずではあります。
個人的には大丈夫のように思います。
ただ、もし不具合がある場合は速やかに元に戻すだけです(笑)
コミットを判断したのも僕なので、もし問題があったとしても僕の責任です。
いずれにせよ、大きな不具合となるような修正ではないので、大丈夫だと思います ?
Ikumi reacted
トピックスターター 2020年9月28日 20:35
@yhira さん
個人的には大丈夫のように思います。
ただ、もし不具合がある場合は速やかに元に戻すだけです(笑)
コミットを判断したのも僕なので、もし問題があったとしても僕の責任です。
いずれにせよ、大きな不具合となるような修正ではないので、大丈夫だと思います ?
そのように、おっしゃっていただくと、気持ちが軽くなります。
ヘッダーやフッターの画像の場合は、あまり気づかれないこととは思っていましたが、固定ヘッダーで、ロゴが上下中央に配置されないという お問い合わせは、幾度か あったような気がします。
それが、解消されれば幸いなのですが・・
この投稿は5年前ずつリフィトリーに変更されました
2020年9月30日 19:02
※ヘッダーロゴ画像と、フッターロゴ画像は今回は触れなかったんですね。 ? その方が無難ですよね。
フッターロゴ画像はどんな状態になってます？
トピックスターター 2020年9月30日 19:31
@yhira さん
フッターに何もコンテンツを入れない状態で、ちょうど上下幅の中央ぐらいになっています。(でも、これは、画像の高さによって変わるのでしょうか？)
img タグの下方向に意図せずできてしまうマージン？は Firefox のデベロッパーツールで見てみると、10.7pxのようです。
これに先日フッターに８pxの paddingを設定していただいたので、画面下端からの距離は、
8px + 10.6px ＝ 18.6px
になっているようです。
ですので、この フッターロゴの img タグに vertical-align: middle; を指定した場合は、ウィンドウ下端からは、8px となり、下に寄ったような表示になるかと思います。
この投稿は5年前 3回ずつリフィトリーに変更されました
トピックスターター 2020年9月30日 20:48
img タグの下方向に意図せずできてしまうマージン？は Firefox のデベロッパーツールで見てみると、10.7pxのようです。
これに先日フッターに８pxの paddingを設定していただいたので、画面下端からの距離は、
8px + 10.6px ＝ 18.6px
になっているようです。
誤記、訂正します。 ?
8px + 10.7px ＝18.7px
2020年10月1日 18:54
こちらのmax-widthはなくしちゃってもいいのかもしれませんね。
2020年10月1日 18:55
こうやって見るとvertical-alignは、デフォルトの方が好みかも。
2020年10月1日 19:08
heightが50pxで指定してあるのに、max-widthが指定してあるのはいずれにせよ問題かもしれません。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。