[sacchanmama]

【お使いの Snow Monkey のバージョン】15.18.0
【お使いの Snow Monkey Blocks のバージョン】13.7.3
【お使いの Snow Monkey Editor のバージョン】6.2.1
【お使いのブラウザ】Google Chrome
【当該サイトのURL】

### 発生している問題

スマートフォンでの文字サイズを小さくする方法がわかりません。
過去トピックを見て試してみましたが、初心者のためか文字サイズが変わらず困っています。

過去トピックに記載してありました追加CSSを行いましたが変わらず、少し詳しく説明して頂きたいです。

### 試したこと

追加CSSに下記を追加

@media (max-width: 639px) {
  .hoge {
    font-size: 1.2rem;
  }
}

変えたいブロックの高度な設定のCSSに

{
  .hoge {
    font-size: 1.2rem;
  }
}

を追加したのですがいまいち意味がわからず。

半角スペースで区切るという意味もいまいちわかっていないので、わかりやすく説明していただけたら・・と

お忙しい中申し訳ありません。

♥ 0

いいねをした人: 居ません

[Olein_jp]

特定の部分（何かのブロックの中だけ→例）この段落ブロックだけ）だけに有効にされたいのか、サイト全体で有効とされたいのかによって、若干書き方も変わってきますが、以下は「特定のブロック内だけに有効なCSSスタイル」という前提で流れをご紹介します。

1. スタイルを指定したいブロックを編集画面で選択し、右サイドバー下にある「高度な設定」の中の「CSSクラス」に任意のCSSクラス名を入力（＝ここでは my-style とします）
2. 管理画面内の外観→カスタマイズ に移動し、追加CSS というところにCSSスタイルを書きます
3. 書きながら右側のライブビューで、実際に有効になっているかを確認します

例えば、どこか段落ブロックに上記のように my-style というCSSクラス名を付けたとします。

そして、カスタマイズ→追加CSS で以下のようにCSSを設定します。

.my-style {
  color: red;
}

こうすることで文字の色が赤色になることが確認できれば、ちゃんとスタイルが有効になっているということになります。

この要領で、スマートフォンで表示した際のスタイルを書いていくことになるのですが、一言で「スマートフォン」と言っても画面幅の区切りをどこに設定するかにもよるのでアレですが、トピックに書かれているように画面幅の上限を指定してスタイルを指定すれば実現できるかと思います。

@media ( max-width: 376px ) {
  .my-style {
    font-size: 12px;
  }
}

この場合、画面幅が376px以下の場合にスタイルが有効となるはずです。お試しください。

♥ 2

いいねをした人:

[キタジマ タカシ]

カスタマイザーの追加 CSS、記事編集画面の高度な設定の追加 CSS クラスは Snow Monkey の機能ではなく WordPress の機能なので、Snow Monkey のマニュアルでは特に説明をしていません。また、この WordPress の機能も CSS の基礎に理解がある方向けなのかな？という印象を受けます（言葉の説明などがほぼ書いていないので…）。

ということで、基本的には↑でオレインさんが書かれているとおりにやれば反映はできると思いますが、CSS の基礎を理解したほうが、今後ご自身がやりたいことがでてきたときに応用でスムーズにやれる可能性が高くなると思うので、Google で「CSS 基礎」などと検索して目を通してみるのが良いのではないかと個人的には思います。

♥ 0

いいねをした人: 居ません

[sacchanmama]

オレイン様・キタジマ様回答ありがとうございます。

サイト全体を変更したいので、その場合はmysnowmonkyのスタイルCSSに書けば良いのでしょうか。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

スマホのみサイト全体の文字サイズを変更したいということですかね？

♥ 0

いいねをした人: 居ません

[sacchanmama]

そうです！パソコンではちょうど良い大きさ・もしくは少し小さいかな？と思うデフォルトサイズでも

スマホでは結構大きめに表示されてしまい

変な部分で改行というか行が変わってしまうので・・

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

そういうことであれば、ブロックの「追加 CSS クラス」は設定する必要はありません。全体のフォントサイズは html で定義されているので、

@media (max-width: 639px) {
  html {
    font-size: 14px;
  }
}

という感じで全体的に小さくできます。各場所はカスタマイザーの追加 CSS でも My Snow Monkey 内の CSS でも構いませんが、よくわからないのであればカスタマイザーに書いたほうが管理はしやすいと思います。

変な部分で改行というか行が変わってしまうので・・

これあるあるですが、小さくしても今後文章を変えたり、ページが増えたりすると、いずれどこかで改行位置が気に食わないポイントがでてくると思います。なので個人的には改行されてもそこまで違和感がないデザイン（というか文章組み？）にするほうが良いのではないかなと思ったりします。

♥ 0

いいねをした人: 居ません

[sacchanmama]

キタジマ様、お忙しい中ありがとうございます。

教えていただいた内容で無事変えることができました。

最近勉強し始めたところでわからないことも多くお恥ずかしいです。

ありがとうございました。

♥ 0

いいねをした人: 居ません

[キタジマ タカシ]

解決したとのこと、よかったです！ 解決済みの場合はトピックを閉じていただけると助かります。今回はこちらで閉じておきますね。

♥ 0

いいねをした人: 居ません

[投稿者]

投稿