モバイルでのタイトル行間

Simplicityの特徴 フォーラム Simplicityについての質問 モバイルでのタイトル行間

  • このトピックには7件の返信、1人の参加者があり、最後にかうたっくにより8年、 11ヶ月前に更新されました。
7件の返信スレッドを表示中
  • 投稿者
    投稿
    • #55882
      みーみ
      ゲスト

      こんにちわ。いつもお世話になっております。
      かっこよくて、初心者でも使う楽しさをもらえるsimplicity大好きです。

      色々参考にして、試してみたのですがうまくいかないのです。教えてください。

      トップページのタイトル行間を、狭くしたいのです。
      pcだと折り返さないので、気にならないにですが、モバイルだと行間が広くなってしまいます。

      また、pc.モバイルとも関連記事のタイトルが同じように、行間が広いのです。

      申し訳ありませんが、お教え願えますでしょうか。
      よろしくお願いします。

      f-kuro.xyz
      美腸Diet

    • #55886
      かうたっく
      ゲスト

      トップページのタイトル行間

      食事&エクサイズ&美腸でリバウンドしないダイエットを

      というのが320pxでみると折り返すので、ディスクリプションだとすれば下記の通りです。

      @media screen and (max-width:639px){
        #h-top #site-description{
          line-height:120%;
        }
      }

      140%が元の指定です。

    • #55897
      みーみ
      ゲスト

      かうたっくさん、ありがとうございます。

      説明が足らずに申し訳ありません。

      ■トップページの 投稿記事のタイトルがモバイルだと折り返しになり、行間が空いてしまっているのを修正したいです。
      オレンジで囲った部分です。
      http://netakiri.net/uploader/src/up0338.png

      ■関連記事も同じように、記事のタイトルの行間が開くのです。
      オレンジで囲った部分です。
      http://netakiri.net/uploader/src/up0339.png

      再び申し訳ありません。
      よろしくお願いします。

    • #55900
      かうたっく
      ゲスト

      今変更してますか?

      画像と表示が全く違って、どうなっているか不明です…。

      その様に行間は空いてないので・・。

      設定確認後また答えのみ書きますねっ

    • #55901
      かうたっく
      ゲスト

      エントリーカード、デフォルトにしている場合、トップページの記事タイトル行間指定。

      .entry-card-content .entry-title-link h2 a{
        line-height: 1;
      }

      大きくしたい場合、値を1.2など指定する

      関連記事も同じように、記事のタイトルの行間が開く

      コチラは下記のスタイル

      .related-entry-title-link {
        line-height: 100%;
      }

      ※値が1でも100%でも同じ。広くする場合は1.2または120%と指定。

      500px以内のデバイスの時のみなら下記のコード内にいれてチェックしてください。

      @media screen and (max-width: 500px){
      .entry-card-content .entry-title-link h2 a{
        line-height: 1;
      }
      .related-entry-title-link {
        line-height: 100%;
      }
      }
    • #55904
      みーみ
      ゲスト

      ありがとうございます。

      .entry-card-content .entry-title-link h2 a{
      line-height: 1;
      }

      .related-entry-title-link {
      line-height: 100%;
      }
      で、値を色々変えてみたのですが、狭くならないのです。
      今は、どちらも値を0にしているのすが、どうも変わらないのです。

      キャッシュもクリアしています。PC,スマホ、タブレットとも変化がないように見えるのですが、
      行間を0にしても、それほど間がつまらないものなのでしょうか?

    • #55909
      かうたっく
      ゲスト
      .entry-card-content .entry-title-link {
        line-height: 1;
      }

      が正解でした。すみません、ボケて変なの追加してしましました。。または下記のコード。どちらでもOKです

      #list h2 a {
        line-height: 1;
      }

      関連記事タイトルは下記の通りですねぇ。

      .related-entry-title-link {
        line-height: 1;
      }

      これを2に変更したら、いきなり行間が広くなります。

    • #55912
      かうたっく
      ゲスト

      あと上記はコメントアウトしてますけど。以下のコードですがCSSが効かない原因っぽいです

      /*h2{
        border: none;
          background-color: #f5d5da;
          border-radius: 5px;
          color: #ef858c;
          padding: 10px 10px 10px 60px;
          position: relative;
          text-shadow: 0px 0px 10px #fff, 0px 0px 6px #fff, 0px 0px 4px #fff, 0 0 0.5px #fff;
      }
      h2:before{
          content: '**';
          color: #fff;
          display: inline-block;
          font-size: 30px;
          font-weight: bold;
          margin-right: 10px;
          position: absolute;
          top: 0px;
          left: 0px;
          transform: rotate(20deg);
          -moz-transform: rotate(20deg);
          -webkit-transform: rotate(20deg);
          -o-transform: rotate(20deg);
          text-shadow: 0px 0px 3px #fff, 0px 0px 2px #fff, 0 0 0.5px #fff;
      }
      h2:after{
          border-bottom: 2px dotted #fff;
          content: '';
          position: absolute;
          bottom: 3px;
          left: 3px;
          right: 3px;
      }
      body{
      font-family: "Rounded Mplus 1c"
      }
      
      .related-entry-thumbnail .related-entry-title a {
          display: inline-block;
          text-align: left;
      }
      
      /* 新着記事のライン */
      .widget_new_entries ul li, .widget_new_popular ul li, .widget_popular_ranking ul li {
          clear: left;
          float: none;
          margin-bottom: 10px;
          overflow: auto;
          border-bottom: 1px solid #ccc;
      }
      .widget_new_entries ul li img, .widget_new_popular ul li img, .widget_popular_ranking ul li img {
          border: medium none;
          display: inline;
          float: left;
          margin-top: 3px;
          margin-right: 8px;
          width: 75px;
          height: 75px;
          margin-bottom: 10px;
          box-shadow: 2px 2px 5px #ccc;
      }
      .widget_new_entries a, .widget_new_popular a, .widget_popular_ranking a, .wpp-list a, .article-list .entry-title a {
          text-decoration: none;
          font-size: 90%;
      }
      */

      コメントが外れて閉じるマーク*/が原因の可能性も。/* 新着記事のライン */これを外すかコメント部分を外して新着記事のラインとする。完全に不要なら削除する。

      もう一つ

      /* 関連記事左寄せ */
      .related-entry-thumbnail .related-entry-title a {
          display: inline-block;
          text-align: left;

      閉じカッコが付いてないので、CSSが効かない。以下のように閉じカッコを追加してください^^

      /* 関連記事左寄せ */
      .related-entry-thumbnail .related-entry-title a {
          display: inline-block;
          text-align: left;
      }

      下記に詳しく書いてます。
      https://bibabosi-rizumu.com/css-comment-syntax/

7件の返信スレッドを表示中
  • フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。
スポンサーリンク
アドセンス(大)
アドセンス(大)