全開「カテゴリー別にメニューを作りたい！」で
学習したナビカードの使い方
とりあえず体裁が整ってよかったよかったと
思っていたのですが、同サイトをスマホで見ると
どうしても気になることが、それは・・・
タイトル表示がでかすぎる！（見切れる）
まず見た目的にも画像に対してのフォントサイズが
大きすぎて見栄えが悪い、それよりなにより
文字が見切れている（スマホだと）
この現象を解消しようと、今日もひたすらググりました
今回の対象も・・・・「SHOP」ページです
「大きいサムネイルのナビカードのタイトルフォントサイズを小さくしたい」
①ナビカードの設定
前回使った技名が「ナビカード」なので、以降その呼び方で。
ナビカードを呼び出すショートコードが上
大きな画像にタイトルを被せて表示する設定が
「large_thumb_on」の部分です
②カスタムCSSに追加
この「large_thumb_on」に関して、
そのフォントサイズをいじくる魔法の合言葉が
.navi-entry-cards.large-thumb-on .card-title {
font-size: 0.8em;
}
です
作成時に参考にさせていただいたサイト様
Cocoonフォーラム内の質問スレッドページです
上記ページは「関連記事」の表示に関するフォントサイズの
変更でしたので、その他のサイトも参考に、ナビカード用に
アレンジしました
今回は、結果的にはちょっとした修正でしたが
道のりは長く、なかなかうまくいきませんでした
その分、希望が叶った時はひゃん！！と声が。
これからもちょっとずつカスタマイズしていきます。
