【QooQ】Blogger無料テンプレートの表の作成方法

2020/06/04

Blog

t f P L

【Blogger】QooQテンプレートと表

【Blogger】QooQテーマと表と枠線
Googleが運営している無料ブログサービス「Blogger」にはいくつかの公式テーマ(テンプレート)がありますが、
  デザイン  SEO対策  速度 
 公式テーマ 微妙?  微妙? 
非公式テーマ  良好  良好  玉石混交 
ということから、ユーザーが制作している非公式テーマ(テンプレート)を利用される方は多いです。
その中でも、無料で軽く、SEO対策されている「QooQ」が人気です。
しかし、デフォルトのままでは表の枠線が表示されないという欠点があります。
本記事では、そのQooQテンプレートで表の枠線を表示させる方法について紹介していきます。

QooQでは表の枠線が表示されない

Bloggerの無料テーマ「QooQ」では、表の挿入自体はできても、なぜか、枠線が表示されません。
こんな感じです。
なぜ表の枠線が表示されないのでしょうか?
実は、原因は、至って単純なことでした。

QooQで表の枠線を表示させる方法

Bloggerテーマ【QooQ】での表の枠線設定
表の枠線を表示されない原因は「border:0」となっているからです。
これを変えてあげれば良いわけです。
なので、テーマのHTMLを少しいじってやります。
  1. ダッシュボードから「テーマ」
  2. テーマの「HTMLを編集」
  3. HTML内でカーソルを点滅させる
  4. 「Ctrl+f」で「border:0」を検索
  5. 「border:1」にする
  6. 保存
以上です。
ただし、書き換えるのは、
「初期化-*基本いじらない」の中にある、一つ目の「border:0」だけです。

HTMLを編集する前に注意しよう

HTML編集する前にバックアップしよう
今回のようにHTMLを
  • 書き換え
  • 追加
をする場合には、編集する前に必ずバックアップしておきましょう。
そして自己責任で行ってください。

表の枠線(border)についての解説

先ほど、「border:1」に書き換えれば表の枠線が表示されるようになると言いました。
なぜなのでしょうか?
実は、この数字、枠線の太さを示しているんです。
  • 0・・・枠線なし
  • 小さい数字・・・細い枠線
  • 大きい数字・・・太くなる
なのです。
例)1 border=1の場合
■HTMLコード
<table border=1>
<tbody>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</tbody>
</table>
ABC
ABC

例)2  border=3の場合
■HTMLコード
<table border=3>
<tbody>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</tbody>
</table>
ABC
ABC

なので、[border:n]の"n"は0以外の好きな数字に設定しちゃって大丈夫です。

ただし・・・

ただし、新Bloggerで追加された「表」の挿入機能を使う場合、デフォルトで、
  • cellspacing属性が「cellspacing="0"」
  • style属性が「border-collapse: collapse」
となっているので、
「border」をどれだけ大きくしても1より太くなることはありません。

サイト内検索

自己紹介

自分の写真
普段思ったことを発信していこうと思い、このブログを開設した初心者ブロガラーです。

ContactForm

名前

メール *

メッセージ *

ラベル

QooQ