また、ちょっと違うんですけど、アピールエリアという機能もあります。

ヘッダー下アピールエリアの使い方

でもこれは、確かヘッダー下に１箇所しか使えないかもしれません。

ボタンは、消せるのかな？、これも私は、実際には、使ったことがないです。

あとは、自前でのカスタマイズになっちゃうかなぁ・・・

フォーラムに、何か良いアイデアをお持ちの方もいらっしゃるかもしれません。

なんかロゴが新しくなってる・・

でも、今のままでも、シンプルで、ステキです。

あら、神田ちゃん。

おすすめカードはウィジットから入れてますか？

見たところ、ウィジットの「コンテンツ上部」に入れているように見えます。その想定で回答しますね。

#要件

• タイトルロゴとメニュー（おすすめカード）の間に画像を入れる
• メニュー（おすすめカード）と記事一覧の間に画像を入れる

#実現方法（案）

ウィジットの「コンテンツ上部」にパーツを入れる。

• カスタムHTMLで画像を入れる
• 現在のおすすめカード
• カスタムHTMLで画像を入れる

#カスタムHTMLに入れるコード例

<img src="画像URL" alt="画像の説明">

#画像にリンクを入れる場合

<a href="リンク先URL"><img src="画像URL" alt="画像の説明"></a>

画像を添付しますが、おすすめカードの幅が1256pxでした。コンテンツ上部に画像を入れるとして、最大幅はおそらく同じくらいになると思います。

添付する画像：

• おすすめカードのコンテンツ幅.jpg

おすすめカードの入れ方がウィジットを使っていないなど異なる場合は、どのように現在表示しているか設定内容をコメントいただければ。

参考画像。

@leafytree

先日の投稿に引き続きありがとうございます！

希望のものとは違ったのですが、アピールエリアの設定方法知りたかったので助かりました。

@changbeer

チャンビアさん！なんとここでお見かけするなんて(^^)！

ありがとうございます！メニューの下に画像を入れてみました。

PCでは思っていた通りに表示されているのですが、モバイル表示だと結構小さくなってしまいます。

これはどうしようもないんでしょうか...？

@kang1118 さん

チャンビアさんのアドバイスが的を射ていると思います。

でも、白い背景色と新しいロゴがとても合っているので、シンプルなのも美しいなと、思ってしまいました。

あら、チャンビアさんのお知り合いでいらしたのですね。

ちょっと、適当に書いただけですので、調整が必要かとは思いますが、以下のようなCSSで１列にできそうな気がします。

@media screen and (max-width: 480px){
.recommended.rcs-card-margin a {
width: 85%;
}
}

チャンビアさんに、お尋ねになったのに、すみません。

もともと、前のトピックでも、モバイルは１列がご希望でしたね？

上記のだと、雑な書き方なので、

@media screen and (max-width: 480px){
.navi-entry-cards.widget-entry-cards.no-icon.card-large-image.large-thumb-on {
margin: 0 16px;
}
recommended.rcs-card-margin a {
width: 100%;
}
}

こっちの方が下の方のコンテンツの幅と合うのかもしれません。

ただ、実際に試した訳ではないです。

ちょっと、長ったらしいのと、ピリオド付け忘れたので・・

@media screen and (max-width: 480px){
.recommended {
    margin: 0 16px;
}
.recommended.rcs-card-margin a {
width: 100%;
}
}

訂正します。

投稿者:: @leafytree

チャンビアさんに、お尋ねになったのに、すみません。

いえいえ、コーディング遅いので助かります。

神田ちゃん、ということで...

@leafytree

ご丁寧にありがとうございます。

おすすめカード、縦表示になりました！

おすすめカードの文字が白抜きだと、細くて頼りないので・・

.recommended .navi-entry-card-title.widget-entry-card-title.card-title {
font-weight: bold;
letter-spacing: 0.1em;
}

ちょっと、太くして、文字間を広げてみました。

好き嫌いは、あるかもしれません。

文字の色の方を濃くしたときは、太すぎるので、適さないかもしれません。

わいひらさん

このトピックのリンクを前のトピックに貼ろうと思ったら、閉じていてできなかったので、貼っておいていただけますか？

以下が前のトピックです。

[解決済] グローバルメニューに画像を追加したい

@kang1118 さん

私も神田さんのサイトのスマホで縦１列にしたおすすめカードを表示して、タップしてみたのですが、カードをタップすると、Webサイトの最上部を表示してしまうんですよね。

つまり、どういう事かと言いますと、訪問者が、スマホで、おすすめカードをタップしても、リンク先のページに変遷したかどうかわかりづらい、という事です。

きっとわいひらさんも、そのあたりまで、考慮した上で、スマホでは、おすすめカードは、２列表示で、リリースしたのだろうと思われます。

加えて、コンテンツがふわっと動いて、定位置に収まる、アニメーション効果も付けてあるみたいなので、縦１列にしてはみたものの、おすすめカードのスマホでも縦１列表示は、おすすめできないかもしれません。

期待を持たせてしまい、申し訳ありません。

@leafytree

わざわざありがとうございます。

確かにカテゴリ先に移動した時に、移動したかどうかわかりづらいですね；；
今フロントページにのみ表示に変更しました。これでわかりやすくなった...ような。

フロントページはオススメカード、他のページはグローバルメニューが表示されればわかりやすいのかな、なんてワガママなことも考えたりしていますが....色々試行錯誤してみようと思います！

@kang1118 さん

私も、思慮が足りず、やはり、テーマの作者さんは、様々な事に配慮して、作っているのだな、と、あらためて、関心した次第です。 ?