Simplicityの特徴 › フォーラム › Simplicityについての質問 › モバイルでのタイトル行間
- このトピックには7件の返信、1人の参加者があり、最後に
かうたっくにより8年、 11ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年9月15日 2:04 PM #55882
みーみ
ゲストこんにちわ。いつもお世話になっております。
かっこよくて、初心者でも使う楽しさをもらえるsimplicity大好きです。色々参考にして、試してみたのですがうまくいかないのです。教えてください。
トップページのタイトル行間を、狭くしたいのです。
pcだと折り返さないので、気にならないにですが、モバイルだと行間が広くなってしまいます。また、pc.モバイルとも関連記事のタイトルが同じように、行間が広いのです。
申し訳ありませんが、お教え願えますでしょうか。
よろしくお願いします。f-kuro.xyz
美腸Diet -
2017年9月15日 4:51 PM #55886
かうたっく
ゲストトップページのタイトル行間
食事&エクサイズ&美腸でリバウンドしないダイエットを
というのが320pxでみると折り返すので、ディスクリプションだとすれば下記の通りです。
@media screen and (max-width:639px){ #h-top #site-description{ line-height:120%; } }140%が元の指定です。
-
2017年9月15日 6:28 PM #55897
みーみ
ゲストかうたっくさん、ありがとうございます。
説明が足らずに申し訳ありません。
■トップページの 投稿記事のタイトルがモバイルだと折り返しになり、行間が空いてしまっているのを修正したいです。
オレンジで囲った部分です。
http://netakiri.net/uploader/src/up0338.png■関連記事も同じように、記事のタイトルの行間が開くのです。
オレンジで囲った部分です。
http://netakiri.net/uploader/src/up0339.png再び申し訳ありません。
よろしくお願いします。 -
2017年9月15日 7:57 PM #55900
かうたっく
ゲスト今変更してますか?
画像と表示が全く違って、どうなっているか不明です…。
その様に行間は空いてないので・・。
設定確認後また答えのみ書きますねっ
-
2017年9月15日 8:06 PM #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%; } } -
2017年9月15日 8:58 PM #55904
みーみ
ゲストありがとうございます。
.entry-card-content .entry-title-link h2 a{
line-height: 1;
}
と
.related-entry-title-link {
line-height: 100%;
}
で、値を色々変えてみたのですが、狭くならないのです。
今は、どちらも値を0にしているのすが、どうも変わらないのです。キャッシュもクリアしています。PC,スマホ、タブレットとも変化がないように見えるのですが、
行間を0にしても、それほど間がつまらないものなのでしょうか? -
2017年9月15日 10:59 PM #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に変更したら、いきなり行間が広くなります。
-
2017年9月15日 11:09 PM #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/
-
-
投稿者投稿
- フォーラム「Simplicityについての質問」には新規投稿および返信を追加できません。