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

WordPress
この記事は約6分で読めます。

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

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

スポンサーリンク

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

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

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

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

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

<table>
     <tr>
     <td>テーブル</td>
     <td>テーブル</td>
     </tr>
</table>
テーブルテーブル

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

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

border-styleで枠線を消す

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

<table>
     <tr>
     <td style="border-style: none;">テーブル</td>
     <td style="border-style: none;">テーブル</td>
     </tr>
</table>
テーブルテーブル

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

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

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

例えばこれ

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

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

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

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

.delline td,
.delline tr {
  border: none;
}

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

<div class="delline">
<table>
     <tr>
     <>テーブル</td>
     <>テーブル</td>
     </tr>
</table>
</div>
テーブルテーブル

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

<div class="delline">
楽天アフィリエイトの商品リンク
</div>

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

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

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

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

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

ボタン名 枠線消
開始タグ

<div class="delline">

終了タグ

</div>

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

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

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

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

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

スポンサーリンク

よく使うAddQuicktagの追加設定

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

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

<p style="margin-top: 2em;"></p>

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

<p style="margin-top: 5em;"></p>

 

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

<span class="bold">

終了タグ

</span>

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

.bold {font-weight:bold;}

 

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

<div style="float: left; padding-right: 10px;">

終了タグ

</div><div style="clear: both;"></div>

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

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

まとめ

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

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

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

コメント

タイトルとURLをコピーしました