[Blogger] QooQでtableタグを使用可能にする方法

2026/06/16

Blogger HTML/CSS QooQ


前回、CSSなしHTMLだけで表を作成する方法を解説しました。

これでBloggerの記事でも表を使えるようになります。


しかし、テーマにQooQを使用していると<table>タグの指定が反映されません。

これは、QooQのデフォルトの指定の効力が強いことが原因です。


本記事ではQooQのデフォルトの設定を変更し、<table>タグを使えるようにする方法を解説します。


HTMLの編集手順

左のメインメニューから【テーマ】を選択し、カスタマイズ横の【▼】をクリックして【バックアップ】をしましょう。

それが終わったら、同じ画面の【HTMLを編集】をクリックして編集画面を開きます。



HTMLの編集画面では、Ctrlキー+FキーでSearch: という検索欄を表示させることで検索ができます。

HTMLの編集が終わったらプレビュー画面で確認して、保存をします。



QooQの<table>タグの初期設定を無効にする方法

HTMLの編集画面で「初期化処理-*基本いじらない」と記載されているところをいじってしまいます。



ここにある<table>タグ関連の指定を削除して、デフォルトを無効にします。


table,tbody,td,tfoot,th,thead,


この6つが<table>タグに関する指定なので、削除してください。


/****************************************
     初期化処理-*基本いじらない
*****************************************/
abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{text-decoration:none}*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{text-align:left;word-wrap:break-word;overflow-wrap:break-word;font-size:1.7rem;font-weight:500;line-height:1.2;letter-spacing:.02em;min-width:960px}.container{margin:auto;width:86%;min-width:960px;max-width:1180px}a{text-decoration:none;color:inherit}img{height:auto;vertical-align:bottom}iframe,img{max-width:100%}.separator a{margin-left:0!important;margin-right:0!important}.separator a,.separator img{display:inline-block}.section{margin:0}.widget ol,.widget ul{padding:0}.widget-content li{list-style-type:none}.widget .post-body ol,.widget .post-body ul{padding-left:2em;padding-right:0}.Header h1{margin-bottom:0}.status-msg-wrap{margin:0}.status-msg-body{text-align:left}.status-msg-border{border:0}.status-msg-bg{background:0}.gsc-search-box{margin-bottom:0!important}table.gsc-search-box{background:#fff;border-radius:18px;max-width:16em}input.gsc-search-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 .8em;border:0;outline:0;margin-left:0!important;border-radius:18px;font-weight:700;height:2.5em;font-size:14px;cursor:pointer}.gsc-input{padding-right:0!important}input.gsc-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 1em;border:0;outline:0;background:#fff;border-radius:18px;height:2.5em;font-size:14px;width:100%}.cloud-label-widget-content{text-align:left}.label-size{font-size:80%!important;opacity:1!important;display:inline-block}@media(max-width:768px){body{font-size:1.6rem;min-width:0}.container{width:96%;min-width:0}.twitter-timeline{width:770px!important}}@media(max-width:480px){#main.width-100 .container{width:100%}.width-100 #sub-content,.width-100 .breadcrumbs{width:96%;margin-right:auto;margin-left:auto}}


これで、記事本文で<table>タグを使えるようになります。


「初期化処理-*基本いじらない」と書かれているので、少し不安になりますよね。

自分がQooQを使用しているいくつかのブログで試したところ、デザインが崩れたり動作が重くなるといった現象は確認されませんでした。

念の為バックアップをとってから上記を実行し、ブログを見て問題がないか確認してみてくださいね。

自分の確認した限りでは問題ないと思います。



QooQでも表作成ができる!

これでQooQでも、CSSなしHTMLだけで表を作成する方法を使用できます!

QooQで<table>タグが使用できずに困っている場合は、本記事の方法を試してみてくださいね。



にほんブログ村 ブログブログ ブログサービスへ ブログノウハウランキング 

 ※当ブログはアフィリエイト広告を利用しています※

このブログを検索

まとめ記事

現在の使用テーマ

EmporioからQooQ list版に変更しました。(2025年11月)

お問い合わせ

名前

メール *

メッセージ *




QooQ