Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › アイキャッチ画像とタイトルとの隙間が調整できません…
- このトピックには13件の返信、2人の参加者があり、最後に
きよにより9年、 7ヶ月前に更新されました。
-
投稿者投稿
-
-
2016年10月27日 3:18 AM #46742
きよ
ゲスト何度もすいません…
こちらのトピックで拝見したやり方でカスタマイズをしていたのですが
だいたいおおむね同じような感じにできたところまではいいのですが
わいひらさんのサイトで提示していたサンプルより画像とタイトルの間があかず
くっついた状態で表示されますcss側のほうで文字サイズを変更する→変化なし(タイトルのサイズも変化なし)
画像のマージンを調整してみる→どこの要素のマージンを弄っても変化なしという形で解決法が見つかりません…
あとこちらのサイトの表示はこんな感じになります…

Attachments:
-
2016年10月27日 4:19 AM #46745
Hidekichi
ゲスト> 画像のマージンを調整してみる→
> どこの要素のマージンを弄っても変化なしこのどこの要素のマージンは画像が入ってる親のマージンは触られましたか?
リンク先で言えば、.entry-thumb { float: none; margin-right: 0; text-align:center; }ここにmargin-bottomを設定されたかどうかです。
で、カスタマイズされたということですが、これはまんまサムネイル大のリスト表示ではないですかね?
わいひらさんの回答とされるリンク先の記事も2014年なので、おそらく既にサムネイル大として実装されているかと思います。
サムネイル大なら、figureタグとentry-card-contentで別れているのでスクショのようにタイトルが重なることは無いのではなかろうかと思うんですがどうでしょうか? -
2016年10月27日 8:06 AM #46750
きよ
ゲスト上記の場所も追加して試しましたが変化がなかったです
2000とかにしても写真のような状態のままでしたサムネイル大では確かに画像とタイトルの間に隙間ができていたのですが
TOPを本文表示だとサムネイル大は選べないのです固定ページをフロントにもっていく機能はないようなので
タイトル文字をどうにか下げる方法を知りたいのですタイトル部分は
.entry h2{ margin-top:0; font-size:18px; max-height:50px; overflow:hidden; }ここがタイトルのところだと思うのですが
フォントサイズを50くらいにしても変化はありません
もう一つタイトルに直接ついていた
entry-title というクラスでも試してみたのですが同じく変化はありませんです画像のマージンも文字の大きさもどれだけ違うサイズにしても
違うCSSファイルを弄ってるのではないかと不安になるくらいに
どこを弄っても変化はないです… -
2016年10月27日 10:09 AM #46754
hidekichi
ゲスト> サムネイル大では確かに画像とタイトルの間に
> 隙間ができていたのですがTOPを本文表示だと
> サムネイル大は選べないのですということは、最初だけ全文表示とかにされているわけですか?
ここらはhtmlの構造が変わる所ですので、後から小出しせず、最初にどういう環境で設定しているかはあらいざらい書いておいてください。と、いいつつも、リストの部分のhtmlは同じでしょうから、
<div id="#list"> <div class="entry"> <div class="entry-thumb"> <img> </div> <div class="entry-card-content"> 略 </div> </div> </div>こんなhtmlの構造かと思うんですよ。.entry-thumbと.entry-card-contentにfloatが効いて無い限り重なることはないと思うんですけどね。.entry-thumb imgにfloatとか入ってませんかね?あるいはposition: absoluteとか。実際のソースを見たら1分かからず原因はわかると思いますが、予想で書いてるのでここらはご自身で調べてもらうしかありません。
もし、.entry-thumbと.entry-card-contentがposition:relativeで、floatも入っておらず、かつ.entry-thumbにheightとmargin-bottomが設定されているなら.entry-thumbと.entry-card-contentはスクショのようにくっついて見えることはまぁないかと。
おそらく何か邪魔しているプロパティが継承されてそうなっているようにも思うので、デベロッパーツールでひとまず上記のfloatあたりが画像周りに残っていないかなどを確認してみてください。
-
2016年10月27日 3:01 PM #46762
きよ
ゲストお返事ありがとうございます
久しぶりにcssを弄っていて初めて見る要素に四苦八苦しておりますあと説明不足でした申し訳ないです
こちらが標示がうまくいかないサイトトップです
http://corola.love-cc.com/子テーマのCSS部分ですが
Simplicity2 child: スタイルシート (style.css)
#main .entry{ width:320px; height:380px; overflow:hidden; float:left; clear:none; margin:10px 10px 0 10px; } .entry-thumb { float: none; margin-right: 0; text-align:center; } .entry-thumb img{ margin-bottom:0; } .entry-content { margin-left: 0; } .entry h2{ margin-top:0; font-size:18px; max-height:50px; overflow:hidden; } .entry-snippet{ height:48px; overflow:hidden; } .entry .post-meta .category{ display:none; }わいひらさんが説明されていたページにあったものをそのまま張り付けただけのものです
邪魔をしているようなfloatはないような気がするのですが子テーマ側の方でカスタマイズしているのは
本文記事用の見出し(h3~h6)の装飾と
サイドバーの文字サイズ、ウィジェットの間隔なので
かぶってるものはないと思います -
2016年10月27日 3:40 PM #46763
hidekichi
ゲスト#46745 で説明したように、普通にmargin-bottomを入れたらイケましたが、どういう状況の時にcssが効かないでしょうか?

例えばスマホで見てる時とか、なんちゃらと言うブラウザの時とか。
cssを変更しているのにも関わらず、それが反映しないというのであればそれはおそらくはキャッシュでしょうから、それらを一旦データクリアして、プラグインなりサーバーの機能なり、ブラウザの機能なりでキャッシュさせないようにして確認してみてください。
ブラウザはプラウベートウィンドウや、シークレットウィンドウとかです。
-
2016年10月27日 3:55 PM #46765
きよ
ゲストマージン追加しても特に変化がなかったため
削除していたのですが
もう一度追加して更新かけました現在のCSSはこうなっております
.entry-thumb { float: none; margin-right: 0; margin-bottom: 10; text-align:center; } .entry-thumb img{ margin-bottom:10; }ウェブの表示確認は
chromeとfirefoxを使用していますfirefox側の方は上記の設定だと重なりはしないものの
隙間はほぼありません1~2px程度でした -
2016年10月27日 4:00 PM #46766
hidekichi
ゲストmargin-bottom: 10;単位が必要です。
margin-bottom: 10px;
など。 -
2016年10月27日 4:05 PM #46767
hidekichi
ゲストあと、imgにはmarginいらないと思います。
現在のデザインだと気にはならないかも知れませんが、.entry-thumbにだけ任意のmargin入れて、imgはmargin: 0で良いのではなかろうかと。
marginが必要であれば入れてください。margin: 0でもimgに隙間ができるような場合は、imgにdisplay: blockを追加してください。理由としては、imgはインライン要素なのでブロック要素にするということです。
-
2016年10月27日 4:07 PM #46768
きよ
ゲストchrome側ではどんな単位を指定してもうんともすんとも言わなかったのですが
先ほどpx指定をしたらfirefox側の方では隙間が空きましたそうなるとchrome側の所為ってことになりますか
でもサムネイル大だとchromeでもちゃんと隙間はできるんで、開ける方法がないわけでも
なさそうなのですが… -
2016年10月27日 4:42 PM #46770
hidekichi
ゲストchromeでも普通にmargin分開いてますよ。
単純にキャッシュの問題かと。一度シークレットウィンドウで見てみてください。どんなカスタマイズをする時でも、キャッシュは必ず停止させるか、キャッシュしない状態で作業して、その作業が確認できた後にキャッシュさせるようにします。
他の訪問者はキャッシュが切れたら勝手に反映されるので別にどうでも良いですが、自分は自分がやったことの確認をしないといけないので必ずキャッシュはoffです。ブラウザだけでなくサーバー側もそうです。
-
2016年10月27日 5:07 PM #46771
きよ
ゲストありがとうございます
キャッシュ削除したらきちんと閲覧できました…ッ今までキャッシュためたままでも変わりなく変更画面が見れていたので
すっかり失念しておりました…画像とのマージンは解決したのですが
タイトルの文字サイズは相変わらずうんともすんとも変わってくれません…
10PXにしてみても見出しは大きなままです
.entry h2{ margin-top:0; font-size:10px; max-height:50px; }タイトル部分の見出しここであってますか?
-
2016年10月27日 7:36 PM #46791
わいひらキーマスター.entry h2 aに指定してやる必要があると思います。 -
2016年10月27日 8:57 PM #46802
きよ
ゲストありがとうございます
無事に変更できましたほんと勉強不足で申し訳ありません
お手数をおかけいたしました
-
-
投稿者投稿
- トピック「アイキャッチ画像とタイトルとの隙間が調整できません…」には新しい返信をつけることはできません。
