40代主婦がアフィリエイトで子供の学費と老後資金♡

BBAだよ!全員集合

作業記録

アフィンガーのテーブル横スクロールボックス機能を使うと画像が小さくなる!CSSを追加して無事解決

更新日:

アフィンガー大好きジャスミンですが、使いこなせない機能も多く今日もばばこメンに助けてもらいました。

できなかったのはテーブルの横スクロール機能。

なぜか横スクロールをすると貼り付けた画像がビビる位ちっちゃくなっちゃうというもの。

もし、同じ悩みを持っていらっしゃる方がいたらぜひ参考にしてくださいね。

 

↓SSL化がうまくできなかった時の記事はこちら

アフィンガーのテーマHappyDiaryがSSL化できない時は画像を確認!(坂口)

こんばんは。アフィンガーを愛する主婦アフィリエイター坂口ジャスミンです。 前回の記事で私は今回アフィンガーのHappyDiaryをテーマにすることにしたのですが、ふと見るとブラウザのアドレスバーに鍵マ ...

続きを見る

 

アフィンガーのテーブル横スクロールボックス機能を使うと画像が小さい...小さすぎる

ジャスミン
テーブルを使って表を作ろうとした私。あれ?あーーれ???

PCで見るとまぁギリ見えなくもないのですが

 

ランキング 名前 おすすめ品 おすすめ理由
芹沢ダージリン 安くて使いやすい
田中セイロン
安くて使いやすい
高木アールグレイ
案件が多い
坂口ジャスミン
安くて使いやすい
高橋アッサム
安くて使いやすい

スマホで見たら・・・

小さい!!!小さいすぎる!!!

そこで、私は考えました。

ジャスミン
アフィンガーって横スクロールできる超便利な機能あるじゃん☆

そして、table横スクロールボックスを押してみました。

じゃん!

全員
顔消えてんじゃん...

 

ばばこメンにヘルプ!CSS変更で無事解決

実際は↑ではなく、私のランキング表を皆さんに見せました。

実況どうぞ。

ジャスミン
アフィンガーのテーブルの横スクロール機能って使った事ある?
あれ使うとバナーが極小になるの何で?
アールグレイ
横スクロールめったに使わない〜。
えっあれ使うとバナーが小さくなるの?
ジャスミン
ビビる位小さいんだけど・・・

【画像添付!!】

アールグレイ
ちっっっっさ!!!! 見えないwww
ジャスミン
私が間違っているのかい?そうなのかい?
ダージリン
横幅をサイズ指定、バナーの横幅pxで設定かけたらどうだい
ジャスミン
<div class="scroll-box"></div>

これ入れるだけみたいなの

ダージリン
テーブルのソースはどうなってる?
ジャスミン
ソースーー??
ダージリン
うーん、いま出先でなんもできん、、、、
アッサム
呼んだ?
アッサム
@media only screen and (max-width: 599px){
.scroll-box img:not(.size-st_header_slider) {
max-width: 150px !important;
}
}

 

あっさりと解決☆すでにCSSいじってるので綺麗に見えるはずですが一応スマホ画面貼り付けますね♪

 

スクロールして・・・

良い感じ。

最近はインスタなど横スクロールで画像移動するのが普通になってきたのもあって、横スクロールも使えますよね☆

 

ジャスミン
これ、私が悪いんじゃないよね?(ステ子だよね)

ブログ書いたらステ子きてくれるかな?

アッサム
来てくれそう
ステ子のエゴサすごいから…
アッサム
最近違うテーマ使ってるんだけど、affingerも使ってこ…。かわいい。

Tidyとかmocaとか

 

Tidy

moca

 

全員
可愛い♪

 

横スクロールボックス無事解決!アフィンガーは可愛いよ☆

今日はテーブルの横スクロールボックスの画像が小さくなって焦った話しと解決法をご紹介しました。

私みたいに「あれ?画像小さーい!」って思っている方、他にもいるのでは・・・。え?いない?

外観⇒テーマの編集⇒スタイルシートに

@media only screen and (max-width: 599px){
.scroll-box img:not(.size-st_header_slider) {
max-width: 150px !important;
}
}

これを貼り付けるか、

カスタマイズ⇒追加CSS

に貼り付けてみてくださいね!

私もアフィンガー使ってみたい!と思う方はこちらからどうぞ♪

WordPressテーマ 「WING(AFFINGER5)」


車にMDチェンジャーがついていた世代です。2000年問題の時は社会人でした。

-作業記録

Copyright© BBAだよ!全員集合 , 2019 All Rights Reserved.