少し前ににほんブログ村と人気ブログランキングのオリジナルバナーを横並びにする方法という記事をあげました。
その際に自分のブログ３つで確認した際、何故かF-lightだけ枠線がついてしまったんですよね。
どうもF-lightでは<table>タグを使うと自動で枠線が入ってしまう設定がされているようです。
<table>タグはそもそも表を作成するためのものなので、表を作成する分には問題ありません。
ですがBloggerブロガーの方だと、画像を横並びにする手軽な方法として<table>タグを用いている方も多いのではないでしょうか。
自分も以前に画像やアフィリエイトを中央寄せ横並びにする方法という記事をあげていますし、なんとかしたいと思います。
本記事では上記のように、F-light記事本文の<table>タグの枠線を消去する方法を解説します！
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
F-light記事本文の<table>タグの枠線を消去するCSS
以下のCSSを追加してください。
簡単に解説します。
post-body ➡ 記事本文に限定
border: none !important ➡ 枠線を表示させないよう強制
border-collapse: collapseで ➡ 枠線の二重表示を防ぐ
また<table> 本体だけでなくtd・thのセル単位でも枠線を表示させないようにする必要があります。
注意点としては、このCSSを追加すると記事本文全ての<table>タグの枠線が消えてしまいます。
表作成に<table>タグを使いたい場合は、画像やアフィリエイトを横並びにするのに<table>タグを使用しない方法を模索する必要がありますのでご了承ください。
F-lightを自分好みにカスタマイズしよう！
これでF-lightでも
にほんブログ村と人気ブログランキングのオリジナルバナーを横並びにする方法
を使えるように出来ました。
テーマを変更すると意外な変更があって焦ってしまいますよね。
一つ一つ確認して、自分好みにカスタマイズしていきましょう！
