前略、ann さん

トップページをフロントタイプにしていても、ウィジェットは通常どおり使えるようなので、テストサイトで、「インデックスリストトップ」のエリアに「[C]ナビカード」ウィジェットを入れてみました。

「ナビカード」ウィジェットは、基本的に縦に並ぶように作られているようで、以下の画像のようになります。

これだと、スマホのときは良いけど、PCだと、なんだか見た目がイマイチのような気もします。

そこで、ナビカードウィジェットの表示タイプを「タイトルを重ねた大きなサムネイル」にしてみると、案の定、縦にならんでしまいます。

そこで、試しに以下のようなCSSを書いてみると、横２列に並びました。

.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
    Width: 48%;
}

@media screen and (max-width:480px) {
    .navi-entry-card-link.widget-entry-card-link.a-wrap {
        Width: 100%;
    }
}

デベロッパーツールでいじっただけなので、実際には試していません。

「インデックスリストトップ」に「ナビカード」ウィジェットを入れると、全てのページで表示されてしまうので、ナビカードウィジェットの表示設定で「チェック・入力したページで非表示」の機能を使って、表示させたくないページを指定するなどすれば、ご希望に近い表示になりそうな気もします。

いろいろ、方法は有りそうなので、ご自身でも模索、試してみてください。

他に、もっと良い方法もあるかもしれません。

また、「インデックスリストトップ」のエリアに「おすすめカード」ウィジェットを入れた場合は、以下の画像のようになります。

「おすすめカード」は、「余白を有効にする」にチェックを入れても、スマホ表示のときに左右がくっついてしまう、という問い合わせが、ちょうど別のトピックで挙がっているところです。（おそらく近々に？解決するでしょう）

この場合でも、表示させたくないページは、ウィジェットの表示設定で、非表示にすれば良いのではないかと思います。

「インデックスリストトップ」のエリアに「ナビカード」ウィジェットを入れた場合のCSSのコードを少し修正してみました。

「ナビカード」ウィジェットの「表示タイプ」を変更しても適用されるようにしてみたつもりなのですが、上手くいくかどうか・・

充分にテストした、とは言えないので、修正が要るかもしれません。（ナビカードのメニューは偶数の方が良いです）

/*ナビカードウィジェットメインカラム設置２列表示*/
.navi-entry-cards.widget-entry-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
    width: 48%;
}

@media screen and (max-width:480px) {
    .navi-entry-card-link.widget-entry-card-link.a-wrap {
        width: 100%;
    }
}

また、「ナビカード」ウィジェットにタイトルが付けられるようなので、中央寄せにして太字にし、下側のマージンを付けると・・

.widget-index-top-title.main-widget-label {
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

それっぽい表示にできそうです。

リフィトリー様、昨日から沢山調べて頂きありがとうございました！

ウィジェットは出来たのですが、教えて頂いたCSSが反映されず２列になりませんでした。ちなみに「－おすすめ記事－」だけを太文字にするCSSだけ入れてみても反映されませんでした。。。

子テーマに入れていますが、何か他に考えられるエラーはありますでしょうか？

お手数をお掛けしますが、ご教示頂ければ助かりますm(__)m

宜しくお願い致します。

@ann さん

子テーマのCSSを拝見しましたが、コードが見当たらないようです。

高速化設定がなされたままですと、状況が読めません。

Cocoonの高速化設定を無効にしてくださるようお願いいたします。

お返事ありがとうございます。

すみません、コードを消していました。

（それと設定→高速化タブが見つからず、無効に出来ていません）

@ann さん

投稿者:: @ann

（それと設定→高速化タブが見つからず、無効に出来ていません）

高速化設定はタブではなく左側のサイドバーにあると思います。

リフィトリー様、お手数をお掛けします。今しがた高速化を外しました。

宜しくお願い致します。

@ann さん

もう一度、コードを設定してみていただけますか？

最初に書いておられたコードと後に書かれたコード、両方とも入れてみましたが、反応なしです。

どこか修正箇所がありますでしょうか？

@ann さん

最初のコードを設定されていらっしゃるようです。

とりあず、以下に差し替えてみてください。

/*ナビカードウィジェットメインカラム設置２列表示*/
.navi-entry-cards.widget-entry-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
    width: 48%;
}

@media screen and (max-width:480px) {
    .navi-entry-card-link.widget-entry-card-link.a-wrap {
        width: 100%;
    }
}

/*ナビカードウィジェットのタイトルを中央に*/
.widget-index-top-title.main-widget-label {
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

@ann さん

子テーマのCSSのコードを拝見しますと、最初に書いたコードのままになっているようです。

コードを差し替えてみてください。

差し替えてみたのですが、どうも二列にならず・・・です。

色々お手数をお掛けしますm(__)m

@ann さん

今度は、コードは合っているようですので、余分なハイフンを削除してみてください。

子テーマのCSSの75行目と125行目にある点線状のハイフンです。

点々を消したら無事できました！

ちなみにスマホで見たときは一列なのですが、これを二列には出来ますでしょうか？

（すみません、色々と）

@ann さん

以下のコードに差し替えてみてください。

/*ナビカードウィジェットメインカラム設置２列表示*/
.navi-entry-cards.widget-entry-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.navi-entry-card-link.widget-entry-card-link.a-wrap {
    width: 48%;
}

@media screen and (max-width:356px) {
    .navi-entry-card-link.widget-entry-card-link.a-wrap {
        width: 100%;
    }
}

/*ナビカードウィジェットのタイトルを中央に*/
.widget-index-top-title.main-widget-label {
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

@ann さん

「ナビカード」ウィジェットのサムネイル画像が下の新着記事より、ややピンボケですが、これは、ちょっと私には原因がわからないです。

プラグインでサムネイルを再生成すれば、改善するのか、それとも「ナビカード」ウィジェットの仕様なのか・・

スマホも二列になりました。ですが先ほどまで効いていた

カード下の文字サイズの調整が出来なくなってしまいました。

下記が先程まで出来ていたコードです。

.entry-card-title {
font-size: 17px;
}

ほかに文字サイズを下のカード同様に合わせる事は出来ますでしょうか？

それと仰る通り、おすすめ記事のカードだけが、ぼやけてますよね。

これは前からなので、どうしようもなくて・・・。

わいひらさんにいずれお聞きしたほうがいいかもしれませんね。

@ann さん

.entry-card-title {
font-size: 17px;
}

上記のコードは、ちゃんと有効になっているようです。

ナビカードのタイトルのフォントサイズは、以下のように指定すれば、同じサイズになるかと思います。

.navi-entry-card-title.widget-entry-card-title.card-title {
    font-size: 17px;
}

分かりやすいように14pxにしてみたのですが、変わりなしです・・。

どこか変なのでしょうか？色々お手数をお掛けします。

@ann さん

CSSのコードに余計な文字、入っていてはいけない文字が入っているようです。

.navi-entry-card-title.widget-entry-card-title.card-title {
 Â  Â font-size: 14px;
}

HTMLやCSS、その他コンピューターを扱うための言語を書くときは、文字コードをUTF-8（BOMなし）で扱うことのできるテキストエディターをお使いになられることをオススメします。

私はよく、Mery というテキストエディターを使っているのですが、 Terapad や サクラエディター等でも良いかと思います。

これらのテキストエディターを適正な設定で使えば、不要な文字が入ってしまうことは、ほぼ無くなりますし、入っていれば、目に見えるので、その時点でわかります。

ありがとうございます。

ナビカードとエントリーナビカードを一つずつコードを書いたらどうにかトップページは文字サイズが整いました。

が、なぜか投稿ページのサイドバーにウィジェットで入れていた「おすすめ記事」のタイトルが縦書き＆二列になってしまいました。

どうやらおすすめ記事を二列にするコードが反映されてるみたいで。

とっても難しくて、何か案があればお聞きしたいです。

宜しくお願いします。

@ann さん

先ほど、別のトピックで、CSSのセレクタが他と被っていることに気づきました。

対応策を考えますので、お待ちください。

@leafytree sama

そうなんですね。色々とありがとうございます。

それと余談ですが、

先ほど下記のスマホ用コードを消してみたのですが、なぜかスマホでも二列になっていました。

反映しているなら、とくに記載しなくても良いですよね。

（さっきは以下のコードを書いていないとスマホは一列だったのですが、こんがらがってきました・・・）

@media screen and (max-width:356px) {
.navi-entry-card-link.widget-entry-card-link.a-wrap {
width: 100%;
}
}

@ann さん

以下のコードに差し替えてみて、不具合がないか確認してみてください。

/*ナビカードウィジェットメインカラム設置２列表示*/
#navi_entries-4 .navi-entry-cards.widget-entry-cards {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#navi_entries-4 .navi-entry-card-link.widget-entry-card-link.a-wrap {
    width: 48%;
}

@media screen and (max-width:356px) {
    #navi_entries-4 .navi-entry-card-link.widget-entry-card-link.a-wrap {
        width: 100%;
    }
}

/*ナビカードウィジェットのタイトルを中央に*/
#navi_entries-4 .widget-index-top-title.main-widget-label {
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

@ann さん

CSSのコードの以下の部分は、とても小さいサイズ（幅の狭い小さなスマホ）のために、1列になるようにしたものです。

@media screen and (max-width:356px) {
    #navi_entries-4 .navi-entry-card-link.widget-entry-card-link.a-wrap {
        width: 100%;
    }
}

旧 iphone SE など小さなスマホで2列だとカードもとても小さくなってしまうので・・

不要なら、記述しなくても大丈夫です。

サイドバーのナビカードもきちんと整いました。

固定ページを用いなくてもサイト型に出来ることで、この二列にする方法などのカスタマイズは、今後も皆さんの参考にもなると思います。

リフィトリー様、制作してくださるわいひら様、お礼申し上げます。

では解決にさせて頂きますね。

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

このカスタマイズのやり方にには、補足事項（注意事項）があります。

ann さんが別トピックを立ててくださいましたので、そちらのリンクを以下に貼っておきます。

[解決済] cssの#navi_entries-4について