サポート » 使い方全般 » スマホ 一行 文字数 幅

  • 解決済 aotani

    (@aotani)


    テーマの twenty seventeen を使っています。

    固定ページ 本文の 
    一行に入る 文字数と 文字の大きさと 幅を変更したいです。

    パソコンのほうはそのままでもいいのですが

    スマホの方だけ変更したいです。

     一行に入る文字数を多く
     文字を小さく
     文字が入る幅を広くしたいです。

    できれば 追加CSSでの変更を教えていただくと嬉しいです。

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • CG

    (@du-bist-der-lenz)

    メディアクエリで、ページ幅を狭くした時は、割合(90%、0.9)あるいはフォントサイズを指定します。文章幅も同様ですが、それでは文字幅の可変は出来ません。追加CSSでの変更は、以上です。

    あまりくわしくないので、詳細は他の方にお譲りしますが、
    その場合は。メディアクエリを記述すれば良いと思いますよ。

    @media(表示させたいスマホを意識したピクセル数){
    任意のクラス{
    プロパティ:プロパティ値

    }

    で、いけたりすると思います。

    以下、当方の好みの、スマホなりのタイトルの文字サイズになるよう記述したものです。
    ご参考までに。

    @media (max-width: 650px) {
    .site-title{
    	font-size: 23px
     }
    }
    • この返信は5年、 2ヶ月前にWP_manabuが編集しました。
    トピック投稿者 aotani

    (@aotani)

    CGさん
    いつもアドバイスありがとうございます。
    またまたの
    ど素人質問です。

    メディアクエリとは? なんでしょう

    ページ幅は広くしたいです。

    「割合(90%、0.9)あるいはフォントサイズを指定」とは
    どんなコードを追加したらいいのでしょう?

    ページ幅と文章幅と文字幅の 違いが分かりません

    トピック投稿者 aotani

    (@aotani)

    WP_manabu さん

    タイトル文字と本文は一緒ですか?

    あと、一行に入る文字数ももっと増やしたいので
    画面幅というのかな。文字が入る幅も広くしたいです

    CG

    (@du-bist-der-lenz)

    メディアクエリは、前回の「スマホ メニュー」で、gatolaboさんがしっかり説明され、ishitakaさんがスタイルを具体されてました。もう忘れましたか。
    https://ja.wordpress.org/support/topic/%e3%82%b9%e3%83%9e%e3%83%9b%e3%80%80%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc/#post-233645

    スマホで表示した時の、ページ幅(全幅)でしょうか、文章(コンテンツ)が表示される領域でしょうか。スマホでは、縦、横での表示も考慮しないと、利用者に不便ではないでしょうか。
    要領を得ないと、時間だけの浪費になりますよ。

    トピック投稿者 aotani

    (@aotani)

    これを
    メディアクエリって言うんですね。何かの略語ですか?

    ページ幅(全幅)は広くしないと
    文章(コンテンツ)が表示される領域も広くならないのでしょうか?

    「一行に入る文字数を多く
     文字を小さく
     文字が入る幅を広くしたいです」が希望なんで

    そうするためのコード(?)っていうのかな メディアクエリ(?)っていうのかな
    を教えてほしいです。

    CG

    (@du-bist-der-lenz)

    一行の幅を広げたいというが、文章を途中で改行してしまっているからでしょう。

    選択部分が、コンテンツ幅。その外が、コンテナ幅。余白はマージンで指定できる。

    文字幅はブラウザに依存します。

    CG

    (@du-bist-der-lenz)

    メディアクエリが、何かの略語かどうかは知りません。そこの「髪切りバサミ」とってと声かけますか、「シザーズ」とってと声かけますか。
    wp_manabuさんが示された、@media (max-width: 650px)は、その後の{からまでのスタイルを、表示幅を650pxになるまで適用するブレークポイントです。

    メディアクエリの定義については、ネットで検索したり、時間のあるときに図書館に行って、関連の書籍巻末の素引きを頼りに調べてみるのも、良いかも知れませんね〜

    ちなみに手元の本では、
    「webページを閲覧するデバイスの種類、幅や高さ、向き、ディスプレイの解像度などのデバイス特性に応じてコンテンツを切り替えるCSSの機能。」とあります。(「Webデザインの新しい教科書 改訂新版」)

    スマホでみた場合の本文を小さくしたいばあいは、
    外観 > カスタマイズ > 追加CSSに、以下を記述してみるといいかも知れません〜

    @media (max-width: 650px) {
    	body{
    	font-size: (任意の)px
     }
    }

    (任意の)に、お好みのピクセル数を記述する。
    ほかにも違う記述方法があると思います。いろいろ試してみると、おもしろかったするかもです。

    トピック投稿者 aotani

    (@aotani)

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

    @media (max-width: 650px) {
    body{
    font-size: (任意の)px
    }
    を追加して。
    なんとか4文字増やすことができました。

    4文字ですが、これがかなり助かります。

    よかったす〜。

    aotaniさんの元々のリクエストからは少しズレますが、1行に少しでも多くの文字を詰めるテクニック。
    日本語は等幅フォントとして表示されることが多いです。つまり「ほ」でも「っ」でも1文字の幅は同じだけ消費されます。英語などではプロポーショナルフォントであれば幅の広い文字狭い文字というのがあるのですが、日本語ではフォントがその機能を持っていても通常は使用されずに全て同じ幅です。
    なので、多くの日本語のウェブサイトでは文字間隔が必要以上に空きすぎて間延びして見えます。twenty seventeenを含めWordPressの標準テーマそのままだと特に間延びして感じられますね。

    そこで、字詰めです。使用する日本語フォントにプロポーショナルメトリクスの機能があれば幅の狭い文字は狭く表示されるので結果的に1行あたりに入る文字数が増えることになります。
    字詰めしたい要素に対して以下の1行。

    font-feature-settings: "palt";

    これだけだと詰まりすぎて窮屈に感じることがあるのでもう1行で僅かに字間を開く。

    letter-spacing: 0.05em;

    0.05emの部分はデザイン的に気にいる値に適当に調整して下さい。ちなみに全てのブラウザで使えるかは知りませんが、マイナス値を指定するとさらに詰まって文字を重ねるようなこともできます。(実用的ではないです)

    結構使いでがあると思うのですが、何故か知っている人も使っている人も多くないようです。

    CG

    (@du-bist-der-lenz)

    paltを使ったカーニングは、Mac環境や、iPadで役物で課題があったり、游ゴシックをインストールしている環境や、Windowsユーザーがメイリオを気に入っている傾向があって、過去に断念してました。2年経って、現在は進展したのかな。

    Appleのブラウザでは現在は利用できるようになったと聞いています。(端末を持っていないので伝聞です)
    游ゴシックでは意図通りに機能します。
    メイリオではpaltが効かないですが、未指定と同じ表示なので大きな問題は発生しないかと。

15件の返信を表示中 - 1 - 15件目 (全17件中)
  • トピック「スマホ 一行 文字数 幅」には新たに返信することはできません。