補足説明の拡張クラスのスマホ表示について

メディアクエリで、スマホサイズの時、

.information::before {
    content: '\f05a';
}

.question::before {
    content: '\f059';
}

を表示するようにしたらイケると思います。サイズ調整やら必要でしょうけれども。

Hidekichi さん

ご返信有り難うございます！しかし当方の知識不足で頂いたコードをどこに貼れば良いのかわかりません……

デフォルトで@media screen and (min-width: 440px)となっているからそれ以下のサイズのスマホだと表示されなくなるという認識で大丈夫でしょうか？

こちらでいろいろ調べたのですが、Simplicityの場合responsive.cssに書き込めばメディアクエリなしでもよいとの事だったのですが……

サンプル: 440pxまでの場合にwebフォント表示(アニメ付き) | codepen

こんなんどうでしょうか？

> Simplicityの場合responsive.cssに書き込めば
> メディアクエリなしでもよいとの事だったのですが……

管理ができるのであればそれでも良いですが、僕個人の感想で言うと、カスタマイズは子テーマstyle.cssにまとめるほうが管理がしやすいのではないかと思います。単純に僕があのファイルも開いて、このファイルも開いてが面倒なだけだったりもすると思うんですけれども。
Simplicity2系は、子テーマでそれができるようになっています。1系でもできるにはできますが、カスタマイザー等が悪さをしていた場合があったので。

::beforeにbeatアニメーション追加してみました(笑)

ちなみに、マークアイコンが出る部分をY軸のセンターにしました。つまり高さの半分です。
もし仮に、説明が3行あったとすると、2行目あたりがマークアイコンのセンターになります。
デフォルトのようにトップを絶対値(px)で指定すれば固定されます。

サンプルのcss欄はscssで書いてありますので、view compiledボタンでscssをcssに変更してから子テーマstyle.cssに追記コピペして下さい。

Hidekichi さん

また早速のご返信有り難うございます！

何も知らない身からすれば未知すぎて何が書かれているのかよく分からないのですが、お教え頂いた通りstyle.cssに貼っつけた所きちんと表示されました！

Y軸のセンターになるようアレンジまでして頂いてありがとうございます！こちらの方が好みなのでこのままで使わせて頂きます！

いつも分からない事があるとこちらのフォーラムでわいひらさんとHidekichiさんのアドバイス見ながら、ほとんど理解出来ていないながらもいろいろと試しながら本当に助けられております。

これからもお世話になります、今回は本当にありがとうございました！

サンプルもちょっと書き変えました。

暇つぶしにちょっとだけ説明しますと、

.information,
.question {
  /*デフォルトのスタイル*/
  &::before {
    /*デフォルトのbefore擬似要素のスタイル*/
  }

  @media screen and (max-width:440px){
    /*デバイスの幅が440pxのスタイル*/
    /*この書き方だとデフォルトのスタイルが440pxの時となります*/

    &::before {
      /*デフォルトのbefore擬似要素が440pxの時のスタイル*/
    }
  }
  .information::before {
    content: ユニコード;
  }
  .question::before {
    content: ユニコード;
  }
}

@keyframes その名前 {
  /*アニメーションの設定*/
}

こんな感じになってます。

padding: 20px;
padding-left: 72px;

これは一旦上下左右のパディングを20pxで設定して、その後左のパディングだけ72pxで上書きします。

本来、position:absoluteした要素でtop: 50%で設定すると、要素の上辺がposition:relativeの50%に移動します。つまり、外のグレー部分がposition:relativeで本来の並びで、中のアイコンがposition:absoluteの要素です。
position: absoluteは、親要素のposition:relativeの中でその位置が決まります。top:0、left:0の場合、アイコンはグレー部分の左上角に揃うと言う具合です。
先程も書いたように要素の上辺が、親要素の50%に揃うので、移動させた要素の半分をマイナスに動かさないと親の50%の所に、子要素の50%を持ってこれません。
それを行うのが、transform: translateY(-50%);です。

デフォルトでは、line-heightが設定されてましたが、170%はちょっと大きすぎかなぁとひとまず初期化しました。ここは便宜手直しして下さい。
Simplicityでは、line-heightが設定してある所はたいてい%で指定してあります。これはこれで良いのですが、なるべく問題を出さないように、line-height: 100%なら 1 と指定したほうが良さげです。
参考: line-height の値には単位なしが良いとされる理由 | lucky bag

サイズを変えた時にぬるっと変わるのは、transition: .3s ease;がやってます。

色々と書いた事があるのでどこが見られたことがあるかも知れませんが、cssは後から書いたものがスタイルを上書きします。よって、@media screen …の部分は、それまでにスタイルされている要素をそれぞれその画面サイズになった時に上書きします。

つまり、画面幅が440pxまでの端末は、
padding: 20px;
padding-left: 72px;
paffing: 10px;
padding-left: 50px;
このようにして上書きするわけです。その時に、transitionが効きますからぬるっとサイズが変わるという仕組みです。

画面幅が440pxまでの端末で::beforeの部分も同様に、それまでのスタイルを上書きしますから、サイズが変わるわけです。

最初の質問で、スマホの時にアイコンが表示されないというのがありますが、おそらくdisplay:noneで消してあるのではなかろうかと思います。更新されたcssやらを見てないので定かではないですけれども。
なので今回は、display:blockを入れることでスマホサイズの時に表示するようにしてみました。

アイコン部分がビート(心臓が刻む感じ)のアニメーションをしていますが、これが不要な場合、

/*animation: beat 1.0s ease-out infinite normal;*/
transform: translateY(-50%);

このようにすることでアニメーションを止め、要素のY軸センターを維持できます。

返信が遅くなってしまいました申し訳ありません。

Hidekichi さん

ここまで解説して頂ければ少しカスタマイズしたいと思った時に一人でなんとかなりそうです(*´∀｀*)
解説して頂いてありがとうございます！

わいひら さん

ご説明ありがとうございます、やはり表示されないのは仕様だったのですね、不具合報告に立ててしまって申し訳ございません……
お教え頂いた方法でも確認出来ました、ありがとうございます！

> スマホでアイコンが表示されていないのは仕様です。
やはり。
で、それを僕が無理やり表示してみた感じです(笑)

ついでにサンプルに.info_exという拡張の拡張を追加してみました(笑)