現在「みるらいと」スキンを適用中です。

ロゴ画像下のスペースにつきまして | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
ロゴ画像下のスペースにつきまして
 
共有:
通知
すべてクリア

ロゴ画像下のスペースにつきまして  


リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月28日 03:34  

わいひらさん

いつもお世話になっております。

 

別のトピックを書きこみ終わるころに気づいたのですが、ヘッダー、固定ヘッダー、フッターのロゴを画像に設定した際に、画像の下にaタグのスペースが出来ています。

 

これも、フォーラムで回答している時にちょっと気になっていたのですが、すっかり忘れていました。

 

ロゴ画像の img タグに vertical-align: middle; とか vertical-align: bottom; とか、どちらでも良いのですが、vertical-align の指定を当てておくと、ロゴ画像下の余分なスペースがなくなるような気がします。

 

特に固定ヘッダーのときは、上下のスペースが狭いので上下中央に配置しやすくなるような気がしました。

 

全てのブラウザや、さまざまなロゴ画像のサイズで検証した訳ではないので、間違っているかもしれません。

 

フッター下の隙間の件のときに一緒に書いておけばよかったです。すみません。

 

This topic was modified 4週間前 5回 by リフィトリー

引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月28日 03:44  

vertical-align: middle; をあてると、以下のようになりました。(ヘッダー固定のとき)

 

This post was modified 4週間前 by リフィトリー

わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月28日 03:55  

でも、いきなり、vertical-align: middle; を指定すると、上下方向のデザインのバランスが狂っちゃった、という苦情があるかもしれない、と、いう心配も 無きにしも非ずではあります。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11016
わいひら - Facebookわいひら - Twitter
2020年9月28日 20:07  

ありがとうございます。
とりあえず修正しておきます。
https://github.com/yhira/cocoon/commit/ba805bec8a41dcca37875c4c110051f554c8291b#diff-da232d78aa810382f2dcdceae308ff8eR697

でも、いきなり、vertical-align: middle; を指定すると、上下方向のデザインのバランスが狂っちゃった、という苦情があるかもしれない、と、いう心配も 無きにしも非ずではあります。

個人的には大丈夫のように思います。
ただ、もし不具合がある場合は速やかに元に戻すだけです(笑)
コミットを判断したのも僕なので、もし問題があったとしても僕の責任です。
いずれにせよ、大きな不具合となるような修正ではないので、大丈夫だと思います 🙂 


返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月28日 20:35  

@yhira さん

投稿者:: @yhira

個人的には大丈夫のように思います。
ただ、もし不具合がある場合は速やかに元に戻すだけです(笑)
コミットを判断したのも僕なので、もし問題があったとしても僕の責任です。
いずれにせよ、大きな不具合となるような修正ではないので、大丈夫だと思います 🙂

そのように、おっしゃっていただくと、気持ちが軽くなります。

 

ヘッダーやフッターの画像の場合は、あまり気づかれないこととは思っていましたが、固定ヘッダーで、ロゴが上下中央に配置されないという お問い合わせは、幾度か あったような気がします。

 

それが、解消されれば幸いなのですが・・

This post was modified 4週間前 by リフィトリー

わいひらYamachan11 件のいいね!
返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月29日 20:29  

@yhira さん

一応、GitHubから、新しいファイルをダウンロードしてローカルのテストサイトで表示してみました。

 

ヘッダー固定のとき、ロゴ画像が上方寄りにならず、上下中央に配置に配置されるようになりました。

 

※ヘッダーロゴ画像と、フッターロゴ画像は今回は触れなかったんですね。 😓 その方が無難ですよね。

 

修正ありがとうございました。

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11016
わいひら - Facebookわいひら - Twitter
2020年9月30日 19:02  
投稿者:: @leafytree

※ヘッダーロゴ画像と、フッターロゴ画像は今回は触れなかったんですね。 😓 その方が無難ですよね。

フッターロゴ画像はどんな状態になってます?


返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月30日 19:31  

@yhira さん

フッターに何もコンテンツを入れない状態で、ちょうど上下幅の中央ぐらいになっています。(でも、これは、画像の高さによって変わるのでしょうか?)

 

img タグの下方向に意図せずできてしまうマージン?は Firefox のデベロッパーツールで見てみると、10.7pxのようです。

 

これに先日フッターに8pxの paddingを設定していただいたので、画面下端からの距離は、

8px + 10.6px = 18.6px

になっているようです。

 

ですので、この フッターロゴの img タグに vertical-align: middle; を指定した場合は、ウィンドウ下端からは、8px となり、下に寄ったような表示になるかと思います。

 

This post was modified 4週間前 3回 by リフィトリー

返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月30日 19:37  

@yhira さん

フッターロゴ画像の高さは50pxの指定があったんですね。すみません。


返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月30日 19:53  

@yhira さん

フッターの padding を可視化しないとわかりずらいでので、再アップします。

 

gが抜けてますが・・ 😥 

 

This post was modified 4週間前 2回 by リフィトリー

返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月30日 20:11  

@yhira さん

テスト用の画像が 313×76px と横に長いので、高さ50pxで、横幅 max 120px だと横方向につぶれてしまうんですね。

 

どのような仕様に落とし込むのか、テーマの開発は難しいのですね。 

This post was modified 4週間前 by リフィトリー

返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年9月30日 20:48  
投稿者:: @leafytree

img タグの下方向に意図せずできてしまうマージン?は Firefox のデベロッパーツールで見てみると、10.7pxのようです。

 

これに先日フッターに8pxの paddingを設定していただいたので、画面下端からの距離は、

8px + 10.6px = 18.6px

になっているようです。

誤記、訂正します。 😓 

8px + 10.7px =18.7px

 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11016
わいひら - Facebookわいひら - Twitter
2020年10月1日 18:54  

こちらのmax-widthはなくしちゃってもいいのかもしれませんね。


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11016
わいひら - Facebookわいひら - Twitter
2020年10月1日 18:55  

こうやって見るとvertical-alignは、デフォルトの方が好みかも。

This post was modified 3週間前 2回 by わいひら

返信引用
リフィトリー
(@leafytree)
Noble Member
結合: 2年前
投稿: 2491
2020年10月1日 18:59  

@yhira さん

なにしろ、画像のサイズを 1種類しか試していないので、ちょっと私はなんとも、わからない部分があります。 😥 


返信引用
わいひら
(@yhira)
メンバーサイト Admin
結合: 3年前
投稿: 11016
わいひら - Facebookわいひら - Twitter
2020年10月1日 19:08  

heightが50pxで指定してあるのに、max-widthが指定してあるのはいずれにせよ問題かもしれません。


返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2020/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:4年

Cocoon
タイトルとURLをコピーしました