このカテゴリは 横ならび目次サンプル(2) で表示させ、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは、他のカテゴリの目次ページとは背景を変更して表示しています。また、このカテゴリ固有の説明(作者・出典などの記述)を表示させています。詳しくは「特定のカテゴリの目次に説明などを追加する」「特定のカテゴリの背景を変更する」をご覧ください。
このページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
このカテゴリの記事ページは他の個別記事ページとは背景を変更して表示しています。詳しくは「特定の個別記事ページの背景を変更する」をご覧ください。
 

スポンサー広告

スポンサーサイト

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←novel-PF-Snow 共有申請しましたが不承認! →画像のための記事⑯ (サンプル)
 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png スポンサーサイト
携帯用Novelテンプレート 3kaku_s_L.png スポンサーサイト
表紙ページ 3kaku_s_L.png スポンサーサイト
Novel List 3kaku_s_L.png スポンサーサイト
目次ページ 3kaku_s_L.png スポンサーサイト
小説本文(個別記事)ページ 3kaku_s_L.png スポンサーサイト
イラストリスト 3kaku_s_L.png スポンサーサイト
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png スポンサーサイト
その他・共通ページ 3kaku_s_L.png スポンサーサイト
携帯用テンプレートのカスタマイズ 3kaku_s_L.png スポンサーサイト
テンプレート別のカスタマイズ 3kaku_s_L.png スポンサーサイト
サイト内配布テンプレート 3kaku_s_L.png スポンサーサイト
テンプレートの衣替え 3kaku_s_L.png スポンサーサイト
裏技カスタマイズ 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png スポンサーサイト
novel-tempタイプ 3kaku_s_L.png スポンサーサイト
novel-Sタイプ 3kaku_s_L.png スポンサーサイト
novel-Rタイプ 3kaku_s_L.png スポンサーサイト
novel-Gタイプ 3kaku_s_L.png スポンサーサイト
novel-Jタイプ 3kaku_s_L.png スポンサーサイト
novel-Cタイプ 3kaku_s_L.png スポンサーサイト
素材屋風テンプレート 3kaku_s_L.png スポンサーサイト
疑似フレームテンプレート 3kaku_s_L.png スポンサーサイト
novel-PF2タイプ 3kaku_s_L.png スポンサーサイト
夢小説用テンプレート 3kaku_s_L.png スポンサーサイト
イラストリスト付きテンプレート 3kaku_s_L.png スポンサーサイト
携帯用テンプレート 3kaku_s_L.png スポンサーサイト
一般ブログ用テンプレート 3kaku_s_L.png スポンサーサイト
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png スポンサーサイト
不具合の修正 3kaku_s_L.png スポンサーサイト
その他お知らせなど 3kaku_s_L.png スポンサーサイト
管理人のおススメ 3kaku_s_L.png スポンサーサイト
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png スポンサーサイト
雪の女王 3kaku_s_L.png スポンサーサイト
銀河鉄道の夜 3kaku_s_L.png スポンサーサイト
坊っちゃん 3kaku_s_L.png スポンサーサイト
幸福の王子(夢小説サンプル)  3kaku_s_L.png スポンサーサイト
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
*Edit
   
 

カスタマイズの備忘録

float は甘くない!Firfox と IE では表示が違う!

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←novel-PF-Snow 共有申請しましたが不承認! →画像のための記事⑯ (サンプル)
 
novel-PF-Snowが不承認になったので、その理由が判明するまで、画像のあるテンプレートを作成する気にならず、リクエストを頂戴したnovel-PF-PlainC1の申請のために、細部を調整していたのですが、これが深み(泥沼?)にはまってしまった!
どうせなら、このタイプのテンプレートも互換性をもたせてPFタイプのスタイルシートで衣替えをできるようにしよう!っと思ったまではよかったのですが、そうそう簡単にはいきませんでした。

管理人の前に立ちはだかった新たな壁 その名は float (フロート) !!

これを使うと、ブロックが縦ではなく、横に横にと表示させることができる便利な要素、
使い終わったらclearをかければOK!

てな具合なお気楽で浅~い認識しかなく、今までは、気軽に適当に使っていたのですが、それが甘かった!
そもそも管理人ごときのスキルで、そうそう簡単に使いこなせる代物ではなかったんですよん!

novel-PF-PlainC1は、novel-PF-PlainA1と表紙ページのレイアウトだけが違います。オンマウスでコンテンツが表示されるA1と違い、C1はクリックで表示が切り替わります。また、更新情報だけは最初から表紙ページに表示されています。

月別更新履歴は折りたたんでありますが、PlainC1では最近の更新の下に並んでいます。けれども、新作テンプレートとして公開するなら、デザイン上どうしても、最近の更新の横に並べたかった!そのためにフロートを使ったのですが、これが一筋縄ではいかなかったのです。いくらフロートをつかても、素直に横に並んでくれない。

IEではOKでもFirefoxではNGだったり、Java有効の時はOKでも無効の時はNGだったり、またはその反対だったり、しかも、背景がFirefoxで消えちゃうし…。色々と試してみて、ようやく全ての条件下で横に並んだのですが、安心したのもつかの間、novel-PFタイプのスタイルシートに変えて衣替えをしてみると、コンテンツの表示位置が、右に左に乱れてしまって、もう、しっちゃめっちゃか。
実は、novel-PFタイプでは、JavaScript無効時の表示デザインを整えるために、フロートを使っていたのです。それも、テンプレートによって、フロートを指定しているブロックも、また左右もまちまち…。(し、知らないって怖ろしい…ただただデザインを整えるために行き当たりばったりで使っていた)しかも、新作テンプレでは、デザイン上、JavaScript有効時、無効時、両方の表示にフロートを多用しているし。


再度トライしても、今度は、一向に、全ての条件下で統一されたクリーンな位置取りにすることができません。もう、自力ではお手上げ状態。行き詰った頃に、ようらく、これって、バグのせいなんだろうか?と遅まきながらようやく気づいて調べた所、あったぁ!

フロートの直後の(clear も float もしていない)ボックスには width を指定しないこと(IEバグ対策)。
float を指定したボックスには width を指定すること(仕様上の決まり)。
float で段組を作るには両方のカラム(段)に width と float を指定するのが基本(整形規則の利用)。


フロートを使ってみる より



な~っとくです!
カラム落ちしてレイアウトが崩れているテンプレートを時々みかけますが、これのせいだったんですねぇ!
上のサイトの管理者さまに感謝です。

ということで、フロートの規則性(癖?)も理解できたところで、今度は、スタイルシートを差し替えても対応できるように、第二第三のクラス名を指定して、カスタマイズし直しました。苦労の甲斐あって、今度は、IEでも、Firefoxでも、JavaScript無効時でも有効時でもOK、また、どのスタイルシートに衣替えしても乱れや崩れはなく、まずまず思ったとおりのレイアウトに仕上がりました。
つ、疲れたぁ~~ぜいぜい(・д・;A)…

新作テンプレートnovel-PF2-Plainとして共有申請した後、早速、拙宅適用テンプレで、スタイルシートをnovel-PF-Umeに衣替えしてみました。にまにま眺めていたのですが、またもやトラブル発生!ふとした拍子に、表紙ヘッダー部分に縦スクロールが出現します。う~ん、こりゃぁ、やっぱりフロートの背景トラブルだろうと、今度は以下のサイトさまを再訪。

CSSでfloatを指定したボックスを含むボックスの背景が出なくなる件

理論的にはチンプンカンプンですが、とにかく、フロートの親ボックスである、表紙ページのentryに以下の指定をすることで解決しました。
これまた、管理者さま、大感謝です。ありがとうございます!

#index .entry{
overflow: hidden;
}

#index .entry:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}

/*\*/
* html #index .entry {
height: 1em;
overflow: visible;
}
/**/



衣替えする可能性のあるnovel-PFタイプのスタイルシートには上の内容を追加しておいたほうがよいだろうか…

おまけ

表紙ページは縮小しているとはいえ、50~80の大きめ、重めの画像を用いていることが多いです。novel-PF2-Plainの表紙メニューは、ボタンによってオンマウスや、クリックで表示が切り替わり、JavaScriptも多用しています。管理人は実感できないのですが、もしかしたら、そのせいで、表示が重くなっているかもしれません。もしも、フリーズしてしまったという場合は、衣替えはしない方が無難かもです。
関連記事
スポンサーサイト


Yahoo!ブックマークに登録 このエントリーをはてなブックマークに追加Buzzurlにブックマーク
総もくじ  3kaku_s_L.png テンプレートマニュアル共有テンプレート画像のためのカテゴリ
テンプレートについて 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
携帯用Novelテンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
表紙ページ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
Novel List 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
目次ページ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
小説本文(個別記事)ページ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
イラストリスト 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
全記事一覧ページ(All Titlelist 総目次) 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
その他・共通ページ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
携帯用テンプレートのカスタマイズ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
テンプレート別のカスタマイズ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
サイト内配布テンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
テンプレートの衣替え 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
裏技カスタマイズ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
総もくじ  3kaku_s_L.png テンプレート一覧共有テンプレート画像のためのカテゴリ
novel-templateタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-tempタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-Sタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-Rタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-Gタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-Jタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-Cタイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
素材屋風テンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
疑似フレームテンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
novel-PF2タイプ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
夢小説用テンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
イラストリスト付きテンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
携帯用テンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
一般ブログ用テンプレート 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
総もくじ  3kaku_s_L.png テンプレート情報共有テンプレート画像のためのカテゴリ
バージョンアップや改訂内容 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
不具合の修正 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
その他お知らせなど 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
管理人のおススメ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
もくじ  3kaku_s_L.png 未分類
総もくじ  3kaku_s_L.png 小説サンプル(親カテゴリ)共有テンプレート画像のためのカテゴリ
風立ちぬ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
雪の女王 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
銀河鉄道の夜 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
坊っちゃん 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
幸福の王子(夢小説サンプル)  3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
総もくじ  3kaku_s_L.png 画像のためのカテゴリ共有テンプレート画像のためのカテゴリ
人物イラストのためのカテゴリ 3kaku_s_L.png float は甘くない!Firfox と IE では表示が違う!
 ランキングに参加中 ~応援(クリック)していただけると嬉しいです~ 素材専門検索サイトsozai-R 素材専門検索サイトsozai-R ジャンル:SKIN配布
にほんブログ村 ブログブログ ブログテンプレートへ にほんブログ村 ブログテンプレート
0574 Web Site RankingWebサイト作成支援系    0574 Web Site Ranking ジャンル:Webサイト作成支援系 ブログテンプレート
参加しているのは、ブログテンプレートや小説サイト関連のランキングなので、もしかしたらリンク先で、皆様のお役に立つ情報も見つかるかもしれません♪
   

~ Comment ~

おつかれさまでした……、

Novelテンプレさんのテンプレートは構造が複雑なので……、バグとであったときも切り分けが大変ですよね。さらっと記事にしていらっしゃるけど、原因究明はご苦労あったのでは。お疲れさまでした。
カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←novel-PF-Snow 共有申請しましたが不承認!    →画像のための記事⑯ (サンプル)

名前変換フォーム

Script by
ブログで夢小説!ユメミル?
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。