人気ブログランキング |

強引に表を表示

掲示板で「表を表示したい」という課題。

《eXcite》Blogは、HTMLで表を作るためのtableタグが、記事中で使えません。
《eXcite》Blogは、Blog自体がtableタグでレイアウトされていて、記事にtableタグを入れようとしてミスると全体レイアウトが崩れる……せいじゃないかと勝手に思っているんですが、、、

というわけで、裏技。
スキンとして強引に表示する。
[完成見本]





  1. テーブルタグは普通に書きます。
    (オンラインツール↓もあります/ワタシは使いませんでしたが^^;)
    http://table.drawing.jp/
  2. スキン変更→適当なスキンの[編集]→[スキン編集を始めます!]→トピックを選んで[編集]
  3. HTML,外枠部分の一番上に、
    <div style="display:none;">
    と入れます。一番下に
    </div>
    と入れます。これで、通常のブログ本文などは表示されなくなります。万一にも問題になるとイヤなので、<$banner type=1$>だけは、<div style="display:none;">より上に移動して、表示するようにしてみました^^
  4. 最初に入れた
    <div style="display:none;">
    の 上 に、用意したtableのタグを入れます。
  5. スキン保存します。
  6. 設定メニュー中、スキン変更の画面のソースを表示し、
    「?eid=」
    を探してください。
    「?eid=xXXXXXXX」
    こんな感じでIDが表示されます。
  7. ブラウザのアドレス欄に
    http://www.exblog.jp/blog/blog_preview.asp?eid=[ご自分のeid]&depth=[マイスキン番号]&fmt=myskin
    と入れると、作成した表が呼び出せます。マイスキン番号はお手数ですが、1から順番に見ていってください^^;
    いままでスキン作成をしていなければ、1じゃではないかと思うのですが。
  8. この画面へのリンクをはることで、閲覧客に表を見せることが可能です。
  9. あくまでプレビューの流用ですので、表のなかに「リンク」を貼っても無効化されてしまうことに、ご注意ください。


表がデータとして価値のあるもので、他の方のサイトやブログから直リンクされる可能性がある場合、表の解説記事のURLを画面のどこかに入れておくことをオススメします。

(見本では元のスキンにあったCSSは全て消して、下記のものだけ入れてます)
body{margin:50px;}
h1{font-size:100%;}
table {font-size: 88% ;line-height:1.3; border:1px solid #666;
border-collapse: collapse;
border-spacing: 0px;
empty-cells:show;}
thead{background:#eef;}
td{padding:4px; border:1px solid #aaa;}

意味は『HTMLクイックリファレンス』ででも^^

 ■

これ以外の方法として、divタグで表もどきを作るというワザを見たことがあります……、
根性ダト思ッタ^^