Cocoonフォーラム

こんな風に、上側のマージンを少なくしておくと、見出しとの距離が短くなり、見出しと説明文の連携を読み取り易くなります。 マイナスマージンでもいいのですが、応急用と考えた方が良いと思います。  3d03076e401a89107186be9d493e4a55.png

@feneck さん あとは、pタグのデフォルトのマージンの設定を上を少なく、下を多く設定しておく、と言う手もあります。 他のページを拝見しても、この方法も案外いいかもしれません。

@feneck さん pタグのデフォルトの上下のマージンの設定が大きすぎるのかもしれません。 高速化設定をOFFにして欲しいと書いたのは、そのためです。 でも、他のページを見ても、ｐタグのマージンを利用していらっしゃるみたいですね。 余計なお世話かもしれません。

@mirumi さん そうなんですね。 了解しました。 連休中の問い合わせが多く、下手な鉄砲も数撃ちゃ当たる的な・・

@mirumi さん ブログと同様にカタカナ表記に改めました。 当初は、こんなにフォーラムに書き込むつもりは、なかったので、ローマ字でいいや、と思ったのです。 このトピック、お任せしてもいいですか？ ※リニューアルしたサイト拝見しました。とてもいいですね！

@feneck さん 書き込まれた内容からURLは、見つけられましたが、高速化設定がなされているため、CSSの記述場所の詳細がわかりません。 フォーラム冒頭の案内にありますとおり、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けてください。 ...

@feneck さん class="check" を指定した ｐタグだけはないのですか？ 本文のｐタグ全て、という事でしょうか？ ちなみに、 p.check {margin: 0 0 60px;} は、試してみましたか？

@officeyuyu3 さん 斜め読みで、よく内容を理解していないのですが、CSSのコードを拝見すると、先頭のピリオドが抜けています。 このフォーラムを見ていただくと、わかるのですが、私もよくピリオドを忘れちゃうんですよね。 ? あとは、ちゅるさんのアドバイスを引き続...

このへんのことは、さっぱりわからないのですが、私のiphoneで、エントリーカードをタップすると、プレビューウィンドウが開くまでの一瞬だけ、エントリーカードに影が表示されるようです。 このあたりの事情には、全く通じていませんので、ただ、他の人の環境では、どうなの？的な書き込みにしかなって...

p.check {margin: 0 0 60px;} だけだと、イケませんか？

ちょっと、長ったらしいのと、ピリオド付け忘れたので・・ @media screen and (max-width: 480px){.recommended { margin: 0 16px;}.recommended.rcs-card-margin a {width: 100%;}} 訂...

上記のだと、雑な書き方なので、 @media screen and (max-width: 480px){.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {margin: 0 16px;}r...

ちょっと、適当に書いただけですので、調整が必要かとは思いますが、以下のようなCSSで１列にできそうな気がします。 @media screen and (max-width: 480px){.recommended.rcs-card-margin a {width: 85%;}} チャンビアさん...

@kang1118 さん チャンビアさんのアドバイスが的を射ていると思います。 でも、白い背景色と新しいロゴがとても合っているので、シンプルなのも美しいなと、思ってしまいました。 あら、チャンビアさんのお知り合いでいらしたのですね。

@hisamoto さん 今現在は、プラグインを全て停止している状態でしょうか？ 直接の原因ではない可能性が高いかとは、思いますが、Cocoonの親テーマのバージョンが「2.0.0.3」となっているようですので、ダッシュボードの「更新」のテーマの更新のところで、最新版にアップデートす...

@だい さん たぶん、子テーマにお書きになられた、以下のCSSのコードが原因ではないかと思います。 .logo-header{ display: none;} このコードを削除すればよろしいかと思います。

@yhira さん word-wrapプロパティの値は、やはり、 break-word normal の２つしかないんですね。 修正ありがとうございます。 新しいファイルで、アップデート後、横スクロールバーが表示されました。  97cb9f117...

また、ちょっと違うんですけど、アピールエリアという機能もあります。 ヘッダー下アピールエリアの使い方 でもこれは、確かヘッダー下に１箇所しか使えないかもしれません。 ボタンは、消せるのかな？、これも私は、実際には、使ったことがないです。 あとは、自前で...

@あおこ さん でも、やっぱり、サイドバーのプロフィールも、細長くなっちゃうし、やってはみたものの、ちょっと、微妙ですね。  587864ae94c99d6cfa6247d9f191898f.png

@あおこ さん ちょっと、コードに足りないところがあったようです。 私も、ローカルのテストサイトの親テーマの追加CSSに以下のコードを設定してみたところ、反映されるようです。 @media screen and (max-width: 1023px) {.content-in {disp...

@kang1118 さん あら、ステキ！

@alpaca さん 私は、大したスキルがある訳ではないので、HTMLの構成を見てみる、ぐらいしかできません。 WordPressは動的にHTMLを生成しているみたいなので、なぜ、<article>と<main>の閉じタグが本来の位置にないのか、そこまでは、わ...

本来の表示？  1626bbd8d8a3429a643c46a79d576001.png

ソースコードをコピーして、ローカルで試してみたら、サイドバーが正常に表示されました。 【HTML 1919行目付近】divタグの閉じタグ</div>をコメントアウト 【HTML 1995行目付近】</article>の閉じタグを挿入</main&...

@alpaca さん もしかしたら、HTMLのタグを、いくつか補えば、サイドバーは正常に戻るかもしれません。 でも、ソースコードを拝見すると、やはり、不要なタグ等で、かなり散らかった状態です。 alpaca さんが友人だとしたら、多少遠回りでも、きちんと整理した方がいいと...

ありました。 こちらです。 [Cocoon] ヘッダー画像サイズと選ぶポイント

@おすし さん そうですね。 その理解が大切なんだと思います。 確か、いくみさんのサイトが、とても参考になるはずです。 えーと、どこにリンクあったかな・・

ALPACA さん 申し訳ないですが、これ、ちょっとや、そっとじゃ、わかりまへん。 CSSの指定がどうのこうの、と言う以前に、HTMLの記述が、おかしくなってしまっています。 たぶん、各部の開始タグと閉じタグがちゃんとしていないんだと思います。 それに加えて、...

@おすし さん PCのブラウザの画面幅も広げたり、縮めたりしてみて、見え方が、どのように変わるのか、確認してください。

@おすし さん 良く考えて、デザインしないと、難しいですね。 ? でも、やり方は、理解できてきたみたいなので・・（言い訳（汗）） そうそう、いろいろ試して！！ 試せば、好きなデザインにできるかも！

@おすし さん ロゴ画像の背景は、白無地の半透明には作れませんか？ 画像加工ソフトか何かで・・ フライトアナウンスボードの画像がロゴの背景にも混ざってしまっています。 文字の背景は白無地で、半透明にしましょう。 あ、でも、そうすると、モバイルのときにヘッダーモバイルボタン...

@おすし さん おお、イケるじゃないですか。 PC用のロゴもちょっとデカすぎなので、たしか、Cocoon設定で、サイズ指定できたような気が・・ 「ヘッダー」タブの設定項目を見てください。

これは、PC用にきちんと設定できてから、考えれば良いかと思います。 何もかも、いっぺんにはできないです。

@おすし さん ちょっと、良く見ている時間がないのですが、このまえ、追記した、ヘッダー画像用のCSSをコメントアウトするか、削除するかしないと、ロゴ画像も大きくなってまうはずです。 どのCSSを追記したか、覚えていますか？ 前のトピックを参照してください。

グローバルメニューとは、少し違ってしまうかもしれませんが・・ おすすめカードウィジェットの使い方 でも、まだ私も使ったこと無いんですよね。 ?

@yhira さん 私の環境では、問題なく表示されます。

@yhira さん キャプチャ画像のページは以下のページです。 お手数をおかけします。 ソースコードをハイライト表示させる方法

あと、ホームのURLがhttpのままです。 最初のうちに、SSL化を済ませておいた方が良いかと思います。

@みやこ さん そうなんですね。 グローバルメニューは、既にあったので、不思議に思っていました。 環境情報を拝見しますと、まだ、子テーマをお使いになっていらっしゃらないようです。 子テーマをお使いになることを強くオススメします。 Cocoonテーマ...

@media screen and (max-width: 1023px) {.content-in {display: flex;}#main.main {display: block;margin: 0.5%;width: 67%;}div.sidebar {display: block;mar...

@みやこ さん この説明の意味が、いまひとつ、良くわかりません。 もしかしたら、以下のリンクにある、ヘッダー固定のことでしょうか？ ヘッダーを固定する方法※PCのみ 間違っていたら、すみません。

例えば、800pxぐらいににしてみるとか・・ iPhone/iPad/Apple Watch解像度(画面サイズ)早見表

@あおこ さん 適当に書いたCSSのコードですが、極端に間違ってはいないと思います。 834pxの方の数値を少しずつ少なくして試してみてください。（1023pxの方はそのまま変えずに。） 834pxでは、タブレットを縦に持ったときの横幅より大きいのかもしれません。

hisamoto さん プラグインについては、停止できれば、影響を無くせるので、いきなり削除しなくても、大丈夫です。 また、もし、削除してしまっても、再度インストールすれば良いので、心配は要らないです。 文面を拝見しますと、現在は、エラー表示は、出ていない様子なので、その...

ちなみに、「エアライン情報を発信」は、ロゴ画像には含めずに、Cocoon設定のキャッチフレーズのところに入力するようにすれば、このCocoonのサイトと同じ仕様になるのではないかと思います。 ロゴ画像のサイズは、Cocoonのサイトに近いサイズでいいのではないかと思いますが、ご自身で、い...

おすしさん 私、思ったのですが・・・ 前のトピックで、１枚の画像だけで、ヘッダー画像を上手く配置する方法のアドバイスをさせていただいたのですが、それだと、当然、モバイル表示のときは、中央の文字が小さくなっちゃう訳ですよ。 そこで、モバイルのときだけ、画像を取り替えたくなっ...

PHPか、JavaScriptじゃなきゃできないかと思ったのですが・・ 前述のリンクの記事のやり方でもできるのかな・・ @media screen and (max-width: 1023px) {.logo-menu-button img {display: none;}.logo-men...

みやこさん いただいた情報だけですと、ちょっと情報が少なすぎて、どのように回答してよいものやら、わかりません。 フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にして、環境情報を貼り付けてください。 あと、ダ...