ワードプレスでテーブルタグの枠線をAddQuicktagを使って消す方法

シェアする

今回は備忘録的にワードプレスでtableタグを使うときに枠線を消す方法をまとめておきます。

楽天アフィリエイトのリンクでの枠線表示もこれで解決できました。

スポンサーリンク

ワードプレスでテーブルタグの枠線を消す方法

現在使用している環境は次のようになっています。

ワードプレス+Simplicity2+子テーマ(スキン設定)

他のテーマの場合は少々違う設定が必要となるかもしれませんのでご了承下さい。

ワードプレスで文字を整列させたいときにtableタグを使うことが多いのですが、普通に次のような記述だと、

テーブル テーブル

こんな感じで枠線も表示されます。枠線の色はスキンの設定が影響しています。

ここからは枠線を消す方法を説明します。

border-styleで枠線を消す

枠線は次のように「border-style」を設定すれば消すことができます。

テーブル テーブル

いちいち記述するのはちょっと面倒ですね。

スタイル設定から枠線を消す

前の方法にはひとつ問題があって、楽天アフィリエイトなどのリンクで「tableタグ」が使用されていても、ソースの記述は変更することができません。

例えばこれ

外側に枠線が出ているのが分かります。

これを解決するため、スタイルを設定します。

具体的にはスタイルシート(style.css)などにスタイルを設定しておきます。

今回は子テーマのstyle.cssに設定しましたが、テーマによっては別のスタイルシートやhead.phpなどにstyleタグとして設定する必要があるかもしれません。

テーブルをdivタグで囲み先ほどのスタイルを適用します。

テーブル テーブル

先ほどのアフィリエイトリンクも同様に行うことで枠線を消すことができます。

ワールドプレスのプラグインAddQuicktagでより簡単に

スタイル設定によって枠線を消すのが便利なので、これを「AddQuicktag」で設定することにしました。

AddQuicktagはワードプレスのプラグインからインストールできます。

インストールが完了したら有効化しておきます。

ワードプレスにて「設定」→「addQuicktag」をクリックします。

ボタン名 枠線消
開始タグ

終了タグ

右のチェックボックスにチェックして、「変更を保存」をクリックします。
addquicktag1

これでタグのショートカットが設定できました。
addquicktag2

枠線を消したいテーブルを選択して、「枠線消」をクリックすれば先ほど設定したタグで囲めます。
addquicktag3

「枠線消」を適用するとこのようになります。
addquicktag4

楽天アフィリエイトのリンクも同様に囲めばOKです。

スポンサーリンク

よく使うAddQuicktagの追加設定

今使っているAddQuicktagの他の設定も書いておきます。

改行
ボタン名 2行改行
開始タグ

ボタン名 5行改行
開始タグ

太文字
ボタン名 太文字
開始タグ

終了タグ

先にstyle.cssに以下を追加しておく。

画像の横並び
ボタン名 横並び
開始タグ

終了タグ

終了タグの
”<div style=”clear: both;”></div>”
は最後にひとつあれば良いので、ちょっと面倒ですが画像間に挿入される
”<div style=”clear: both;”></div>”
は手動で削除してください。

これを使えば画像を横並びに配置できます。

まとめ

ワードプレスでテーブルタグの枠線をAddQuicktagを使って消す方法をご紹介しました。

詳しい方には当たり前な内容と思いますが、自分を含めワードプレス初心者には役立つかと思いましたのでまとめてみました。

↓↓記事がお役に立ちましたら応援クリックお願いします!
ブログランキング・にほんブログ村へ
にほんブログ村

スポンサーリンク