Simplicity2.2.9に変更後、モバイル表示で記事タイトルの行間が無くなった

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも Simplicity2.2.9に変更後、モバイル表示で記事タイトルの行間が無くなった

  • このトピックには5件の返信、2人の参加者があり、最後にk-carrotにより10年前に更新されました。
5件の返信スレッドを表示中
  • 投稿者
    投稿
    • #45185
      k-carrot
      ゲスト

      いつもお世話になっております。

      Facebookのシェア数取得の仕様変更ということで、Simplicity2.2.0リリース以降初めて親テーマのバージョンアップを行いました。(2.2.9にバージョンアップしました)

      しかし、http://machicarrot.com/にて、バージョンアップ後モバイル表示で記事タイトル一覧のタイトルの行間が無くなり、文字が詰め過ぎて表示されるようになりました。ネットで調べてこちらhttp://nabi1080.com/blogging/wordpress/55798も参考にさせていただきましたが、改善しませんでした。

      他に改善策やヒントなどございましたら、ご伝授いただきたいです。

      よろしくお願いいたします。

    • #45199
      hidekichi
      ゲスト

      mobile.cssを使われているようなので、子テーマmobile.cssに、

      .entry h2 {
        line-height: 1.1;
      }
      
      .entry h2 a {
        line-height: inherit;
      }

      とでも書いておけば、次からは、.entry h2のline-heightをいじるだけで修正できるようになるかと思います。これでも変更できない場合はメディアクエリが機能しているからかと思うので、

      @media screen and (max-width: 30em) {
        .entry h2 {
          line-height: 1.1;
        }
      
        .entry h2 a {
          line-height: inherit;
        }
      }

      と子テーマmobile.cssなり、style.cssなりに書いておけば修正できるのではなかろうかと。

      意味的には、.entryの中のh2の行間(line-height)を1.1(110%)にする。.entryの中のh2の更に中にあるaタグは、その親のh2の行間設定を継承すると言う意味合いです。

      本来aタグにline-heightがなければ、その親であるh2に行間の設定をしておくだけで勝手に継承しますが、simplicityの場合、aタグに色々設定してある部分が多いので、いっそのこと親の行間に従うと言う設定にするわけです。

      h2の中のaなり他のタグに行間の設定が必要な場合は、classをつけて、そのclassに行間の設定をすればよいだろうと思います。

    • #45202
      k-carrot
      ゲスト

      非常にわかりやすい説明ありがとうございます。

      上で挙げていただいた2つの方法を試しましたが、ダメでした。
      line-heightの数値もいじってみましたが、これも改善できませんでした。

      引き続き調べてみようと思います。

    • #45205
      hidekichi
      ゲスト

      いや変わらないことは100%と言っていいぐらいないかと思います。

      前レスの方法で変わらないとすればキャッシュが問題だろうと思います。プライベートウィンドウかシークレットウィンドウでサイトを読み込んで、もしサーバーにキャッシュプラグインがあれば停止、サーバーの設定でこれらと同様に何かしらキャッシュする機能があればそれも停止で試してみてください。

      理由としては、mobile.cssはnarrow.css等よりも優先されて読み込まれており、またこれらはstyle.cssよりも優先されています。最終出力のcssを変えて変わらないと言うことはまず有り得ないわけで、サイトのページにアクセスした時に、キャッシュが効いて以前のcssが返されているなどの理由がない限り最終出力のcssを上書きするようなものはないかと思います。

      またk-carrotさんの子テーマstyle.css、mobile.cssを確認しましたが、前レスの内容が記載されている部分はありませんでした。
      記述がないので、正しく動作しているかどうかの確認もできませんが、もし消されたとすれば再度記述してください。

    • #45227
      アバター画像わいひら
      キーマスター

      動作を確認してみましたが、line-heightが100%では、ちょっと余白が狭すぎるような気がするので、次のバージョンでは削除しておこうと思います。
      なので次のバージョンから、約130%になると思います。

    • #45263
      k-carrot
      ゲスト

      hidekichi様

      申し訳ありません。スマホのブラウザのキャッシュを削除し、プラグインをオフにしたところ、改善しました。お騒がせいたしました。

      わいひさ様

      迅速な対応、ありがとうございます。

5件の返信スレッドを表示中
  • トピック「Simplicity2.2.9に変更後、モバイル表示で記事タイトルの行間が無くなった」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)