- このトピックには3件の返信、2人の参加者があり、最後に
により11年前に更新されました。
-
投稿
-
-
現在のブログの状況として、
・完全レスポンシブデザイン
・記事一覧リストのスタイルを「大きなエントリーカード」
・記事と記事の間に関するstyle.cssは一切触っていないという感じです。「記事を読む」ボタンと、
前の記事のアイキャッチ画像との間が狭くなっており、
記事の間の線が、下の記事のアイキャッチ画像とくっついています。記事の間に関してはpadding-bottomの値を変更する事で対応出来ると思うのですが、
記事と記事の間にしっかり点線を表示する方法が分かれば嬉しいです。ブログです。http://maruhoi.com/
よくみると、アイキャッチ画像のすぐ上に点線が表示されています。
色々調べながらやったんですが、何かここでも情報が得られればいいなと思います。
よろしくお願いします。 -
まず、.entryのborder-bottomをコメントアウトなりして無くします。
あるいは打ち消すスタイルを書いて表示させなくします。あわせて、最後の.entry以外にhrを入れれば確実にボーダーが独立しますので、好きなスタイルが可能です。
もし、cssを調整することでやりたい場合は、.entryのmargin-bottomの数値をイジることでそれらしくなります。この場合も最後の子要素以外にボーダーを入れるとよいでしょう。注意点として、#list .postと、#main .entryと言うような同じ要素に対して違うセレクタのチョイスでcssが書かれているので上書きできない場合等もあります。その場合は、元々のプロパティがどこに書かれているかを調べて、それらを直接書き換える(元の値はコメントアウトなりする)のが良いのではないかと思います。
■jQueryでhrを入れる場合
cssで各リストアイテムのborder-bottomを非表示にしておき、
サンプル: リストアイテムの間にhrを突っ込む | jsFiddle
上記のスクリプト丸ごと子テーマjavascript.jsにコピペで、各リストアイテムの間にhrを突っ込めます。
:notが利用できないブラウザ(そんなものがあるかどうかは知りませんけれども)のために、#list .entryで全てのリストアイテムの後にhrを突っ込んで、CSSで、#list hr:last-of-type { display:none;} でも良いかと。これら(jQuery部分)はもちろんphpでも可能です。ただ面倒臭いです(笑)
面倒臭いのは、最後のリストアイテムをどう取得するかと、親テーマアップデートの際どうするか等の問題です。 -
-
改善予定という事なので待ちたいと思います。が、気分次第ではHidekichiさんの方法でカスタマイズしてみようかなとも思いました。お二人ともご返事ありがとうございました。
-
- トピック「記事一覧の記事と記事の間の線が、前の記事のアイキャッチ画像にくっついている」には新しい返信をつけることはできません。