WPテーマ TwentySeventeenの消せないtable borderを消す方法

"WordPress" カテゴリー記事
  

我が家のブログにも使っているWPテーマ TwentySeventeen。何かと癖の強いテーマですがレスポンシブ構文の勉強には向いてるかも…と2017年から使っておりますが、Tableを使うときも何かと強い癖が出ます。

リンクの白い下線、黒い下線を消す(隠す)

TwentySeventeenデフォルトでは、リンクの白い下線、黒い下線が入ってしまうので、これを消したいと四苦八苦していた時期がありましたが、現在はCSSでほぼ解決しております。

CSS

/*———————————————————–*/
/* リンクの白い下線の削除 */
/*———————————————————–*/
.entry-title a,
.entry-meta a,
.page-links a,
.page-links a .page-number,
.entry-footer a,
.entry-footer .cat-links a,
.entry-footer .tags-links a,
.edit-link a,
.post-navigation a,
.logged-in-as a,
.comment-navigation a,
.comment-metadata a,
.comment-metadata a.comment-edit-link,
.comment-reply-link,
a .nav-title,
.pagination a,
.comments-pagination a,
.site-info a,
.widget .widget-title a,
.widget ul li a,
.site-footer .widget-area ul li a,
.site-footer .widget-area ul li a {
-webkit-box-shadow: inset 0 0px 0 rgba(255, 255, 255, 1);
box-shadow: inset 0 0px 0 rgba(255, 255, 255, 1);
}

/*———————————————————–*/
/* リンクの黒い下線を背景色で隠す */
/*———————————————————–*/
.entry-content a,
.entry-summary a,
.widget a,
.site-footer .widget-area a,
.posts-navigation a,
.widget_authors a strong {
-webkit-box-shadow: inset 0 0px 0 rgba(55, 5, 25, 1);/*下線の太さと色(背景色)*/
box-shadow: inset 0 0px 0 rgba(55, 5, 25, 1);/*下線の太さと色(背景色)*/
}

/*———————————————————–*/
/*Widget エリア下線の削除 */
/*———————————————————–*/
section.widget ul li,section.widget ol li{
border-width: 0px;
}

消せないTableの枠線を消す

「tableの枠線が消せない」とは、なんともHTMLもろくに知らない初心者かと思われますが…WPテーマ TwentySeventeenでは 、フツーにtableを作成すると勝手に薄っすら黒い枠線(border)を引いてくれますが、これが消せないで何年も過ごしておりました。
「どうせ枠線引くから問題なし」とはいかない場合もあったりするので無視できないのですが…なかなかどうして最近まで消せなかった tableの薄っすら黒い枠線(border)です。

見出し01 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し02 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し03 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

HTML

<table>
<tbody>
<tr>
<td>見出し01</td>
<td>内容(コンテンツ)</td>
<td>内容(コンテンツ)</td>
<td>内容(コンテンツ)</td>
</tr>
<tr>
<td>見出し02</td>
<td>内容(コンテンツ)</td>
<td>内容(コンテンツ)</td>
<td>内容(コンテンツ)</td>
</tr>
<tr>
<td>見出し03</td>
<td>内容(コンテンツ)</td>
<td>内容(コンテンツ)</td>
<td>内容(コンテンツ)</td>
</tr>
</tbody>
</table>

ちなみに
枠線指定0px:<table style border=”0″>
枠線指定無し:<Table style=”border: none;”>
でも効果はありません。

正解だったのは
枠線隠し<Table style=”border: hidden;”>

見出し01 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し02 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し03 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

外枠だけしか消えないので<Td style=”border: hidden;”>も追加します

見出し01 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し02 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)
見出し03 内容(コンテンツ) 内容(コンテンツ) 内容(コンテンツ)

HTML

<table style=”border: hidden;”>
<tbody>
<tr>
<td style=”border: hidden;”>見出し01</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
</tr>
<tr>
<td style=”border: hidden;”>見出し02</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
</tr>
<tr>
<td style=”border: hidden;”>見出し03</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
<td style=”border: hidden;”>内容(コンテンツ)</td>
</tr>
</tbody>
</table>

これまであまり使ってこなかった「hidden」見つけたときは虚を突かれた感じでした。

「レスポンシブ対応のブロックtable作成」に続く…

コメントを残す

メールアドレスが公開されることはありません。