テーブルを作成した場合、テーマによってはテーブルの外側に枠線がついてしまい、表示される横幅によって違和感が出てしまうことがあります。
現在使用しているテーマ「Xeory base」も同様にこの現象が起こっています。
そこで今回は枠線を消すための方法をお伝えしていきます。
お伝えするのはビジュアルエディターで記事作成中に行える簡単な内容で、初心者の方向きなものとなっています。
テーブルの作成
記事内にテーブルを作成する場合はテーブルを作成できるプラグインを有効化している必要があります。
この記事では「TinyMCE Advanced」を使用した内容で解説を行います。
TinyMCE Advancedのインストール方法と設定については別の記事に記載しています。
【WordPress】テキスト装飾ができるプラグイン「TinyMCE Advanced」の導入と設定
テーブル作成の手順
今回の内容である「枠線の削除」の前に、まずは必要となるテーブルを作成から行います。
①テーブルボタンを選択
テーブルを挿入したい場所にカーソルを合わせ「テーブル」を選択します。
②大きさの決定
「テーブル」にカーソルを合わせると表の大きさを指定できるので、作成したい大きさの場所でクリックします。
テーブルの数は「行」や「列」から追加や削除ができるので、後から修正もできます。
③内容の入力
内容を入力して表を完成させます。
④表示の確認
表が完成したらプレビューで確認します。
これで表が完成です。
ブラウザの幅を縮めると出現する枠線
先ほど④で確認した画像はPCのフルの状態での表示でした。
この幅を縮めるとある一定の場所でテーブルの外枠の線が表示されてしまいます。
このままでは見た目が悪いので、今回はこの外側の枠線を削除することで対処することにします。
外側の枠線の削除方法
枠線はテーブル作成後にちょっとした設定を行うだけで削除することができます。
〈表のプロパティ〉
枠線を削除したいテーブルをクリックし、テーブルボタンから「表のプロパティ」を選択します。
〈スタイルの追加〉
表のプロパティから「詳細」のタブに切り替え、スタイルの場所に「border: none;」と入力し「OK」ボタンをクリックします。
〈表示確認〉
プレビューで見てみると、先ほど枠線が表示されていた横幅にしても外側の枠線が削除できていることが確認できます。
これで枠線の削除は完了です。
コメントを残す