質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1241閲覧

WORDPRESS 表挿入の際の枠が消えない

koikogarey

総合スコア52

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/12/19 13:26

編集2018/12/19 17:20

お世話になります。WORDPRESS 表挿入し中に写真を3枚横に並べています。その際の表の外枠が消えなくて困っています。
CSSを指定するべきだと感じ、以下二点のCSSを埋め込んだのですが線は消えませんでした。
解決済とさせて頂きます。ベストアンサーの方含めて皆さまありがとうございました。

前提・実現したいこと

WORDPRESSで表を挿入した所、枠を消せる事ができませんでした。

イメージ説明

該当のソースコード

<table><td><figure><img width="500" height="500" src="xxx.jpg" alt="サンプル"></figure><center>123・456<br><strong>789</strong></center></td><td><figure><img width="500" height="500" src="xxx.jpg" alt="サンプル"></figure><center>123<br><strong>456</strong></center></td><td><figure><img width="500" height="500" src="xxx.jpg" alt="サンプル"></figure><center>123<br>strong>456</strong></center></td></tr></tbody></table>

事象

tableの上と下に線が出ます。左と右には出ません。

試したこと

#1

<td style="border-style: none;">

#2

<table border="0">

補足情報(FW/ツールのバージョンなど)

worpressver5.0

補足追記 以下コードにて 上の線 と 下の線 を削除する事ができました。ありがとうございます。現在500pxを指定しているにも関わらず画像が大きくなりません。恐れ入りますが500pxでの表示が可能であればご教示ください。

html

1<table style="border-bottom: none;"><td style="border-top: none;"><figure><img width="500" height="500" src="xxx.jpg" alt="サンプル"></figure> 2<div style="text-align:center">111<br><strong>111</strong></div></td><td style="border-top: none;"><figure><img width="500" height="500" src="xxx.jpg" alt="サンプル"></figure><div style="text-align:center">2222<br><strong>2222</strong></div></td><td style="border-top: none;"><figure><img width="500" height="500" src="xxx.jpg" alt="サンプル"></figure><div style="text-align:center">3333<br><strong>333333</strong></div></td></tr></tbody></table>

宜しくお願い致します。
解決済とさせて頂きます。ベストアンサーの方含めて皆さまありがとうございました。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2018/12/19 14:15

使用されているテーマは自作テーマでしょうか?それとも公開されているテーマでしょうか?後者の場合は入手先をリンクつきで質問文に追記してください。
koikogarey

2018/12/19 14:30

わかりました。テーマについて本文に追記させて頂きます。
guest

回答2

0

CSS

1table, 2table td { 3 border: 0 none; 4}

多分これを追加すればいけるとおもいます。

あと、<tbody><tr> が抜けています。
また、<center>タグはなくなったので使用しないようにしましょう。

<center>: 文字列の中央揃え要素 (廃止) | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/center

廃止

この機能は廃止されました。まだいくつかのブラウザーで動作するかもしれませんが、いつ削除されてもおかしくないので、使わないようにしましょう。

投稿2018/12/19 14:47

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koikogarey

2018/12/19 15:31

回答ありがとうございました。またtbodyとcenterの件、教えて頂きありがとうございます。 style.cssの最終行に以下コードを埋め込みましたが、線は上下とも消えませんでした。 table, table td { border: 0 none; }
kei344

2018/12/19 15:35

提示されたテーマのサイトではいけたのですが、他のスタイルが追加されているかもしれませんね。 デベロッパーツールで確認してください。 【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】 http://www.buildinsider.net/web/chromedevtools/01 【CSSが効かないときの優先順位チェック(3)~点数計算編】 https://naifix.com/css-priority-3/
Sohaya

2018/12/19 15:42

tableのborder指定は あとから読み込まれている /themes/uku-elma/assets/css/serif-style.css のほうで上書きされているようですので こちらのcssファイルの編集もお試しください。
koikogarey

2018/12/19 15:46

F12を押して、試しに赤の25pxにした所、左側の線は25pxの赤に変更されました。しかし上の線は削除・変更していません。 table { /* width: 100%; */ /* margin: 0 0 40px; */ /* border-collapse: collapse; */ /* border-spacing: 0; */ border-bottom: 25px solid #f00; /* line-height: 2; */ }
kei344

2018/12/19 15:46

To: Sohayaさん 補足ありがとうございます! To: dfjileさん これでどうでしょう。 body div table, body div table td { border: 0 none; }
kei344

2018/12/19 15:47

To: dfjileさん 上の線はtdに付いてます。
koikogarey

2018/12/19 15:52

kei344さん コードありがとうございます。以下コードを外観→テーマの編集からstyle.cssの最終行に挿入しましたが、chrome、firefox両方ともに上下に線が出ています。 body div table, body div table td { border: 0 none; }
kei344

2018/12/19 15:58

デベロッパーツールで変更が反映されていますか? tableに複数付いているスタイルを確認して、編集した物があるか確認してください。
koikogarey

2018/12/19 16:04

了解しました。 Sohayaさんが教えて頂いたソースを試した所、上と下の線ともに削除する事ができました。補足として本文にソースをアップしますのでお手数おかけしますがご確認頂けますでしょうか?
Sohaya

2018/12/19 16:06

>>外観→テーマの編集からstyle.css 外観→テーマの編集からassets > css > serif-style.css この「serif-style.css」のほうを編集してみてください。
kei344

2018/12/19 16:07 編集

To: dfjileさん 何を?出来たのでは?
koikogarey

2018/12/19 16:12

kei344さん 以下のSohayaさんの教えて頂いた方法で固定ページをアップロードした所、線が上下ともに消えました。補足として質問本文の一番下に線を消せたコードを掲載させて頂きました。
koikogarey

2018/12/19 16:17

Sohayaさん 子テーマを使用している為、serif-style.cssはありません。しかしSohayaさんのいう通り、 <td style="border-top: none;">と <table style="border-bottom: none;"> を埋め込んだ所、上の線と下の線は消えました。 ありがとうございます。 しかし500px指定の画像は230x230程に3つとも小さく縮小表示されています。
kei344

2018/12/19 16:18

To: dfjileさん 質問が変わっているので、新たに質問をされることをお勧めします。
koikogarey

2018/12/19 16:20

了解しました。改めて質問させて頂きます。お二人ともご協力頂いたのでお二人にベストアンサーにする事は出来ないのでしょうか?二人ともとても丁寧な方でしたのでずっと選べないでいます。。
kei344

2018/12/19 16:22

To: dfjileさん 直接問題解決につながったSohayaさんをお勧めします。
koikogarey

2018/12/19 16:27

了解しました。また質問を別途新規でスレ立てさせて頂きました。ありがとうございました。
guest

0

ベストアンサー

デフォルトでtableの上下に線が入るテーマをお使いなのだと思いますが
dfjileさんの試された #1・#2の方法では
テーマのスタイルを上書きできなかったようなので
tableのborderではないのかもしれません。

開発ツール等でHTML・CSSのソースコードを見て
「どんな方法で線を引いているか」=
「どんなセレクタで線を引くスタイルを指定しているか」を調べて
該当のセレクタのスタイルを上書きしてみてください。

開発ツールは ChromeやFirefoxで「F12」キー もしくは
コマンド「Ctrl+Shift+C」「Ctrl+Shift+I」等で呼び出せます。


追記 ※上の線と下の線で 編集するタグが異なります。

■テーブルの上の線を消す場合

<td style="border-top: none;"> ```※1行目にあるすべてのthタグ・tdタグを編集 ■テーブルの下の線を消す場合 ```ここに言語を入力 <table style="border-bottom: none;">

投稿2018/12/19 14:31

編集2018/12/19 15:33
Sohaya

総合スコア254

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

koikogarey

2018/12/19 14:37

回答頂きありがとうございました。 F12を押して、該当の線がある所でクリックを押しました。 右側に対象CSSがあると思い全て1つずつチェックをしました。 すると以下のコードの中の table { width: 100%; margin: 0 0 40px; border-collapse: collapse; border-spacing: 0; border-bottom: 1px solid #ccc; /* line-height: 2; */ } この行を外すと、デバック上では線が消えました。 border-bottom: 1px solid #ccc; 線を消すには、CSS上でどのように上書きすればいいのでしょうか? 宜しくお願いします。
Sohaya

2018/12/19 15:23

線を消したいタグの中に直接style属性を書き込むのが簡単ですが タグの数が多いと書き込むのが大変なので kei344さんの回答のCSSをclassで指定するのが良いと思います。 直接style属性を書き込む場合の例を 上記回答欄に追記いたします。
koikogarey

2018/12/19 15:26

上記回答欄に追記いたします。 了解しました。ありがとうございます。
koikogarey

2018/12/19 16:00

Sohayaさんの教えて頂きました以下コードを直接記載すると、下の棒を消す事ができました。現在上の棒を対応中です。御礼まで <table style="border-bottom: none;">
koikogarey

2018/12/19 16:03

<td style="border-top: none;"> を全てに埋め込んだ所、上の線も消す事ができました。今一度、アドバイスを受けました箇所を修正したソースを本文に補足しますのでお手数おかけしますがチェック頂けますでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問