WordPressの「続きを読む」をスタイルシートでカスタマイズするとき注意すること

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

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

20150710_1_2

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

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

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

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

20150710_2_2

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

すると、

20150710_3_2

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

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

解決策

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

20150710_4_2

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

と指定してやれば、

20150710_5_2

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

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

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

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP