Cocoonフォーラム

@ぜき さん ヘッダーロゴ画像を隙間なくピッタリ収めるには、以下のコードを子テーマのCSSファイルか、追加CSSにコピペすればイケるかと思います。 追加CSSは、ダッシュボードの「外観」→「カスタマイズ」→「追加CSS」で開けるかと思います。 追加CSSの変更を確定するに...

ぜき さん ヘッダー画像の端から端までクリックできるようにするには、現在お使いの背景画像の方だけを、ロゴ画像の方に設定して、CSSのコードで、ヘッダーにちょうど収まるように調整します。 ただ、その場合は、１枚の画像しか使えず、現在お使いのロゴ画像の方が使えなくなってしまいます。 ...

前略、ぜき さん ①に関しましては、ちゃんと表示されているようです。 ただ、ロゴ画像が小さいので、重なっていて、目立たないのだと思います。 ②に関しましては、Cocoon設定で設定が可能です。 ただ、ヘッダー画像全体のどこをクリックしてもトップに戻るようにするには、独自のカス...

haukamu88 さん ボックスメニューは、基本的にメニューなので、カテゴリーへのリンクだけでなく、個別の記事にもリンクできるようです。  8ddfe660947cf7690982f33890b79a13.png

haukamu88 さん もう少し、高さや、色など、微調整が必要かもしれませんが、独自メニューウィジェットとしても使えそうな感じです。  e8c0070fe21104c16c967c2f1482061f.gif

前略、haukamu88 さん いただいたご説明だけですと、用途の詳細が掴めないのですが、添付画像を拝見しますと、タブというか、メニューの役割を担っているようにも見えてしまいます。（間違っていたらごめんなさい） と、いうことは、Cocoonの「ボックスメニュー」でも似たようなことがで...

トピックを検索されたときに、トピックのタイトルと関連がありそうなので、リンクを貼っておきます。 （ウィジェットを横並びにするコード等を含むので） 【教えてください】

@Toru A さん 通常なら、LINEでも表示されるはずなのですが、どうしてでしょうね？ まだ、LINEにキャッシュされていないのであれば、待っていれば表示されるかと思うのですが・・ ただ、以下のリンクの記事などを見てみると、縦長の画像は、あまり適していないのかもしれま...

@きりみ さん 以下のトピックにCSS関連の基礎を学ぶリンクがあります。 お時間のある時にでも、ご覧になってみてください。 【初心者向け】WordPressやCSS初心者向けの記事を紹介するトピック

@きりみ さん 子テーマのCSSのコードに余分な波括弧が残ってしまっています。 そのため、ヘッダーロゴ画像を上下中央に配置するためのコードが無効になってしまっています。 50行目にある、波括弧です。 d8ed498ac06ac49e94857dc6f...

匿名 さん コードだけですと、イメージが掴めないと思うので・・  2ec170f4b2192d95f45ca944c3189b72.gif

匿名 さん ５記事横並びのコードも書いてみました。 /*新着記事を5列横並びにする(スマホでは２列４記事)*/#new_entries-4 .new-entry-cards { display: flex; justify-content: space-around; flex-...

匿名 さん ちょうど今日、別のトピックで、新着記事ウィジェットで横に並べるCSSのコードを書いてみたところです。 /*新着記事を4列横並びにする*/#new_entries-4 .new-entry-cards { display: flex; justify-content:...

匿名 さん Cocoon設定の「投稿」タブの下の方に関連記事のデザインを設定する場所があるみたいです。  82ec112f19ba7b61754c87c079a8ac09.png

匿名 さん 私も使ったことがなかったのですが、記事下の関連記事のデザインもいくつかのパターンが選べるみたいです。 関連記事のデザイン変更を行う方法

匿名 さん ブログのどの位置に、どのようなものを表示したいのかは、実際のサイトでお示しいただくのが、一番わかりやすいです。  3b1534797f95d48d29b3710ea5689244.png

前略、匿名 さん Cocoonには「新着記事」ウィジェットや「人気記事」ウィジェット、「関連記事」など、いろいろなウィジェットが用意されています。 ですので、プラグインを使わなくても済むケースもあろうかと推測します。 どの場所に、どのようなものを表示なさりたいのかを、ご提...

@なんばさん ファイルマネージャーの不具合とは、タイミングが悪い？ですね。 以前私もFilezila は使ったことがあるのですが、最近は触っていないので、よくわからないです。 Windowsの方が選択肢は多いのかもしれません。 かと言って、今回のようなことや、...

@きりみ さん スマホでも３列のままにする場合は、以下の部分（先に記述した下の方です）は、削除してください。 @media screen and (max-width:480px) {/*画面幅が480px以下のとき１列にする*/ #popular_entries-4 .popular-...

なんばさん さん ファイルマネージャでもイケそうな気がします。 ログイン後に nanbasanblog.com→public_html→wp-content→themes→cocoon-child-master→style.css とたどって「style.cs...

なんばさん さん 私は使ったことがないのですが、FTPソフトを使ったことがない、という場合は、ファイルマネージャーでも編集ができるかもしれません。 ファイルマネージャ 先ほど貼り付けた、テンプレートヘッダーは、つい先ほど、このCocoonのサイトからダウンロードしたものからコピー...

前略、なんばさん さん 子テーマのスタイルシートのテンプレートヘッダーを消してしまったためではないかと推測します。 CSSのファイルの記述の一番上の方にあるもので、以下のようなものです。 @charset "UTF-8";/*!Theme Name: Cocoon ChildDe...

匿名 さん 人気記事ウィジェットじゃなくて、新着記事ウィジェットでしたね。 新着記事ウィジェットでも、表示数を４にして「大きなサムネイル」か「タイトルを重ねた大きなサムネイル」のどちらを選択すれば、以下のコードでイケそうな気がします。 /*新着記事を4列横並びにする*/#new_...

匿名 さん 人気記事ウィジェットの表示タイプを「大きなサムネイル」に設定してローカルのテストサイトで試してみました。 /*人気記事を4列横並びにする*/#popular_entries-3 .popular-entry-cards { display: flex; justify-c...

前略、匿名 さん カスタマイズに関するご質問のトピックは、「雑談」ではなく、「カスタマイズ相談」のカテゴリーの方に立ててくださると良いと思います。

前略、匿名 さん ちょうど昨日、新着記事３記事横並びのコードを書いたので、それをアレンジすれば使えるかもしれません。 ウィジェットの設置場所は異なりますが・・ ヘッダーを押すとホーム画面にジャンプさせたい セレクタの先頭の「#popular_entries-4」はウィ...

前略、まとめる親父 さん パソコンで操作しても同様でしょうか？ このフォーラムでも、Wordpress.com を使われていらっしゃる方は少ないような気がするので、情報が得にくいかもしれませんね。 スキンについて PC用とモバイルのトップページに出てくる広告を...

前略、hiro さん テーマ作者様から回答があろうかとは思いますが、バージョン2.2.4.5 ではGA4の検証は未だのような気がします。 Google Analytics　トラッキングID 私のサイトでは、UAから始まるIDを設置しています。 GA4とのIDと...

@きりみ さん 人気記事PC３列横並び、スマホ2列のコードも書いてみました。 /*人気記事を3列横並びにする（スマホでは２列）*/#popular_entries-4 .popular-entry-cards { display: flex; justify-content: spa...

mami1977 さん あと、以下の件は、その後、解決されていらっしゃいますか？ スマホヘッダーとスマホメニューに関して

前略、mami1977 さん ダッシュボードの「設定」→「一般」とたどると「一般設定」の画面が表示されるかと思います。 そこの「サイトタイトル」が空欄になっていたりしませんでしょうか？ もし空欄になっていたら、サイトタイトルを入力して、下の方にある「変更を保存」の...

Cocoonのヘッダーと言えば、Ikumi さんでしょうか。 オシャレなブログを作る際には、とても参考になりそうです。 [Cocoon] ヘッダー画像サイズと選ぶポイント [Cocoon] オシャレロゴ画像のサンプル祭り（8種のサイズ） [Cocoon] ヘ...

ピッタリ上下中央ではないかもしれませんが・・  83b0caad1789d782b42c2f16a1c67a8f.gif

@きりみ さん 人気記事ウィジェットなどを横並びにした場合は、画面幅の狭いスマホでの表示も同時に考えなくてはならないかと思います。 PCで横３列の場合は、奇数なので、スマホで２列に設定すると、ひとつ余ってしまうので、あまり体裁がよくありません。 なので、スマホ表示は１列に...

@きりみ さん なお、ヘッダーロゴ画像を上下中央に配置する、以下のコードは、合っていると思うので、一番下にでもコピペしていただければ、今度は有効になるのではないかと思います。 .site-logo-image.header-site-logo-image { vertical-align...

@きりみ さん あらためて、人気記事３列横並びのコードを書いてみました。 実際に試していないので、間違っているかもしれませんが、念のため、現状のコード全体をテキストエディターでテキストファイルでバックアップをしたうえで、子テーマの31行目から49行目を以下のコードに差し替えてみてくだ...

@きりみ さん 子テーマに記述されいらっしゃるコードに問題があり、ヘッダーを上下中央にする記述が無効になってしまっているようです。 人気記事の３列横並びのところが、スマホで上手く表示されないので、ご自身でコードを追記されたのだと思いますが、上手くいっていないようです。 &...

@きりみ さん スキンを変えたりした場合は、また ちょっとやり方を工夫しなくてはならないかもしれませんが、以下のCSSのコードで、ロゴ画像が およそヘッダーの上下中央に配置できるような気がします。 .site-logo-image.header-site-logo-image { ver...

@ann さん 「投稿本文下」でバナーのアフィリエイトタグが iframe タグなら、 <div style="text-align: center;"><iframe hoge hoge></iframe></div> で、中央に配置される...

Kii さん 例えば、インデックスリストトップのボックスメニューはアイコンを非表示にして文字だけにし、サイドバーのボックスメニューは、デフォルトの表示でアイコンを表示したままにする、といった場合には、ウィジェットに割り振られたIDをデベロッパーツールで調べて、CSSのコードのセレクタの先頭に付け...

前略、@きりみ さん 縞々の部分はスキンでデザインされたものです。 ちなみに、フッター部分にもあります。 スキンを「なし」にするか、momoon以外のスキンに変えれば、無くなるかと思います。  8b029d61a7a2db2c52e8f85ed55bceb1...

前略、Kii さん 試しにCSSのコードを書いてみました。 あまり、詳しく表示を確認していないので、不具合があるかもしれません。 .box-menu-icon { display: none;}.box-menu { display: flex; flex-direc...

@yasuianmo さん 子テーマについては、以下のトピックが参考になるかと思います。 [解決済] 親テーマと子テーマについてです。 子テーマについて、ご質問がありましたら、別にトピックを立てていただきますようお願いいたします。

@yasuianmo さん どうやら、原因は、ウィジェットに記述した広告のHTMLタグの不備だったみたいですね。

@yasuianmo さん モバイル用のテキストウィジェットか何かを投稿記事タイトル上のエリア辺りに入れてますよね？ それも、一旦、ウィジェットを外してみてはいかがでしょうか？ その近くに余分なHTMLタグがあるような気がします。 46699c720264f...

@yasuianmo さん おそらく、ご自身でカスタマイズされた部分のどこかに問題があるのだろうと推測されます。 アニメーション広告用に上の方にウィジェットを入れてらっしゃいますよね。 それらのウィジェットを一旦外してみるとか・・ ご自身でカスタマイズをした部...

@yasuianmo さん うまく表示されないページのHTMLタグの構成が崩れているようです。 あくまで推測ですが、HTMLの閉じタグなど、対になっていなければならないHTMLタグのどこかが欠けているのではないかという気がしてきました。 この記事とは別に、投稿ページでテス...

@yasuianmo さん サーバーのキャッシュを削除したことで、ソースコードが圧縮されない状態になったようです。 どうやら原因は「Autoptimize」ではなかったようです。

@yasuianmo さん あとは、プラグインを全て一旦停止してみる、というのも試してみてもいいかもしれません。 「Shortcodes Ultimate」は、アニメーションのプラグインのようですが、Webサイトの幅に影響を及ぼしそうな感じもするので、停止して表示を確認するというのも...