前の記事「the_excerpt()による「続きを読む」のなにが問題なのか？ | Naokix.net」で WordPress の「続きを読む」について少しばかり述べましたが、CSS をいじっていて気がついたことがあったのでメモ。

　スタイルシートをなにもいじらずに「続きを読む」を表示させると、

このように文末につなげて表示されます。

　人によってテーマのレイアウトが違うので一概には言えませんが、「続きを読む」って右側に寄せているブログが多いと思いませんか？

を適用します。WordPress は「続きを読む」というリンクに「more-link」というクラスを自動で割り当ててくれます。

このリンクを右側に寄せるなら、スタイルシートは以下になります。

右側に寄りましたね。少し上に距離をとりましょうか。

すると、

つ、突き抜けるぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅぅ

これを解決したいと思います。

解決策

　要は、float を指定したことで親要素を突き抜ける、という問題なのですが、

WordPress のインデックスページは記事の抜粋を div タグで囲み、「post」というクラスを自動で割り当ててくれます。これが「続きを読む」リンクの親要素になっていますので、

と指定してやれば、

このように、「続きを読む」を含めて表示してくれるようになります。

「float」指定によるレイアウト崩れを回避する方法「overflow:hidden;」「clear」「clearfix」

こちらのリンク先では「overflow: hidden;」以外での解決方法も紹介されているので参考にしてください。個人的には一文で済む「overflow」が好みです。

本格ビジネスサイトを作りながら学ぶ WordPressの教科書 Ver.4.x対応版

posted with カエレバ

プライム・ストラテジー株式会社 SBクリエイティブ 2015-02-21

Amazon

楽天市場