pickup
DIVERの入力補助【囲い枠】、スマホで上手く表示されない時の対処法

こんにちは、ミントです。

 

私のブログでもお世話になっているのが、テンプレートの『DIVER』です。

 

沢山ある機能の中で、入力補助は便利なんですよ~。

 

ミントがよく使う『囲い枠』は、こんなの⇓⇓⇓

DIVERの凄いところ
オシャレな外観にできる
SEO対策が万全
サポートが早い!
簡単に枠が挿入され、色んなタイプが選べるんです。
しばらく使っていて、ふと気づいた事がありました。
パソコンで表示されるのと、スマホで表示される画面が違っている時があるんです。
調べて解決した方法を、ここで共有したいと思います。

入力補助【囲い枠】の入力方法

 

まずは、上に挿入した囲い枠の入力方法を、説明しますね。

 

入力補助の中の『囲い枠』を選択します。

そうすると、下記の画面になります。

① タイトルにしたい文字列を入力(タイトルなしの場合は不要)

 

② 枠内に入力したい文字列を入力

③ 囲い枠タイプを選択→右にスクロールすると、他にも出てきます。

 

④色を選択。

 

⑤装飾オプションを入れるなら、チェックする。

 

⑥囲い枠を挿入するをクリックして完了。

 

そうやって入力したものが、こちら↓↓

 

*A 条件5つ全てクリアしている場合のみ適用
①週20時間以上
②月額賃金8.8万円以上(年収106万円以上)
③勤務期間は1年以上見込み
④学生は適用除外
⑤従業員501人以上の企業

 

これをスマホから、どう表示されているか確認すると・・・

 

 

タイトル部分が2段になっていて、①週20時間以上 という行が消えてしまっています(;’∀’)

 

対処法(DIVER)

 

何を、どう変更しても改善されなくて・・・。

 

私にはお手上げだったので、DIVERのサポートを通して質問してみました。

 

問い合わせメールから、何と2時間後。

 

DIVERの高木さんから、お返事と対処法を頂きました。

 

該当の囲い枠のレイアウトでは、タイトルを移動させて枠線の上に重ねているので、
改行されてしまう長いタイトルだとテキストに重なってしまいます。        (一部抜粋)

 

だそうです!

 

いとも簡単に解決してしまいました。

 

同時に、カスタムCSSのコードも教えて頂きました。

 

DIVERにはCSSコードを書き込む場所が、あらかじめ用意されてるので、

そこに記入すれば大丈夫なんです。

 

場所は、投稿を入力する画面の下部にあります。

 

 

カスタムCSSコード

—————————————————-
@media screen and (max-width: 378px){
.sc_frame_wrap.onframe .sc_frame_title {
    left: .5em;
    right: .5em;
    top: -3em;
}
}
—————————————————-

 

上記の点線内のコードを、カスタムCSS欄に貼り付けて頂ければOKです。

 

早速、修正してみました。

じゃーん、①の行が、きちんと表示されています!

 

まとめ

 

いかがでしたでしょうか。

 

もしDIVERをお使いで、同じようなスマホ表示になっていたら、試してみて下さいね。

 

やっぱりDIVERいいなって、再認識してしまいました。

 

最後まで読んで頂き、ありがとうございました。

 

今なら無料で使える素材集はこちら

ブログに使う素材に困ったら、チェックしてみてくださいね(☆)

 

 

Twitterでフォローしよう