先日から何度かJavaScriptで作成した迷路をこのブログで公開していますが、迷路が主であるはずの迷路ブログの方では未だに公開していません。
その理由は下記で公開していますが、JavaScriptで生成した迷路が何故か迷路ブログでは幅が自動調整されて表示崩れが発生していました。
表示崩れを直すために1週間以上悩み、ブログの設定だったり、htmlタグだったりを色々といじってみたのですが、一向に改善されない状態が続きました。
そしてついに、ブログテーマで設定されているCSSに手を付けることになりました！
結果として、CSSが迷路の表示崩れの原因でした。
はてなブログでブログを公開されている方の多くは、ブログのデザインをはてなブログのデザインテーマ（テンプレート）から選び、使用していることと思います。
私も、このブログであればLife、迷路ブログであればNovelというテンプレートを使用していました。
Novelというデザインテーマを使用している人であれば、『デザイン＞カスタマイズ＞デザインCSS』に下記のように、cssファイルがインポートされています。
/* <system section="theme" selected="novel"> */
@import "/css/theme/novel/novel.css";
/* </system> */
このimportされているCSS、はてなブログの基本URLである「http://blog.hatena.ne.jp」の後ろに追加するとCSSの中身を見ることができます。
つまり、私が迷路ブログで使っていたCSSの中身を覗くためには
「http://blog.hatena.ne.jp/css/theme/novel/novel.css」
のURLへ飛べば中身を見ることができます。
そして、この中身を全てコピーし、『デザイン＞カスタマイズ＞デザインCSS』に貼り付けると、importすることなく、はてなブログのデザインテーマを使用することができます。（@import "/css/theme/novel/novel.css";は削除しておきましょう）
そして、ここから表示崩れを修正するためのCSS修正が始まります。
（CSSを全量載せようかと思ったのですが、1万文字以上あるため断念しました）
【変更前】自動で<table>タグ中の幅を整えてくれていました。
私の迷路はJavaScriptで<table>タグを生成することで迷路のマスを表示しています。
CSSでいうと下記の部分が怪しい。
table{width:100%;margin:16px 0}.entry-content
ということで、上記の文言を丸々削除しました。
これで<table>タグで指定したエリアの幅は自動調節されなくなりましたが、まだ<table>タグ中の各マスが横太でした。
そこで、次に着目したのは下記。
th{padding:12px 15px 8px;border:1px solid #ddd}
3種類も余白を指定していたので下記のように1種類に変更しました。
th{padding:8px;border:1px solid #ddd}
この2ヶ所に変更を施したところ・・・
【変更後】指定した余白で<table>タグ中の表示ができました。
無事、JavaScriptで書いた迷路が表示できるようになりました！
これから、私の迷路ブログの方でもJavaScriptを使用した迷路を投稿していきます！
今回、初めてはてなブログのデザインテーマ（テンプレート）を展開して触ってみるということをしましたが、デザインテーマ（テンプレート）を自由に編集できることは多くのはてなブロガーさんに広まって欲しい内容です。
どんどんオリジナルの設定ができるブログが増えて欲しいです！
