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

カスタマイズの備忘録

画像をクリックすると直接テンプレートがプレビューされます。
テンプレート名»»をクリックするとテンプレートの解説記事が開きます。
写真 イラスト 花 など用いている画像についてのタグ(Template Image Tag)を
クリックすると、該当するテンプレートが表示されます。
このカテゴリは イラストリスト付きテンプレートの画像用目次サンプル(2) で表示させています。
詳しくは 「イラストリストの説明」と「特定のカテゴリの目次で画像を一覧させる」をご覧ください。
この作品は夢小説のサンプルですので左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。ブログ夢小説パーツ「ユメミニ」は夢小説用テンプレートに実装されています。
公開中の夢小説用テンプレートはコチラ    詳しくは夢小説用テンプレートの設定をご覧ください。
このカテゴリは イラストリスト付きテンプレートの画像用目次サンプル(2) で表示させています。
詳しくは 「イラストリストの説明」と「特定のカテゴリの目次で画像を一覧させる」をご覧ください。
このカテゴリは 横ならび目次サンプル(1) で表示させています。二桁の数字が一列に10づつ並びますので、記事タイトルが番号のみのカテゴリにはおススメです。 番号タイトルが一桁の場合は、番号の前に を前にいれると揃います

Index ~作品もくじ~


  • 98
  • 349
  • 348
  • 347
  • 99
  • 350
  • 281
  • 370
  • 524
  • 525
  • 542
  • 560
  • 675
  • 676
  • 679
  • 694
  • 729
  • 749
  

公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-G-mono1を公開中。


s301-mono1個別記事通常ブログ画面

画像はEGPさまからお借りしました。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-mono1
»»  2009.04.28.

公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-J-mono2を公開中。
表紙ページ(別窓)

Novel List(別窓)個別記事ページ通常ブログ画面

硬質な歴史ファンタジーが似合いそうなテンプレート。
画像は、写真がEGP様、イラストはMako'sさまからお借りしました。
2009.4.25リニューアル(表紙画像がランダムに変わります)詳しくは こちら

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-mono2
»»  2009.04.29.

公開終了。
2011.7月現在、ブロックでリメイクした同デザインのリニューアルテンプレ
novel-G-china1を公開中。
表紙ページ(別窓)

Novel List(別窓)個別記事ページ通常ブログ画面

赤が鮮やかな、中華風テンプレート。個別記事ページと通常ブログ画面には、記事の右下部分に三種類の画像がランダムに表示されます。
画像は双子屋工房さまからお借りしました。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-china1 中華風テンプレート
»»  2009.05.07.

公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-G-china2を公開中。
表紙ページ(別窓)
Novel List(別窓)個別記事ページ通常ブログ画面

龍が表紙、黒が基調の色違いパージョン。双子屋工房さまの作品だけではなく、MiraclePageさまからも背景とテキストボタンをお借りしました。個別記事ページの追記の背景には透かし彫りの龍の姿が表れます。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-china2 中華風テンプレート
»»  2009.05.07.

公開終了 ブロックでリメイクした
novel-G-black1 を公開中

目次ページ(別窓)Novel List(別窓)個別記事ページ通常ブログ画面

Mako'sさまのお宅の、見目麗しく艶かしいびせーねんにご登場いただいたテンプレート。おタンビなBL系作品が似合いそう♥…(*´艸`)きゃっ!表紙ページは髪の色が違う三枚の画像がランダムに表示されます。
novel-10-black1
»»  2009.05.07.

公開終了。ブロックでリメイクした
novel-G-black2を2011.秋公開予定

こちらは同じくMako'sさまのお宅の、妖艶な美女たちにご登場いただいております。表紙画像をクリックすると一番最初の記事に飛ぶのは[black1]と同じですが、[black2]は、表紙ページだけではなく、NovelListも目次ページも、個別記事ページも、画像がランダムに変ります。

目次ページ(別窓)Novel List(別窓)個別記事ページ

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-black2
»»  2009.05.08.
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も多用しています。管理人は実感できないのですが、もしかしたら、そのせいで、表示が重くなっているかもしれません。もしも、フリーズしてしまったという場合は、衣替えはしない方が無難かもです。
float は甘くない!Firfox と IE では表示が違う!
»»  2010.02.25.
画像ボタン含むGタイプPタイプ衣替えのための変更箇所

表紙月別更新
.rireki{text-align:right;}

月別アーカイブページ・検索ページ下部
</div><br /></div>→</div></div>

通常ブログ・月別アーカイブページ・検索ページ下部

<div align="right"><a href="#pagetop" title="↑ページトップへ"><i><small>▲PageTop</small></i></a></div>
<br />

<p class="back-top" ><a href="#pagetop" title="↑ページトップへ">▲PageTop</a></p>

カテゴリ・タグ・全記事一覧・ページナビゲーションliにクラス名追加
<!--not_permanent_area--><!--not_edit_area-->
<!--not_page_area--><!--not_date_area--><!--not_search_area-->
<ul class="entry_navi">
<!--prevpage--><li class="back"><a href="<%prevpage_url>">Back</a></li><!--/prevpage-->
<!--nextpage--><li class="next"><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul>
<!--/not_search_area--><!--/not_date_area--><!--/not_page_area-->
<!--not_titlelist_area--><!--not_category_area--><!--not_tag_area-->

個別記事ページコメント欄
<li class="entry_top"><a href="#h2_<%pno>" title="↑記事冒頭へ"> ▲EntryTop </a></li>

全記事一覧

<div align="right"class="co_num<%category_count>"><a href ="#pagetop" title="↑ページトップへ"><font style="font-size:80%"> <i>PageTop</i></font>▲</a></div>



<p class="back-top"class="co_num<%category_count>"><a href ="#pagetop" title="↑ページトップへ">PageTop▲</a></p>

#titlelist p.back-top {font-size:80%;text-align:right;}

スクリプト
if(list.length > 0) document.write('<ul class="co_num<%category_count>">');


スタイルシート IE6バグ対処
/*投稿フォーム:ラベル*/
dl.co_form dt label {
position : absolute;_position : absolute;_position: static; text-align : left;
width : 50px;font-size: 90%;
}


上を以下に変更↓

/*投稿フォーム:ラベル*/
dl.co_form dt label {
text-align : left;position : absolute;
width : 50px;
}
#permanent dl.co_form dt label{_position: static;
}



↓古書テンプレHTML対応用にnovel-Rタイプに以下を追加
.all{overflow: hidden;}

2011.6.23.
変更個所覚書
»»  2011.06.23.

background-attachmentをIE6に対応させる方法
* html #contents {
background-position: expression('10px '+this.parentNode.scrollTop + 'px');
}
CSS Lecture



display:block した a 要素(リンク)を IE6 でも安定させる方法

width プロパティで横幅を指定してあるセレクタにoverflow : hidden; を追加

はじめてのブログデザイン




リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」

いないいないばあバグの対処法
1.問題の出る要素を囲っている div に line-height を指定する。
2.問題の出る要素に width または height を指定する。
3.問題の出る要素の中の要素に position:relative を指定する。



ネガティブマージンをIE6.0でも使う
ポイントになるのが「position: relative;」の部分です。
IE6.0対策になるのですが、IE6.0ではネガティブマージンを使っても、
「ー(マイナス)」部分のピクセルは表示されません。
「position: relative;」を併記することによって、
(なぜか)SafariやFirefoxのように、きちんと表示してくれます。
「ポルカの日記 | CSSベースのHTMLレイアウト入門講座」




IE6でposition:fixedの真似ごと
IE6のバグのまとめ.
WinIE6バグ回避法
IE6で、マージンが2倍になってしまうバグ
IE6でよく遭遇する6つのバグとその解決方法
IEのhasLayoutで起こる不具合
CSSハック一覧 – IE, Firefox, Safariなどなど


IE6以下をIE7と同じようにするライブラリ『IE7.js』
IE7.js/IE8.jsを使って、スタイルシートの標準化

2011.6.25.
IE6バグと対処法あれこれ
»»  2011.06.25.
J・Jfタイプのテンプレートでサイトナビの配置を top:0 left:0 で、画面上に移動して表示させた場合、ページ内リンクを使うと、サイトナビは検索バーの下に隠れて見えなくなってしまう。

対処法その1 検索バーを非表示に設定する。 
対処法その2 コンテナ上部にマージンを指定して、サイトナビの表示位置を下にずらす。
.container { margin-top : 20px ; }

PageTopへのリンク

アンカーの位置によっては、特定のテンプレートやプラグザでリンクが無効になってしまう。
フルスクリーンやクロスフェード表示のために画像タグが原因らしいが、
<class="all"> ~ </div>を用いたJ・Jfタイプのテンプレートにその傾向がある。


とりあえず、アンカーの位置を変更すれば直るので、個々のテンプレートごとに、行き当たりばったりで直している現状。

ブラウザごとにテンプレートを照合し、リンクが無効になる場合のアンカーの位置を確認する必用あり。

<body>
-----------(A1)-----------

<!--フルスクリーン表示のための追加ソース-->

-----------(A2)-----------

<div class="all">

-----------(B)-----------

<div class="main">

-----------(C1)-----------

<!--(表紙)クロスフェード表示のための追加ソース-->

-----------(C2)-----------


<div class="container">

-----------(D)-----------



<a name="pagetop" id="pagetop"></a>

novel-JF-HatuAkiの場合 
A1 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
A2 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
B  IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
C1 IE8のみ 表紙のみ✕ IE8以外はOK
C2 IE8とIE9 表紙のみ✕ IE8.9以外はOK
D  IE8のみ 表紙のみ✕ IE8以外はOK


IE6で、ブロックmainより外側(A1(A2)(B))にアンカーを設置してもページ内リンクが無効になるのは、ダブルスクロールを防止するために、.all や body ・ html 等に指定した _over-flow:hidden が原因と思われる。

また、.main以下のブロック(C1)(C2)(D)に設置した場合、表紙ページで、IE8やIE9でページ内リンクが無効になる原因は、間違いなく、クロスフェードのソースにある。

しかし、クロスフェードソース(ブロック#gallery3 )直下のブロック(.container)にアンカーを設置した場合(D)に、.container{position:relative}と指定しているにも関わらず、なぜ、IE8でページ内リンクが無効になるのかその原因は不明。

考えられる対策その1 
IE6のページ内リンクをあきらめるか、ダブルスクロールを我慢して、mainより外側(A1(A2)にアンカーを設置する。

考えられる対策その2
main内(C1)にアンカーを設置した上で、スタイルシートで、IE8で #pagetop の配置指定を追加する。今のところ、この方法が一番有効。

#index #pagetop { position : absolute ; /position : static ; z-index:100 ; top: 0 ; left : 0;}


通常ブログ画面で記事下部へのアンカーが効かない場合
原因:半角スペースを削除したせいか、ブラウザ(IE8)によってはアンカーが無視されてしまう
対策:paddingを設定することで着地点の領域を確保し、認識させる
#page ul.entry_state + a {width:10px;padding:2px;}
ページ内リンクあれこれ
»»  2012.09.07.

左右カラム可変 リキッドレイアウトサンプル



幅 600px 右サイドメニュー



html { _overflow-x: scroll; }/*IE6 縮小画面の時の横スクロール用*/

.container {
margin : 0px auto ;
max-width : 600px;_width : 600px;
text-align : left ; }

.layout_main {
float : left;
width : 65%;_width : 400px; }

div.layout_side {
float : right;
width : 30%;_width : 180px; overflow: hidden;}


ポップアップ表示 基準は#wrapper スクロールと連動


#wrapperを基準にホップアップさせた場合、position:absoluteを指定しても親ブロック(.main)で_position: relative を指定しておかないと、IE6では表示位置が固定されてしまい、縮小画面にした時見えない部分が出来るので注意

#index .all .main { _position: relative ; }/*IE6ポップアップ固定防止のため*/

#index .all #wrapper { position: relative;_position:static ; }

.popupcard { width:67%;max-width:400px;_width:400px;
right: 30%; top:40px;_top:320px;_right:50%;
z-index:1; visibility:hidden; position:absolute;text-align:center;
}

.layout_side .popupcard { margin:0 ;background-image :none ;}

.popupin {
max-width:300px;_width:300px;
margin:40px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:5px 10px;text-align : center ;
border:line-height:200%;background-color:#ffffff;border:3px double #C2A858 ; }

#step2 .popupin { margin-top:20px;max-width:350px;_width:350px ; }

.popupin2 {
max-width:320px;_width:320px;max-height:200px;_height:200px;overflow: auto;
margin:20px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:0 1em 0 1.5em;text-align : left ;
line-height: 150%;
background-color:#ffffff;border:3px double #C2A858;
}
.layout_side .popupin2{max-height:220px;padding:1em ;_position: relative ; }

.popupcard h3{
margin:0 auto ;_margin : 0px -100px 0 auto;_width:400px;
padding : 0px ;font-weight: bold;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;
}
#index .side_menu .popupcard h3{
max-width:400px;_width:400px;_position: relative;_margin : 20px -100px 0 auto;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;}

.pop_free {max-width:350px;_width:350px;margin-top:20px;max-height:350px;_height:auto;line-height:150%;overflow: auto;text-align : left ;
}

/*背景画像の表示領域を確保するための設定*/
#index .topindex { min-height:〇〇px;_〇〇px ; }
hr.bg_line { visibility:hidden; }/*トップ画像が一枚絵展示スタイル*/

hr.bg_line { dispaly:none; }/*一枚絵展示でなければ非表示設定でOK*/

GタイプJタイプ対応のための背景設定


/*#wrapperで背景指定する場合*/

#index .all div#wrapper {
min-height:〇〇px;_height:〇〇px;
background-image : url("画像ファイル");
background-repeat : no-repeat ;
background-position : left bottom;}


#index .all div#wrapper {overflow: hidden;}

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

/*\*/
* html #index .all div#wrapper {
height: 1em;_height:1em;
overflow: visible;
}
/**/
サンプルコード
»»  2012.09.09.

body 直下のボックスを中身がなくても、画面下まで背景を表示させる(PF/PF2タイプ以外)



(1)全てのエリアでmain背景を上から下まで表示させる

最大幅を指定していない場合
dt7_novel-template, novel-S-spring, novel-S-muguet, novel-S-blue, novel-S-laceなど


html { height:100%;_overflow: hidden;_overflow-x: scroll; }

/*全てのエリアでmain背景を上から下まで表示させる場合for JGfor JG*/
html.index,html.page,html.date,html.search,html.tag,html.category,html.edit,
html.permanent,html.titlelist
{ overflow: hidden;_overflow-x: scroll ; }


html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height:100% ; overflow : hidden ; } /*for JG*/

body > .all { height:100% ;}

.main { height:100%; min-height:100%; overflow:auto ; }

body > .main { height:auto ; }


#index .all .main{/overflow:hidden;_overflow:auto ;}


ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとなる
  • body と all を height:100% で固定しているので、JGタイプもJGタイプ以外も全て背景は main の指定によって下まで表示される。
  • しかし、最大領域を指定しているテンプレートの場合、上では指定した横幅の位置にスクロールが表示されてしまう為、その場合は(4)の方法で指定する


最後の#index .all .mainの指定は不要な場合もあるが、スタイルによってはJGタイプに変更時IE7で、縮小画面の内側にダブルスクロールが出る事があるのでそれを防ぐ為に一応記述
#index .all .main { /overflow : hidden ; _overflow : auto;}/*for IE7JG*/

JGタイプの場合、mainで指定した中央表示の背景は、(スクロールの幅だけ)若干右にずれて表示される。中央部が狭い背景画像は、そのずれが目立つので注意。

(2)個別記事エリアだけでmain背景を上から下まで表示させる場合


ほとんどのテンプレートがこれ。背景をフルスクリーン表示させている時も共通。
以下は個別記事エリアのmain背景だけを上から下まで表示させる場合。


html { height : 100%; _overflow: hidden ; _overflow-x: scroll; }

/*個別記事エリアfor JG*/
html.permanent { overflow : hidden ;_overflow-x : scroll ; }

html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height : 100%; min-height:100%; overflow:auto;_overflow : hidden ;} /*for JG*/

body > .all{ height:auto; }

#permanent > .all { height : 100% ; }

.main { height:100%; min-height:100%; overflow:auto;}

body > .main{ height:auto; }


#index .all .main { /overflow : hidden ; _overflow : auto ;}



フルスクリーン表示の時はmain に position :relatvie を追加
.main{ height:100%; min-height:100%; overflow:auto;position: relative;}


(3)最大幅を指定していない個別記事以外のエリアでmain背景を左下もしくは中央下まで表示させる場合

novel-R-Papillon,novel-S-pumpkin1, novel-S-icyou, novel-S-rose, novel-S-berryなど

(2)の基本コードに 個別エリアと同じように記述して追加。以下は全記事一覧ページmain背景を左下もしくは中央表示させる例

/*背景を上から下まで表示させるエリアfor JG*/
html.permanent , html.titlelist { overflow : hidden ;_overflow-x : scroll ; }

#permanent > .all { height : 100% ; }
#titlelist > .all { height : 100% ; }



(4)最大幅を指定している個別記事以外のエリアのmain背景を上から下まで表示させる場合


novel-Rf-Jyugoyaシリーズなど右寄せのデザインなど最大横幅を指定してある場合、(3)の方法では幅広パソコンなどで閲覧した場合、最大横幅の位置に縦スクロールが表示されてしまう。
これを避けるために、最大横幅を指定してあるエリアは、(3)の方法ではなく、(2)の基本コードのまま、maine と all の指定で調整する。
main で背景を右下まで表示させており、なお且つ最大幅を指定しているエリアは main と all で重複指定し、その上で、.all .main つまり、JGタイプのの時の main 背景を非表示に指定する。

/*最大横幅を設定しているエリア用*/
#index ,#category,#tag,#page ,#date,#search ,#edit {max-width:1400px;}

#index .main,#index .all{
background-color : transparent;background-attachment: scroll;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6_700.jpg"); background-position: right top;background-repeat: repeat-y;}

#page .main,#page .all{
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6b_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#search .main,#search .all,#date .main,#date .all
{background-color : transparent;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane4_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#index .all .main,#page .all .main,#searach .all .main,#date .all .main,
{background-image :none;background-color : transparent;}




(5)最大幅を指定している全記事一覧ページのmain背景を右下まで表示させる場合


(2)と(3)のコードに加え、以下を追加


#titlelist{overflow : hidden ;}
#titlelist .main{ height:100%; overflow:auto;}


#titlelist .sub_block {
margin:0; padding:0; width : 180px ; height:100%;
right : 620px ; top : 0;
position:absolute; z-index : 4 ;overflow:auto;text-align : center;
}


最大横幅を指定した上で、sub_block を コンテナのすぐ左に表示させるには、position:fixed ではなく
absolute で指定する必用がある。しかし、absolute で指定すると、sub_block が固定されず、画面に連動して上下してしまう。それを避けるために、ボディのスクロールを非表示にした上で、main と sub_block の高さを100%で固定し、それぞれ別個にスクロールさせる。但し、全記事一覧ページはサブボックスがあるため、最大幅の位置にどうしても縦スクロールが表示される。
ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとして背景は下まで表示される。
  • mainを左下もしくは中央下まで表示させる場合、個別記事や全記事一覧・目次ページなど、
    sub_blockがあるエリアでは、all での代替え指定はできないため、
    他のエリアとはコードが違ってくる。



補足



JGタイプの時IE6で、縮小画面がダブルスクロールになる場合は、以下を追加
html.index{_overflow-x:hidden;}/*for IE6JG*/
JGタイプの時IE7で、縮小画面に横スクロールが出る場合は、以下を追加
html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

Jタイプの時IE6で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加
.all .main{_position: relative;}/*for IE6JGスクロール固定防止の為*/
Jタイプの時IE6 と IE7 で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加

.all .main{/position: relative;}/*for IE6&IE7JGスクロール固定防止の為*/
修正版ボックス背景全面表示とスクロールの覚書ver1210
»»  2012.09.21.
去年の秋から、手がけ始めたスマートフォンテンプレート。

九分どおり出来上がってはいたのですが、完成を目前に、暗礁に乗り上げてしまいました。
頭が煮詰まってしまったので、しばらく間を置こうと、無責任にも、そのままの状態にしておいたのですが、数か月を経て、トリ頭の管理人は、スマホ用テンプレの完成している部分の詳細までぼやけつつあります。

これはマズイ!
ということで、とりあえず備忘録のつもりで、スマホ用テンプレの現状、問題点など整理しておきます。

問題点その1
スマホ用テンプレは、表紙ページと通常ブログ画面の第1ページ目を区別できない。
双方とも、同じインデックスエリアとされてしまう。

問題点その2
スマホ用テンプレは、タグエリア・タイトルリストエリア・検索エリアを表示できない。

問題点その3
スマホ用テンプレの記事一覧ページの表示件数の上限は10件である。

問題点その4
スマホ用テンプレは、一部の旧サーバーブログでは、反映されない非公開変数がある。

問題点その5
旧サーバーブログで反映されない非公開変数は、新サーバーブログでも、IEでは反映されないため、プレビュー等で確認できない。(IE以外で確認すれば済むけれど厄介)


スマホ用テンプレートは単独では小説用として機能させるのは難しいため、一般用として共有公開する。
小説用とする場合は、パソコン用のテンプレートと併用して使用する。

スマホ用の小説テンプレート(spメイン)と、それと併用して用いるパソコン用テンプレート(spサブ)のHTMLはサイト内配布する。


問題点その1~その3の解決のため、スマホ用小説テンプレでは、通常ブログ画面の第1ページ目・タグエリア・タイトルリストエリア・検索エリアはパソコン用テンプレートのプレビューページで表示させる必用がある。

一般テンプレートとして公開する事を考えると、表紙と通常ブログ画面第1ページ目はID指定による表示の振り分けができなくなる。よって、表紙と通常ブログ画面第1ページ目ではクラス名を変える必用がある。同じクラス名は使えない。

一般用はサムネイル画像が表示されるスタイルで公開するが、小説用は表示させない。


問題点その4~その5について
反映されない非公開変数とは、スマホテンプレでのみ有効な、記事内に画像が有る場合にサムネイルを表示する変数<%topentry_image_72><%topentry_image_w300>のこと。

昨年秋、ちょうど管理人のスマホ用テンプレが出来上がりかけた頃に公開された以下の公式テンプレートは、本来であれば、サムネイル画像が表示される。
new_basic_red
basic_black_st
basic_black_bt
しかし、一部の旧サーバーブログではサムネイルが表示されない。
スマートフォンテンプレート難航中
»»  2013.01.20.

月別アーカイブページパン屑リスト


月別アーカイブページにおいて、変数<%subtitle>の表示内容の改訂によりパン屑リスト及びStileKeeperのスクリプトが無効になってしまった。(以前は記事の更新年月日の数字のみに変換されたが、現在は、年月日の漢字も表示)

例2014.1.1.に更新された記事
改訂以前 20140101  現在 20140101
色々試してみたが、難航中。自力では歯が立たない場合は作者様に相談。
 

一ヵ月更新がない場合の指定追加


HTML


<!--▽月別アーカイブページ・検索ページ下部-->
<!--not_index_area--><!--not_permanent_area--><!--not_category_area--><!--not_page_area--><!--not_tag_area--><!--not_edit_area-->
<!--not_titlelist_area-->
<!--topentry-->
<div class="entry-body kakusi<%topentry_category_no> ad<%topentry_no>">



ヘッド内CSS



li.ad,tr.ad,ul.nl li.ad,ul.entry_list li.ad{ display: none; }

Monthly_Rf_Jyugoya


外部ファイルCSS

<!--以下は月替わりスタイルシート設定-->
<!--permanent_area--><!--topentry-->
<link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%topentry_month>.css" type="text/css" rel="stylesheet" />
<!--/topentry--><!--/permanent_area-->
<!--not_permanent_area--><link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%now_month>.css" type="text/css" rel="stylesheet" /><!--/not_permanent_area-->
<!--月替わりスタイルシート設定ここまで-->






以前?の改訂の取りこぼし
コメントリストの見出し、HTML は h4 で、スタイルシートは h3 で指定している。
.comment-list h4

PFタイプ fieldsetフォントが変



#permanent .index-navi fieldset

PFタイプ2013.5.26.修正


アンカーの調節のためにネガティブマージン指定
全記事一覧ページの見出しミス修正と<h2>→<h3><h3>→<h4>


<!--category_nosub--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_nosub-->
<!--category_parent--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_parent-->
<!--category_sub_hasnext--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_hasnext-->
<!--category_sub_end--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_end-->


.entry_all ul {
margin : 0px 10px 20px 20px;
padding : 0px 0px 0px 20px;
list-style-type : square;;
}

ver1303


コメント・トラックバック共に受け付けない場合layout_side2ブロックとnavi_4を非表示
head内スタイルシートに以下を追加

#permanent .cm-tb-{display:none;}

layout_side2 と navi_4のクラス名を追加して以下に変更
<div class="layout_side2 cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry-->">

<div class="navi navi_4<!--permanent_area--> cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry--><!--/permanent_area-->">


通常ブログ画面のIE6バグ対処法

entry背景が領域を超えて表示される場合は、高さとアンカーのための下パディングを指定する。
この時、下パディング分の1pxがメインカラム背景色と相反して目立つ場合は、ul.entry_stateにネガティブマージンを指定して隠す。

#page .entry{margin : 0px;
_height:1px;_padding-bottom:1px;/*IE6バグ対策*/}

#page ul.entry_state{_margin-bottom:-1px;/*IE6バグ対策*/}

ver1302


サムネイル表示変数を追加
HTML
タグエリア

<div class="entry_text4">
<!--body_img--><%topentry_image><!--/body_img--><%topentry_discription>
<p align="right">

月別・検索ページ
<div class="entry_text">
<p align="right"><%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_youbi>)</p>
<div class="entry"><!--body_img--><%topentry_image_72><!--/body_img--><%topentry_discription></div>

CSS
追加

.entry_text4{min-height:1px;}
.entry_text4 img {height: 150px;width:auto;float:left; overflow: hidden;margin:0;padding:0;border-right:5px solid #f0f8ff;}
#date .entry img,#search .entry img
{float:left;height: 90px;width:auto;margin:0;padding:0; border-right:5px solid #fff4dc;}


変更

#tag p.back-top ⇒.tag-frm1 p.back-top
#tag h2 ⇒.tag-frm1 h2

タグエリアが羊皮紙の場合
div.tag-frm2 { margin : 0 auto;text-align:left;max-width:580px;_width:580px; }

.entry_text4 {
max-width : 470px;_width : 470px;max-height : 150px;_height : 150px;
margin : 20px auto 10px auto ;
padding : 20px 4% 10px 4% ; line-height : 170%;
background-color : #f0f8ff;
font-size : 90%;
border : 1px dotted #C2A858 ;overflow:auto;
}


/*<<もくじ*/
.mokuji a{ color : #900000; font-weight : bold;}
.mokuji a:hover{ color : #ffffff; font-weight : bold; background-color:#006400;}

p.tag_btm{margin : 0 auto; max-width:580px;_width:580px;line-height:100%;}
.tag-frm1 a{background-color:#f3e5c0}

月別・検索が羊皮紙カードの場合

#date .entry,#search .entry {margin : 0px auto;padding:0;max-width:430px;_width:430px;
height:130px;overflow:auto;}

#search p.back-top,#date p.back-top{
font-size:1%!important;margin:20px 0 0px auto;width:70px; background-image : url("http://blog-imgs-62.fc2.com/n/o/v/noveltemplate/seal_dokuro75.gif"); background-position:right center;background-repeat:no-repeat;overflow : hidden; }

#date .entry-body h4,#search .entry-body h4{max-width:480px;margin:0 auto;text-align:right;}

ver1301

.sub_block関連エントリー と関連目次一覧 を折りたたみ

.sub_block {height:100%;overflow:auto;} 追加
#category div.sub_block {text-align : center;position: absolute;} 削除
#category .sub_block_in {padding-top:0em;} 削除



ボックス表示風にする場合は、関連目次一覧のための追加設定 を以下に差し替え

#category div.sub_block .side_menu{margin:0;}
#category div.sub_block .movecat {background-color : #fff;}
#category div.sub_block .movecat fieldset {margin:0;padding:0 0 0 1em;border:none;}
#category div.sub_block .movecat a{display:block;}
#category div.sub_block fieldset a:hover{color : #fff;background-color : #900;}
#category div.sub_block legend {width:170px;background-color : #fff;font-size:16px;}
span.ichiran-p {font-weight:bold;border-bottom:2px dotted #C2A858;font-size:110%;}
span.ichiran-p a:link,span.ichiran-p a:visited { color : #800080; text-decoration : none;}
span.ichiran-p a:active, span.ichiran-p a:hover{ color : #000000; text-decoration : none; background-color:#fff;}



横スクロールバーが出ている場合は以下を削除

#category div.sub_block {width:180px;}



全記事一覧ページ.sub_block top リンクのアンカー変更

Jタイプクロスフェード追加ソース2 挿入位置

novel-S,novel-Rタイプ以外に、navi_2,navi_4 改行追加

コメント編集時のテキストエリア 高さ指定(height:300px;)追加

#edit dl.co_form dd textarea#comment{
width:95%;max-width : 600px;_width : 600px;height:300px;}



ver1212

改訂テンプレート:novel-Iタイプ
改訂内容:表紙ページ noscript部分を分離し、#index .layout_mainで背景を指定する。
#wrapperの上に#index .layout_mainの画像・背景色を表示させることで、JS無効時にカード上の文字列を消す。

<div id="wrapper">
<!--index_area-->
<!-- ▼▼▼ 表紙メニューポップアップ表示コンテンツここから ▼▼▼ -->
<div id="top_pop" style="display:none;">
~ 中略 ~
</div><script> document.getElementById("top_pop").style.display = "block";</script>
<!--▲▲▲ 表紙メニューポップアップ表示コンテンツここまで ▲▲▲-->

<noscript>
<div class="layout_main">
~ 中略 ~
</div>
</noscript>
<!--/index_area-->

<!--not_index_area-->
<div class="layout_main">
~ 中略 ~
</div>
<!--/not_index_area-->


#index .layout_main{ width:100%;max-width : 800px;_width : 800px; float:left;
height:440px;overflow:hidden;margin:0px -250px 0 auto;/padding-top:70px;
background-image : url("http://blog-imgs-43.fc2.com/n/o/v/noveltemplate/f00240_800X500x.gif");
background-repeat : no-repeat ;
background-position :right top ;}

ver1211

2013.3.19.改訂
改訂テンプレート:全記事一覧ページが右寄せレイアウトのnovel-R/Rfタイプ
novel-Rf-Jugoyaシリーズ以外(Jugoyaシリーズは既に改訂済み)
改訂内容:全記事一覧ページを1400px以上は右寄せさせない。

#titlelist { max-width:1400px;}
#titlelist { overflow : hidden ;}
#titlelist> .all { height:100%;}
#titlelist .main { height:100%; overflow:auto;}

#titlelist .sub_block { position:absolute;right : 640px ;}
#titlelist .sub_block_in { padding-top:0em;}


おまけ:HTMLからentry_all 内の以下を削除
「カテゴリ別表示は、JavaScript を オン にしてください。」

#index ,#titlelistなどID指定したbodyにpadding:0;margin:0;指定をすると
IEでは、検索バー領域を無視してレイアウトされてしまう。
Firefoxでは指定しても検索バー領域は確保される。

結果、body以下のブロックにheight:100%;を指定した場合などブラウザによって表示が違ってきてしまう。
これを避けるために、ID指定したbodyにはpadding,margin指定はしない。

ver1301mp

2013.3.19.改訂
改訂テンプレート:全携帯テンプレ
改訂内容:コメント編集エリア追加・コメトラ一覧ページナビにテキスト(先頭・最後)追加

バージョンアップ改訂内容覚書
»»  2013.03.20.

レスポンシブWEBデザイン導入顛末記


別ブログから申請中の画像用テンプレートにレスポンシブWebデザインを導入してみました。
画像テンプレにかかりっきりで、すっかり御無沙汰してしまったこちらのブログの保守(広告削除)兼、備忘録として、導入までのアレコレをこちらに記します。

レスポンシブWEBデザインとは、CSS3のメディアクエリを使用して見た目を変更するWeb ページの構築手法です。

それだけじゃわからな~いという方は
レスポンシブWEBデザイン導入前 と 導入後 のテンプレートのサンプル をご覧あれ

レスポンシブWEBデザイン導入前  
サンプル
レスポンシブWEBデザイン導入後  サンプル

解析度(画面サイズ)1024px以上の場合は、どちらも同じように見えます。
しかし、画面横幅を1024px以下に狭めていくと、レスポンシブWebデザイン導入後のサンプルは、画面サイズによってサムネイル画像のグリッドサイズも変動し、レイアウトも変わっていきます。
s_RWD.jpg

このように、パソコンやタブレット、スマホなど、閲覧端末の画面サイズに合わせて、サイトデザインレイアウトが変わるのがレスポンシブWebデザインです。

ワンソース、マルチデバイス対応可能。つまりスタイルシートをパソコン用やタブレット用、スマホ用と端末別に作成しておけば、HTMLは同じものが使えるという、WEBサイトを構築する上では、かなりエコで便利な代物。

しかし、拙作テンプレの場合、元々リキッドレイアウトだし、投稿画像に関しても、閲覧サイズに合わせて可変するように指定してあるし、何より、FC2ブログの場合、パソコンからの閲覧はパソコン用テンプレート、スマホからの閲覧はスマホ用テンプレートに振り分けられて表示されるので、あまり関係ない…と思っていたのですが、そうも言っていられなくなりました。

現状では、閲覧端末を判別して、アクセス先が自動的に振り分けられるのは、アクセス先のアドレスに、?pc &pc ?sp &sp  ?m &m などのクエリのついていない場合に限られます。
しかし、検索エンジンの検索結果によっては、url末尾に &pc ?pc がついたパソコン用アドレスや?sp &sp がついたスマホ用アドレスでヒットすることがあります。
それらをクリックすると、閲覧端末に関係なく、パソコン用アドレスはパソコン版テンプレート、スマホ用アドレスはスマホ版テンプレートで表示されてしまうのです。

また、タブレットからアクセスした場合、アクセス先に端末別のクエリがついていなければ最初はパソコン版テンプレートで表示されますが、端末別のアドレスと一致していないと認識されるのか、画面上にスマホ版テンプレートへのリンクボタンがどーんと表示されます。
昨今のタブレットの普及率は著しく、私の周囲でも、インターネットはパソコンは止めて、タブレットにしたという人間が徐々に増えていますので、これもちょっと考えなきゃいけなそうです。

というわけで、ものは試しと、画像テンプレの方に、レスポンシブWebデザインを導入してみました。
これがうまくいったら、徐々に、小説用テンプレにも導入していく予定です。

では、ここからが本題です。

FC2ブログテンプレートにIE8以下でもレスポンシブWEBデザインを適用させる



単純にレスポンシブWEBデザインを適用させるだけなら、メディアクエリの指定を追加するだけですので、さほど難しくありません。
fc2ブログの場合スタイルシート編集部分に以下のようにメディアクエリの指定を記述すればOKです。

/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

画面の横幅が768pxまでの場合のスタイル記入

}

/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){

画面の横幅が320pxまでの場合のスタイル記入

}


IE9以上および、モダンブラウザはこれだけでOKです。
但し、IE8以下は、ダメです。
CSS3未対応のIE8以下に、どうやってレスポンシブWebデザインを実装させるか、管理人にとっては、これがとんでもない難問でした。


以下は、参照させていただいたサイト様の記事

IE用にcss3-mediaqueries.jsを実装させる
【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。
IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法
レスポンシブWebデザインをIEに対応させる方法
【CSS3】メディアクエリをIE7、IE8でも使えるようにする
レスポンシブwebデザインに関する自分用メモ
Media QueriesがIE8で効かない場合の対処法
css3-mediaqueries.jsが効かなくて困った時のまとめ

IE8以下にレスポンシブWebデザインを実装させるには、IE8以下にcss3(メディアクエリ)を適用させるためのスクリプトが不可欠なようで、以下の二つのうち、いずれかを装着する必用があるようです。

Respond.js
css3-mediaqueries.js

両方試したが、動かない。

調べてみると、Respond.js  は属性セレクタが無効になる事が判明。

■respond.js
Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。
非常に軽量でサクサク動き、にわかに本命的な扱いをされてる気がするものですが、
2012年6月時点で「属性セレクタの記述をすると無効になる」という痛いバグがあります。

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録



となると、属性セレクタがあふれまくっている拙作では使えないため、css3-mediaqueries.js 一本に絞って再トライ。

以下をhead内に追加

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
<![endif]-->



まだ、動かない。
css3-mediaqueries.js は、中々取扱が難しいスクリプトな様で、様々な条件化で無効になるらしい。

メディアクエリの指定方法は、通常のメディア属性の指定と同様に

 ・link要素のmedia属性で指定
 ・@import規則で指定
 ・@media規則で指定

のいずれでも指定可能なのですが、
css3-mediaqueries.jsを使う場合は@media規則で指定しないと効きません

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録



特殊な条件が揃うと無効になることがある。
1.@mediaの記述だけを別ファイルにする
2.@media記述より前に@charset記述を書く
3.@mediaの記述以外の通常のCSSルールは書かない

上記全てが揃うと、100%無効になります。
普通のCSSの中にメディアクエリの記述を混ぜる場合には全く問題ないのですが、
管理しやすくしようとメディアクエリの記述のみを単独で別ファイルにした場合にハマる危険があります。

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録


色々試してみた結果、拙作テンプレの場合は、
外部ファイルである【スタイルシート編集】内の
『普通のCSSの中にメディアクエリの記述を混ぜる場合』でもダメだったため、
head内で 直接スタイル指定したところようやく動いた!

外部ファイルではなく、head要素内にstyle要素を配置して、その中にメディアクエリの設定内容を記述

<style type="text/css"><!--
/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

画面の横幅が768pxまでの場合のスタイル記入

}

/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){

画面の横幅が320pxまでの場合のスタイル記入

}
--></style>





まとめ


属性セレクタをつかっている(拙作テンプレの)場合 Respond.js ではなく css3-mediaqueries.js を装着する。
FC2ブログテンプレートの場合、メディアクエリの指定は、外部CSS(スタイルシート編集部分)ではなく、全て(HTML編集部分)head要素内にstyle要素を配置して記述する。


ドキュメント宣言をいつまでたっても理解できない管理人は、当初、参照サイト等で上のスクリプトと共に紹介されていた html5shiv もホイホイDLして装着していましたが、これもNGの一因でした…(^^ゞ


2013.09.24 (Tue)
IE8以下もレスポンシブWebデザインを適用させる方法 FC2ブログテンプレートの場合
»»  2013.09.24.

スポンサーサイト

--.--.--.[Edit]

▲page top


公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-G-mono1を公開中。


s301-mono1個別記事通常ブログ画面

画像はEGPさまからお借りしました。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

novel-10-mono1

2009.04.28.[Edit]
公開終了。2011.7月現在、ブロックでリメイクしたリニューアルテンプレnovel-G-mono1を公開中。画像はEGPさまからお借りしました。上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。...

»» 続きを読む

▲page top


公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-J-mono2を公開中。
表紙ページ(別窓)

Novel List(別窓)個別記事ページ通常ブログ画面

硬質な歴史ファンタジーが似合いそうなテンプレート。
画像は、写真がEGP様、イラストはMako'sさまからお借りしました。
2009.4.25リニューアル(表紙画像がランダムに変わります)詳しくは こちら

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

novel-10-mono2

2009.04.29.[Edit]
公開終了。2011.7月現在、ブロックでリメイクしたリニューアルテンプレnovel-J-mono2を公開中。硬質な歴史ファンタジーが似合いそうなテンプレート。 画像は、写真がEGP様、イラストはMako'sさまからお借りしました。 2009.4.25リニューアル(表紙画像がランダムに変わります)詳しくは こちら上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開...

»» 続きを読む

▲page top


公開終了。
2011.7月現在、ブロックでリメイクした同デザインのリニューアルテンプレ
novel-G-china1を公開中。
表紙ページ(別窓)

Novel List(別窓)個別記事ページ通常ブログ画面

赤が鮮やかな、中華風テンプレート。個別記事ページと通常ブログ画面には、記事の右下部分に三種類の画像がランダムに表示されます。
画像は双子屋工房さまからお借りしました。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

novel-10-china1 中華風テンプレート

2009.05.07.[Edit]
公開終了。2011.7月現在、ブロックでリメイクした同デザインのリニューアルテンプレnovel-G-china1を公開中。赤が鮮やかな、中華風テンプレート。個別記事ページと通常ブログ画面には、記事の右下部分に三種類の画像がランダムに表示されます。 画像は双子屋工房さまからお借りしました。 上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いた...

»» 続きを読む

▲page top


公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-G-china2を公開中。
表紙ページ(別窓)
Novel List(別窓)個別記事ページ通常ブログ画面

龍が表紙、黒が基調の色違いパージョン。双子屋工房さまの作品だけではなく、MiraclePageさまからも背景とテキストボタンをお借りしました。個別記事ページの追記の背景には透かし彫りの龍の姿が表れます。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

novel-10-china2 中華風テンプレート

2009.05.07.[Edit]
公開終了。 2011.7月現在、ブロックでリメイクしたリニューアルテンプレnovel-G-china2を公開中。 龍が表紙、黒が基調の色違いパージョン。双子屋工房さまの作品だけではなく、MiraclePageさまからも背景とテキストボタンをお借りしました。個別記事ページの追記の背景には透かし彫りの龍の姿が表れます。上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効で...

»» 続きを読む

▲page top


公開終了 ブロックでリメイクした
novel-G-black1 を公開中

目次ページ(別窓)Novel List(別窓)個別記事ページ通常ブログ画面

Mako'sさまのお宅の、見目麗しく艶かしいびせーねんにご登場いただいたテンプレート。おタンビなBL系作品が似合いそう♥…(*´艸`)きゃっ!表紙ページは髪の色が違う三枚の画像がランダムに表示されます。

novel-10-black1

2009.05.07.[Edit]
公開終了 ブロックでリメイクしたnovel-G-black1 を公開中Mako'sさまのお宅の、見目麗しく艶かしいびせーねんにご登場いただいたテンプレート。おタンビなBL系作品が似合いそう♥…(*´艸`)きゃっ!表紙ページは髪の色が違う三枚の画像がランダムに表示されます。...

»» 続きを読む

▲page top


公開終了。ブロックでリメイクした
novel-G-black2を2011.秋公開予定

こちらは同じくMako'sさまのお宅の、妖艶な美女たちにご登場いただいております。表紙画像をクリックすると一番最初の記事に飛ぶのは[black1]と同じですが、[black2]は、表紙ページだけではなく、NovelListも目次ページも、個別記事ページも、画像がランダムに変ります。

目次ページ(別窓)Novel List(別窓)個別記事ページ

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。

novel-10-black2

2009.05.08.[Edit]
公開終了。ブロックでリメイクしたnovel-G-black2を2011.秋公開予定こちらは同じくMako'sさまのお宅の、妖艶な美女たちにご登場いただいております。表紙画像をクリックすると一番最初の記事に飛ぶのは[black1]と同じですが、[black2]は、表紙ページだけではなく、NovelListも目次ページも、個別記事ページも、画像がランダムに変ります。上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページ...

»» 続きを読む

▲page top

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も多用しています。管理人は実感できないのですが、もしかしたら、そのせいで、表示が重くなっているかもしれません。もしも、フリーズしてしまったという場合は、衣替えはしない方が無難かもです。

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

2010.02.25.[Edit]
novel-PF-Snowが不承認になったので、その理由が判明するまで、画像のあるテンプレートを作成する気にならず、リクエストを頂戴したnovel-PF-PlainC1の申請のために、細部を調整していたのですが、これが深み(泥沼?)にはまってしまった!どうせなら、このタイプのテンプレートも互換性をもたせてPFタイプのスタイルシートで衣替えをできるようにしよう!っと思ったまではよかったのですが、そうそう簡単にはいきませんでした。...

»» 続きを読む

▲page top

サイドメニュー固定のためのカスタマイズ覚書

2011.05.30.[Edit]
特定ページの背景(ブロックmain)を全面変更する場合の設定(設定幅以下の画面の時は、横スクロールだけでなく縦スクロールも表示されてしまう)html { height : 100% ; _overflow: hidden; }body { height : 100% ; }.main { height : 100% ; min-height : 100% ; overflow : auto ; }body > .main { height : auto; } 背景の変更を考えない場合の設定html { height : 100% ; _overflow: hidden; } body { ...

»» 続きを読む

▲page top

画像ボタン含むGタイプPタイプ衣替えのための変更箇所

表紙月別更新
.rireki{text-align:right;}

月別アーカイブページ・検索ページ下部
</div><br /></div>→</div></div>

通常ブログ・月別アーカイブページ・検索ページ下部

<div align="right"><a href="#pagetop" title="↑ページトップへ"><i><small>▲PageTop</small></i></a></div>
<br />

<p class="back-top" ><a href="#pagetop" title="↑ページトップへ">▲PageTop</a></p>

カテゴリ・タグ・全記事一覧・ページナビゲーションliにクラス名追加
<!--not_permanent_area--><!--not_edit_area-->
<!--not_page_area--><!--not_date_area--><!--not_search_area-->
<ul class="entry_navi">
<!--prevpage--><li class="back"><a href="<%prevpage_url>">Back</a></li><!--/prevpage-->
<!--nextpage--><li class="next"><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul>
<!--/not_search_area--><!--/not_date_area--><!--/not_page_area-->
<!--not_titlelist_area--><!--not_category_area--><!--not_tag_area-->

個別記事ページコメント欄
<li class="entry_top"><a href="#h2_<%pno>" title="↑記事冒頭へ"> ▲EntryTop </a></li>

全記事一覧

<div align="right"class="co_num<%category_count>"><a href ="#pagetop" title="↑ページトップへ"><font style="font-size:80%"> <i>PageTop</i></font>▲</a></div>



<p class="back-top"class="co_num<%category_count>"><a href ="#pagetop" title="↑ページトップへ">PageTop▲</a></p>

#titlelist p.back-top {font-size:80%;text-align:right;}

スクリプト
if(list.length > 0) document.write('<ul class="co_num<%category_count>">');


スタイルシート IE6バグ対処
/*投稿フォーム:ラベル*/
dl.co_form dt label {
position : absolute;_position : absolute;_position: static; text-align : left;
width : 50px;font-size: 90%;
}


上を以下に変更↓

/*投稿フォーム:ラベル*/
dl.co_form dt label {
text-align : left;position : absolute;
width : 50px;
}
#permanent dl.co_form dt label{_position: static;
}



↓古書テンプレHTML対応用にnovel-Rタイプに以下を追加
.all{overflow: hidden;}

2011.6.23.

変更個所覚書

2011.06.23.[Edit]
画像ボタン含むGタイプPタイプ衣替えのための変更箇所表紙月別更新.rireki{text-align:right;}月別アーカイブページ・検索ページ下部</div><br /></div>→</div></div>通常ブログ・月別アーカイブページ・検索ページ下部<div align="right"><a href="#pagetop" title="↑ページトップへ"><i><small>▲PageTop</small></i></a></div><br />↓<...

»» 続きを読む

▲page top


background-attachmentをIE6に対応させる方法
* html #contents {
background-position: expression('10px '+this.parentNode.scrollTop + 'px');
}
CSS Lecture



display:block した a 要素(リンク)を IE6 でも安定させる方法

width プロパティで横幅を指定してあるセレクタにoverflow : hidden; を追加

はじめてのブログデザイン




リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」

いないいないばあバグの対処法
1.問題の出る要素を囲っている div に line-height を指定する。
2.問題の出る要素に width または height を指定する。
3.問題の出る要素の中の要素に position:relative を指定する。



ネガティブマージンをIE6.0でも使う
ポイントになるのが「position: relative;」の部分です。
IE6.0対策になるのですが、IE6.0ではネガティブマージンを使っても、
「ー(マイナス)」部分のピクセルは表示されません。
「position: relative;」を併記することによって、
(なぜか)SafariやFirefoxのように、きちんと表示してくれます。
「ポルカの日記 | CSSベースのHTMLレイアウト入門講座」




IE6でposition:fixedの真似ごと
IE6のバグのまとめ.
WinIE6バグ回避法
IE6で、マージンが2倍になってしまうバグ
IE6でよく遭遇する6つのバグとその解決方法
IEのhasLayoutで起こる不具合
CSSハック一覧 – IE, Firefox, Safariなどなど


IE6以下をIE7と同じようにするライブラリ『IE7.js』
IE7.js/IE8.jsを使って、スタイルシートの標準化

2011.6.25.

IE6バグと対処法あれこれ

2011.06.25.[Edit]
background-attachmentをIE6に対応させる方法* html #contents { background-position: expression('10px '+this.parentNode.scrollTop + 'px'); } 「CSS Lecture」display:block した a 要素(リンク)を IE6 でも安定させる方法width プロパティで横幅を指定してあるセレクタにoverflow : hidden; を追加「はじめてのブログデザイン」リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」いないいない...

»» 続きを読む

▲page top

side_menu

2011.08.11.[Edit]
は~っ、今さらどうしようもないけれど、それにしてもクラス名の付け方が紛らわしすぎる…。何が原因かわからないけれど、fileterがside_menuで効かないテンプレートがある。クラス名のせいかと思ったけど、違うみたい。だめなテンプレは、widthを指定しても、heightを指定しても、ためしにposition : absolute;を指定してもだめ。HTMLは同じまま、スタイルシートを変更するとばしっ影がでるから、ダメなテンプレはCSSに問題がある...

»» 続きを読む

▲page top

背景色ランダム表示ソース/タイプ変更他

2011.09.07.[Edit]
<!--背景色ランダム表示のスクリプト(1)ここから--><!--not_index_area--><script type="text/javascript"><!--function randomColor() {// ランダムに背景色を変更するvar bgc = ["#900000","#000","#008000"];var n = Math.floor(Math.random() * bgc.length );document.body.style.backgroundColor = bgc[n];}//--></script><!--/not_index_area--><!--背景色ランダム表示のスクリプト(...

»» 続きを読む

▲page top

J・Jfタイプのテンプレートでサイトナビの配置を top:0 left:0 で、画面上に移動して表示させた場合、ページ内リンクを使うと、サイトナビは検索バーの下に隠れて見えなくなってしまう。

対処法その1 検索バーを非表示に設定する。 
対処法その2 コンテナ上部にマージンを指定して、サイトナビの表示位置を下にずらす。
.container { margin-top : 20px ; }

PageTopへのリンク

アンカーの位置によっては、特定のテンプレートやプラグザでリンクが無効になってしまう。
フルスクリーンやクロスフェード表示のために画像タグが原因らしいが、
<class="all"> ~ </div>を用いたJ・Jfタイプのテンプレートにその傾向がある。


とりあえず、アンカーの位置を変更すれば直るので、個々のテンプレートごとに、行き当たりばったりで直している現状。

ブラウザごとにテンプレートを照合し、リンクが無効になる場合のアンカーの位置を確認する必用あり。

<body>
-----------(A1)-----------

<!--フルスクリーン表示のための追加ソース-->

-----------(A2)-----------

<div class="all">

-----------(B)-----------

<div class="main">

-----------(C1)-----------

<!--(表紙)クロスフェード表示のための追加ソース-->

-----------(C2)-----------


<div class="container">

-----------(D)-----------



<a name="pagetop" id="pagetop"></a>

novel-JF-HatuAkiの場合 
A1 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
A2 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
B  IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
C1 IE8のみ 表紙のみ✕ IE8以外はOK
C2 IE8とIE9 表紙のみ✕ IE8.9以外はOK
D  IE8のみ 表紙のみ✕ IE8以外はOK


IE6で、ブロックmainより外側(A1(A2)(B))にアンカーを設置してもページ内リンクが無効になるのは、ダブルスクロールを防止するために、.all や body ・ html 等に指定した _over-flow:hidden が原因と思われる。

また、.main以下のブロック(C1)(C2)(D)に設置した場合、表紙ページで、IE8やIE9でページ内リンクが無効になる原因は、間違いなく、クロスフェードのソースにある。

しかし、クロスフェードソース(ブロック#gallery3 )直下のブロック(.container)にアンカーを設置した場合(D)に、.container{position:relative}と指定しているにも関わらず、なぜ、IE8でページ内リンクが無効になるのかその原因は不明。

考えられる対策その1 
IE6のページ内リンクをあきらめるか、ダブルスクロールを我慢して、mainより外側(A1(A2)にアンカーを設置する。

考えられる対策その2
main内(C1)にアンカーを設置した上で、スタイルシートで、IE8で #pagetop の配置指定を追加する。今のところ、この方法が一番有効。

#index #pagetop { position : absolute ; /position : static ; z-index:100 ; top: 0 ; left : 0;}


通常ブログ画面で記事下部へのアンカーが効かない場合
原因:半角スペースを削除したせいか、ブラウザ(IE8)によってはアンカーが無視されてしまう
対策:paddingを設定することで着地点の領域を確保し、認識させる
#page ul.entry_state + a {width:10px;padding:2px;}

ページ内リンクあれこれ

2012.09.07.[Edit]
J・Jfタイプのテンプレートでサイトナビの配置を top:0 left:0 で、画面上に移動して表示させた場合、ページ内リンクを使うと、サイトナビは検索バーの下に隠れて見えなくなってしまう。対処法その1 検索バーを非表示に設定する。 対処法その2 コンテナ上部にマージンを指定して、サイトナビの表示位置を下にずらす。.container { margin-top : 20px ; }PageTopへのリンクアンカーの位置によっては、特定のテンプレートやプ...

»» 続きを読む

▲page top


左右カラム可変 リキッドレイアウトサンプル



幅 600px 右サイドメニュー



html { _overflow-x: scroll; }/*IE6 縮小画面の時の横スクロール用*/

.container {
margin : 0px auto ;
max-width : 600px;_width : 600px;
text-align : left ; }

.layout_main {
float : left;
width : 65%;_width : 400px; }

div.layout_side {
float : right;
width : 30%;_width : 180px; overflow: hidden;}


ポップアップ表示 基準は#wrapper スクロールと連動


#wrapperを基準にホップアップさせた場合、position:absoluteを指定しても親ブロック(.main)で_position: relative を指定しておかないと、IE6では表示位置が固定されてしまい、縮小画面にした時見えない部分が出来るので注意

#index .all .main { _position: relative ; }/*IE6ポップアップ固定防止のため*/

#index .all #wrapper { position: relative;_position:static ; }

.popupcard { width:67%;max-width:400px;_width:400px;
right: 30%; top:40px;_top:320px;_right:50%;
z-index:1; visibility:hidden; position:absolute;text-align:center;
}

.layout_side .popupcard { margin:0 ;background-image :none ;}

.popupin {
max-width:300px;_width:300px;
margin:40px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:5px 10px;text-align : center ;
border:line-height:200%;background-color:#ffffff;border:3px double #C2A858 ; }

#step2 .popupin { margin-top:20px;max-width:350px;_width:350px ; }

.popupin2 {
max-width:320px;_width:320px;max-height:200px;_height:200px;overflow: auto;
margin:20px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:0 1em 0 1.5em;text-align : left ;
line-height: 150%;
background-color:#ffffff;border:3px double #C2A858;
}
.layout_side .popupin2{max-height:220px;padding:1em ;_position: relative ; }

.popupcard h3{
margin:0 auto ;_margin : 0px -100px 0 auto;_width:400px;
padding : 0px ;font-weight: bold;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;
}
#index .side_menu .popupcard h3{
max-width:400px;_width:400px;_position: relative;_margin : 20px -100px 0 auto;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;}

.pop_free {max-width:350px;_width:350px;margin-top:20px;max-height:350px;_height:auto;line-height:150%;overflow: auto;text-align : left ;
}

/*背景画像の表示領域を確保するための設定*/
#index .topindex { min-height:〇〇px;_〇〇px ; }
hr.bg_line { visibility:hidden; }/*トップ画像が一枚絵展示スタイル*/

hr.bg_line { dispaly:none; }/*一枚絵展示でなければ非表示設定でOK*/

GタイプJタイプ対応のための背景設定


/*#wrapperで背景指定する場合*/

#index .all div#wrapper {
min-height:〇〇px;_height:〇〇px;
background-image : url("画像ファイル");
background-repeat : no-repeat ;
background-position : left bottom;}


#index .all div#wrapper {overflow: hidden;}

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

/*\*/
* html #index .all div#wrapper {
height: 1em;_height:1em;
overflow: visible;
}
/**/

サンプルコード

2012.09.09.[Edit]
左右カラム可変 リキッドレイアウトサンプル幅 600px 右サイドメニューhtml { _overflow-x: scroll; }/*IE6 縮小画面の時の横スクロール用*/.container { margin : 0px auto ; max-width : 600px;_width : 600px; text-align : left ; }.layout_main { float : left; width : 65%;_width : 400px; }div.layout_side { float : right; width : 30%;_width : 180px; overflow: hidden;}ポップアップ表示 基準は#wrapper スクロ...

»» 続きを読む

▲page top


body 直下のボックスを中身がなくても、画面下まで背景を表示させる(PF/PF2タイプ以外)



(1)全てのエリアでmain背景を上から下まで表示させる

最大幅を指定していない場合
dt7_novel-template, novel-S-spring, novel-S-muguet, novel-S-blue, novel-S-laceなど


html { height:100%;_overflow: hidden;_overflow-x: scroll; }

/*全てのエリアでmain背景を上から下まで表示させる場合for JGfor JG*/
html.index,html.page,html.date,html.search,html.tag,html.category,html.edit,
html.permanent,html.titlelist
{ overflow: hidden;_overflow-x: scroll ; }


html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height:100% ; overflow : hidden ; } /*for JG*/

body > .all { height:100% ;}

.main { height:100%; min-height:100%; overflow:auto ; }

body > .main { height:auto ; }


#index .all .main{/overflow:hidden;_overflow:auto ;}


ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとなる
  • body と all を height:100% で固定しているので、JGタイプもJGタイプ以外も全て背景は main の指定によって下まで表示される。
  • しかし、最大領域を指定しているテンプレートの場合、上では指定した横幅の位置にスクロールが表示されてしまう為、その場合は(4)の方法で指定する


最後の#index .all .mainの指定は不要な場合もあるが、スタイルによってはJGタイプに変更時IE7で、縮小画面の内側にダブルスクロールが出る事があるのでそれを防ぐ為に一応記述
#index .all .main { /overflow : hidden ; _overflow : auto;}/*for IE7JG*/

JGタイプの場合、mainで指定した中央表示の背景は、(スクロールの幅だけ)若干右にずれて表示される。中央部が狭い背景画像は、そのずれが目立つので注意。

(2)個別記事エリアだけでmain背景を上から下まで表示させる場合


ほとんどのテンプレートがこれ。背景をフルスクリーン表示させている時も共通。
以下は個別記事エリアのmain背景だけを上から下まで表示させる場合。


html { height : 100%; _overflow: hidden ; _overflow-x: scroll; }

/*個別記事エリアfor JG*/
html.permanent { overflow : hidden ;_overflow-x : scroll ; }

html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height : 100%; min-height:100%; overflow:auto;_overflow : hidden ;} /*for JG*/

body > .all{ height:auto; }

#permanent > .all { height : 100% ; }

.main { height:100%; min-height:100%; overflow:auto;}

body > .main{ height:auto; }


#index .all .main { /overflow : hidden ; _overflow : auto ;}



フルスクリーン表示の時はmain に position :relatvie を追加
.main{ height:100%; min-height:100%; overflow:auto;position: relative;}


(3)最大幅を指定していない個別記事以外のエリアでmain背景を左下もしくは中央下まで表示させる場合

novel-R-Papillon,novel-S-pumpkin1, novel-S-icyou, novel-S-rose, novel-S-berryなど

(2)の基本コードに 個別エリアと同じように記述して追加。以下は全記事一覧ページmain背景を左下もしくは中央表示させる例

/*背景を上から下まで表示させるエリアfor JG*/
html.permanent , html.titlelist { overflow : hidden ;_overflow-x : scroll ; }

#permanent > .all { height : 100% ; }
#titlelist > .all { height : 100% ; }



(4)最大幅を指定している個別記事以外のエリアのmain背景を上から下まで表示させる場合


novel-Rf-Jyugoyaシリーズなど右寄せのデザインなど最大横幅を指定してある場合、(3)の方法では幅広パソコンなどで閲覧した場合、最大横幅の位置に縦スクロールが表示されてしまう。
これを避けるために、最大横幅を指定してあるエリアは、(3)の方法ではなく、(2)の基本コードのまま、maine と all の指定で調整する。
main で背景を右下まで表示させており、なお且つ最大幅を指定しているエリアは main と all で重複指定し、その上で、.all .main つまり、JGタイプのの時の main 背景を非表示に指定する。

/*最大横幅を設定しているエリア用*/
#index ,#category,#tag,#page ,#date,#search ,#edit {max-width:1400px;}

#index .main,#index .all{
background-color : transparent;background-attachment: scroll;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6_700.jpg"); background-position: right top;background-repeat: repeat-y;}

#page .main,#page .all{
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6b_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#search .main,#search .all,#date .main,#date .all
{background-color : transparent;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane4_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#index .all .main,#page .all .main,#searach .all .main,#date .all .main,
{background-image :none;background-color : transparent;}




(5)最大幅を指定している全記事一覧ページのmain背景を右下まで表示させる場合


(2)と(3)のコードに加え、以下を追加


#titlelist{overflow : hidden ;}
#titlelist .main{ height:100%; overflow:auto;}


#titlelist .sub_block {
margin:0; padding:0; width : 180px ; height:100%;
right : 620px ; top : 0;
position:absolute; z-index : 4 ;overflow:auto;text-align : center;
}


最大横幅を指定した上で、sub_block を コンテナのすぐ左に表示させるには、position:fixed ではなく
absolute で指定する必用がある。しかし、absolute で指定すると、sub_block が固定されず、画面に連動して上下してしまう。それを避けるために、ボディのスクロールを非表示にした上で、main と sub_block の高さを100%で固定し、それぞれ別個にスクロールさせる。但し、全記事一覧ページはサブボックスがあるため、最大幅の位置にどうしても縦スクロールが表示される。
ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとして背景は下まで表示される。
  • mainを左下もしくは中央下まで表示させる場合、個別記事や全記事一覧・目次ページなど、
    sub_blockがあるエリアでは、all での代替え指定はできないため、
    他のエリアとはコードが違ってくる。



補足



JGタイプの時IE6で、縮小画面がダブルスクロールになる場合は、以下を追加
html.index{_overflow-x:hidden;}/*for IE6JG*/
JGタイプの時IE7で、縮小画面に横スクロールが出る場合は、以下を追加
html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

Jタイプの時IE6で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加
.all .main{_position: relative;}/*for IE6JGスクロール固定防止の為*/
Jタイプの時IE6 と IE7 で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加

.all .main{/position: relative;}/*for IE6&IE7JGスクロール固定防止の為*/

修正版ボックス背景全面表示とスクロールの覚書ver1210

2012.09.21.[Edit]
body 直下のボックスを中身がなくても、画面下まで背景を表示させる(PF/PF2タイプ以外)(1)全てのエリアでmain背景を上から下まで表示させる最大幅を指定していない場合dt7_novel-template, novel-S-spring, novel-S-muguet, novel-S-blue, novel-S-laceなどhtml { height:100%;_overflow: hidden;_overflow-x: scroll; }/*全てのエリアでmain背景を上から下まで表示させる場合for JGfor JG*/html.index,html.page,html.date,html....

»» 続きを読む

▲page top

去年の秋から、手がけ始めたスマートフォンテンプレート。

九分どおり出来上がってはいたのですが、完成を目前に、暗礁に乗り上げてしまいました。
頭が煮詰まってしまったので、しばらく間を置こうと、無責任にも、そのままの状態にしておいたのですが、数か月を経て、トリ頭の管理人は、スマホ用テンプレの完成している部分の詳細までぼやけつつあります。

これはマズイ!
ということで、とりあえず備忘録のつもりで、スマホ用テンプレの現状、問題点など整理しておきます。

問題点その1
スマホ用テンプレは、表紙ページと通常ブログ画面の第1ページ目を区別できない。
双方とも、同じインデックスエリアとされてしまう。

問題点その2
スマホ用テンプレは、タグエリア・タイトルリストエリア・検索エリアを表示できない。

問題点その3
スマホ用テンプレの記事一覧ページの表示件数の上限は10件である。

問題点その4
スマホ用テンプレは、一部の旧サーバーブログでは、反映されない非公開変数がある。

問題点その5
旧サーバーブログで反映されない非公開変数は、新サーバーブログでも、IEでは反映されないため、プレビュー等で確認できない。(IE以外で確認すれば済むけれど厄介)


スマホ用テンプレートは単独では小説用として機能させるのは難しいため、一般用として共有公開する。
小説用とする場合は、パソコン用のテンプレートと併用して使用する。

スマホ用の小説テンプレート(spメイン)と、それと併用して用いるパソコン用テンプレート(spサブ)のHTMLはサイト内配布する。


問題点その1~その3の解決のため、スマホ用小説テンプレでは、通常ブログ画面の第1ページ目・タグエリア・タイトルリストエリア・検索エリアはパソコン用テンプレートのプレビューページで表示させる必用がある。

一般テンプレートとして公開する事を考えると、表紙と通常ブログ画面第1ページ目はID指定による表示の振り分けができなくなる。よって、表紙と通常ブログ画面第1ページ目ではクラス名を変える必用がある。同じクラス名は使えない。

一般用はサムネイル画像が表示されるスタイルで公開するが、小説用は表示させない。


問題点その4~その5について
反映されない非公開変数とは、スマホテンプレでのみ有効な、記事内に画像が有る場合にサムネイルを表示する変数<%topentry_image_72><%topentry_image_w300>のこと。

昨年秋、ちょうど管理人のスマホ用テンプレが出来上がりかけた頃に公開された以下の公式テンプレートは、本来であれば、サムネイル画像が表示される。
new_basic_red
basic_black_st
basic_black_bt
しかし、一部の旧サーバーブログではサムネイルが表示されない。

スマートフォンテンプレート難航中

2013.01.20.[Edit]
去年の秋から、手がけ始めたスマートフォンテンプレート。九分どおり出来上がってはいたのですが、完成を目前に、暗礁に乗り上げてしまいました。頭が煮詰まってしまったので、しばらく間を置こうと、無責任にも、そのままの状態にしておいたのですが、数か月を経て、トリ頭の管理人は、スマホ用テンプレの完成している部分の詳細までぼやけつつあります。これはマズイ!ということで、とりあえず備忘録のつもりで、スマホ用テンプ...

»» 続きを読む

▲page top

月別アーカイブページパン屑リスト


月別アーカイブページにおいて、変数<%subtitle>の表示内容の改訂によりパン屑リスト及びStileKeeperのスクリプトが無効になってしまった。(以前は記事の更新年月日の数字のみに変換されたが、現在は、年月日の漢字も表示)

例2014.1.1.に更新された記事
改訂以前 20140101  現在 20140101
色々試してみたが、難航中。自力では歯が立たない場合は作者様に相談。
 

一ヵ月更新がない場合の指定追加


HTML


<!--▽月別アーカイブページ・検索ページ下部-->
<!--not_index_area--><!--not_permanent_area--><!--not_category_area--><!--not_page_area--><!--not_tag_area--><!--not_edit_area-->
<!--not_titlelist_area-->
<!--topentry-->
<div class="entry-body kakusi<%topentry_category_no> ad<%topentry_no>">



ヘッド内CSS



li.ad,tr.ad,ul.nl li.ad,ul.entry_list li.ad{ display: none; }

Monthly_Rf_Jyugoya


外部ファイルCSS

<!--以下は月替わりスタイルシート設定-->
<!--permanent_area--><!--topentry-->
<link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%topentry_month>.css" type="text/css" rel="stylesheet" />
<!--/topentry--><!--/permanent_area-->
<!--not_permanent_area--><link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%now_month>.css" type="text/css" rel="stylesheet" /><!--/not_permanent_area-->
<!--月替わりスタイルシート設定ここまで-->






以前?の改訂の取りこぼし
コメントリストの見出し、HTML は h4 で、スタイルシートは h3 で指定している。
.comment-list h4

PFタイプ fieldsetフォントが変



#permanent .index-navi fieldset

PFタイプ2013.5.26.修正


アンカーの調節のためにネガティブマージン指定
全記事一覧ページの見出しミス修正と<h2>→<h3><h3>→<h4>


<!--category_nosub--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_nosub-->
<!--category_parent--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_parent-->
<!--category_sub_hasnext--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_hasnext-->
<!--category_sub_end--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_end-->


.entry_all ul {
margin : 0px 10px 20px 20px;
padding : 0px 0px 0px 20px;
list-style-type : square;;
}

ver1303


コメント・トラックバック共に受け付けない場合layout_side2ブロックとnavi_4を非表示
head内スタイルシートに以下を追加

#permanent .cm-tb-{display:none;}

layout_side2 と navi_4のクラス名を追加して以下に変更
<div class="layout_side2 cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry-->">

<div class="navi navi_4<!--permanent_area--> cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry--><!--/permanent_area-->">


通常ブログ画面のIE6バグ対処法

entry背景が領域を超えて表示される場合は、高さとアンカーのための下パディングを指定する。
この時、下パディング分の1pxがメインカラム背景色と相反して目立つ場合は、ul.entry_stateにネガティブマージンを指定して隠す。

#page .entry{margin : 0px;
_height:1px;_padding-bottom:1px;/*IE6バグ対策*/}

#page ul.entry_state{_margin-bottom:-1px;/*IE6バグ対策*/}

ver1302


サムネイル表示変数を追加
HTML
タグエリア

<div class="entry_text4">
<!--body_img--><%topentry_image><!--/body_img--><%topentry_discription>
<p align="right">

月別・検索ページ
<div class="entry_text">
<p align="right"><%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_youbi>)</p>
<div class="entry"><!--body_img--><%topentry_image_72><!--/body_img--><%topentry_discription></div>

CSS
追加

.entry_text4{min-height:1px;}
.entry_text4 img {height: 150px;width:auto;float:left; overflow: hidden;margin:0;padding:0;border-right:5px solid #f0f8ff;}
#date .entry img,#search .entry img
{float:left;height: 90px;width:auto;margin:0;padding:0; border-right:5px solid #fff4dc;}


変更

#tag p.back-top ⇒.tag-frm1 p.back-top
#tag h2 ⇒.tag-frm1 h2

タグエリアが羊皮紙の場合
div.tag-frm2 { margin : 0 auto;text-align:left;max-width:580px;_width:580px; }

.entry_text4 {
max-width : 470px;_width : 470px;max-height : 150px;_height : 150px;
margin : 20px auto 10px auto ;
padding : 20px 4% 10px 4% ; line-height : 170%;
background-color : #f0f8ff;
font-size : 90%;
border : 1px dotted #C2A858 ;overflow:auto;
}


/*<<もくじ*/
.mokuji a{ color : #900000; font-weight : bold;}
.mokuji a:hover{ color : #ffffff; font-weight : bold; background-color:#006400;}

p.tag_btm{margin : 0 auto; max-width:580px;_width:580px;line-height:100%;}
.tag-frm1 a{background-color:#f3e5c0}

月別・検索が羊皮紙カードの場合

#date .entry,#search .entry {margin : 0px auto;padding:0;max-width:430px;_width:430px;
height:130px;overflow:auto;}

#search p.back-top,#date p.back-top{
font-size:1%!important;margin:20px 0 0px auto;width:70px; background-image : url("http://blog-imgs-62.fc2.com/n/o/v/noveltemplate/seal_dokuro75.gif"); background-position:right center;background-repeat:no-repeat;overflow : hidden; }

#date .entry-body h4,#search .entry-body h4{max-width:480px;margin:0 auto;text-align:right;}

ver1301

.sub_block関連エントリー と関連目次一覧 を折りたたみ

.sub_block {height:100%;overflow:auto;} 追加
#category div.sub_block {text-align : center;position: absolute;} 削除
#category .sub_block_in {padding-top:0em;} 削除



ボックス表示風にする場合は、関連目次一覧のための追加設定 を以下に差し替え

#category div.sub_block .side_menu{margin:0;}
#category div.sub_block .movecat {background-color : #fff;}
#category div.sub_block .movecat fieldset {margin:0;padding:0 0 0 1em;border:none;}
#category div.sub_block .movecat a{display:block;}
#category div.sub_block fieldset a:hover{color : #fff;background-color : #900;}
#category div.sub_block legend {width:170px;background-color : #fff;font-size:16px;}
span.ichiran-p {font-weight:bold;border-bottom:2px dotted #C2A858;font-size:110%;}
span.ichiran-p a:link,span.ichiran-p a:visited { color : #800080; text-decoration : none;}
span.ichiran-p a:active, span.ichiran-p a:hover{ color : #000000; text-decoration : none; background-color:#fff;}



横スクロールバーが出ている場合は以下を削除

#category div.sub_block {width:180px;}



全記事一覧ページ.sub_block top リンクのアンカー変更

Jタイプクロスフェード追加ソース2 挿入位置

novel-S,novel-Rタイプ以外に、navi_2,navi_4 改行追加

コメント編集時のテキストエリア 高さ指定(height:300px;)追加

#edit dl.co_form dd textarea#comment{
width:95%;max-width : 600px;_width : 600px;height:300px;}



ver1212

改訂テンプレート:novel-Iタイプ
改訂内容:表紙ページ noscript部分を分離し、#index .layout_mainで背景を指定する。
#wrapperの上に#index .layout_mainの画像・背景色を表示させることで、JS無効時にカード上の文字列を消す。

<div id="wrapper">
<!--index_area-->
<!-- ▼▼▼ 表紙メニューポップアップ表示コンテンツここから ▼▼▼ -->
<div id="top_pop" style="display:none;">
~ 中略 ~
</div><script> document.getElementById("top_pop").style.display = "block";</script>
<!--▲▲▲ 表紙メニューポップアップ表示コンテンツここまで ▲▲▲-->

<noscript>
<div class="layout_main">
~ 中略 ~
</div>
</noscript>
<!--/index_area-->

<!--not_index_area-->
<div class="layout_main">
~ 中略 ~
</div>
<!--/not_index_area-->


#index .layout_main{ width:100%;max-width : 800px;_width : 800px; float:left;
height:440px;overflow:hidden;margin:0px -250px 0 auto;/padding-top:70px;
background-image : url("http://blog-imgs-43.fc2.com/n/o/v/noveltemplate/f00240_800X500x.gif");
background-repeat : no-repeat ;
background-position :right top ;}

ver1211

2013.3.19.改訂
改訂テンプレート:全記事一覧ページが右寄せレイアウトのnovel-R/Rfタイプ
novel-Rf-Jugoyaシリーズ以外(Jugoyaシリーズは既に改訂済み)
改訂内容:全記事一覧ページを1400px以上は右寄せさせない。

#titlelist { max-width:1400px;}
#titlelist { overflow : hidden ;}
#titlelist> .all { height:100%;}
#titlelist .main { height:100%; overflow:auto;}

#titlelist .sub_block { position:absolute;right : 640px ;}
#titlelist .sub_block_in { padding-top:0em;}


おまけ:HTMLからentry_all 内の以下を削除
「カテゴリ別表示は、JavaScript を オン にしてください。」

#index ,#titlelistなどID指定したbodyにpadding:0;margin:0;指定をすると
IEでは、検索バー領域を無視してレイアウトされてしまう。
Firefoxでは指定しても検索バー領域は確保される。

結果、body以下のブロックにheight:100%;を指定した場合などブラウザによって表示が違ってきてしまう。
これを避けるために、ID指定したbodyにはpadding,margin指定はしない。

ver1301mp

2013.3.19.改訂
改訂テンプレート:全携帯テンプレ
改訂内容:コメント編集エリア追加・コメトラ一覧ページナビにテキスト(先頭・最後)追加

バージョンアップ改訂内容覚書

2013.03.20.[Edit]
月別アーカイブページパン屑リスト月別アーカイブページにおいて、変数<%subtitle>の表示内容の改訂によりパン屑リスト及びStileKeeperのスクリプトが無効になってしまった。(以前は記事の更新年月日の数字のみに変換されたが、現在は、年月日の漢字も表示)例2014.1.1.に更新された記事改訂以前 20140101  現在 2014年01月01日色々試してみたが、難航中。自力では歯が立たない場合は作者様に相談。 一ヵ月更新がない場合...

»» 続きを読む

▲page top

レスポンシブWEBデザイン導入顛末記


別ブログから申請中の画像用テンプレートにレスポンシブWebデザインを導入してみました。
画像テンプレにかかりっきりで、すっかり御無沙汰してしまったこちらのブログの保守(広告削除)兼、備忘録として、導入までのアレコレをこちらに記します。

レスポンシブWEBデザインとは、CSS3のメディアクエリを使用して見た目を変更するWeb ページの構築手法です。

それだけじゃわからな~いという方は
レスポンシブWEBデザイン導入前 と 導入後 のテンプレートのサンプル をご覧あれ

レスポンシブWEBデザイン導入前  
サンプル
レスポンシブWEBデザイン導入後  サンプル

解析度(画面サイズ)1024px以上の場合は、どちらも同じように見えます。
しかし、画面横幅を1024px以下に狭めていくと、レスポンシブWebデザイン導入後のサンプルは、画面サイズによってサムネイル画像のグリッドサイズも変動し、レイアウトも変わっていきます。
s_RWD.jpg

このように、パソコンやタブレット、スマホなど、閲覧端末の画面サイズに合わせて、サイトデザインレイアウトが変わるのがレスポンシブWebデザインです。

ワンソース、マルチデバイス対応可能。つまりスタイルシートをパソコン用やタブレット用、スマホ用と端末別に作成しておけば、HTMLは同じものが使えるという、WEBサイトを構築する上では、かなりエコで便利な代物。

しかし、拙作テンプレの場合、元々リキッドレイアウトだし、投稿画像に関しても、閲覧サイズに合わせて可変するように指定してあるし、何より、FC2ブログの場合、パソコンからの閲覧はパソコン用テンプレート、スマホからの閲覧はスマホ用テンプレートに振り分けられて表示されるので、あまり関係ない…と思っていたのですが、そうも言っていられなくなりました。

現状では、閲覧端末を判別して、アクセス先が自動的に振り分けられるのは、アクセス先のアドレスに、?pc &pc ?sp &sp  ?m &m などのクエリのついていない場合に限られます。
しかし、検索エンジンの検索結果によっては、url末尾に &pc ?pc がついたパソコン用アドレスや?sp &sp がついたスマホ用アドレスでヒットすることがあります。
それらをクリックすると、閲覧端末に関係なく、パソコン用アドレスはパソコン版テンプレート、スマホ用アドレスはスマホ版テンプレートで表示されてしまうのです。

また、タブレットからアクセスした場合、アクセス先に端末別のクエリがついていなければ最初はパソコン版テンプレートで表示されますが、端末別のアドレスと一致していないと認識されるのか、画面上にスマホ版テンプレートへのリンクボタンがどーんと表示されます。
昨今のタブレットの普及率は著しく、私の周囲でも、インターネットはパソコンは止めて、タブレットにしたという人間が徐々に増えていますので、これもちょっと考えなきゃいけなそうです。

というわけで、ものは試しと、画像テンプレの方に、レスポンシブWebデザインを導入してみました。
これがうまくいったら、徐々に、小説用テンプレにも導入していく予定です。

では、ここからが本題です。

FC2ブログテンプレートにIE8以下でもレスポンシブWEBデザインを適用させる



単純にレスポンシブWEBデザインを適用させるだけなら、メディアクエリの指定を追加するだけですので、さほど難しくありません。
fc2ブログの場合スタイルシート編集部分に以下のようにメディアクエリの指定を記述すればOKです。

/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

画面の横幅が768pxまでの場合のスタイル記入

}

/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){

画面の横幅が320pxまでの場合のスタイル記入

}


IE9以上および、モダンブラウザはこれだけでOKです。
但し、IE8以下は、ダメです。
CSS3未対応のIE8以下に、どうやってレスポンシブWebデザインを実装させるか、管理人にとっては、これがとんでもない難問でした。


以下は、参照させていただいたサイト様の記事

IE用にcss3-mediaqueries.jsを実装させる
【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。
IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法
レスポンシブWebデザインをIEに対応させる方法
【CSS3】メディアクエリをIE7、IE8でも使えるようにする
レスポンシブwebデザインに関する自分用メモ
Media QueriesがIE8で効かない場合の対処法
css3-mediaqueries.jsが効かなくて困った時のまとめ

IE8以下にレスポンシブWebデザインを実装させるには、IE8以下にcss3(メディアクエリ)を適用させるためのスクリプトが不可欠なようで、以下の二つのうち、いずれかを装着する必用があるようです。

Respond.js
css3-mediaqueries.js

両方試したが、動かない。

調べてみると、Respond.js  は属性セレクタが無効になる事が判明。

■respond.js
Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。
非常に軽量でサクサク動き、にわかに本命的な扱いをされてる気がするものですが、
2012年6月時点で「属性セレクタの記述をすると無効になる」という痛いバグがあります。

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録



となると、属性セレクタがあふれまくっている拙作では使えないため、css3-mediaqueries.js 一本に絞って再トライ。

以下をhead内に追加

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
<![endif]-->



まだ、動かない。
css3-mediaqueries.js は、中々取扱が難しいスクリプトな様で、様々な条件化で無効になるらしい。

メディアクエリの指定方法は、通常のメディア属性の指定と同様に

 ・link要素のmedia属性で指定
 ・@import規則で指定
 ・@media規則で指定

のいずれでも指定可能なのですが、
css3-mediaqueries.jsを使う場合は@media規則で指定しないと効きません

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録



特殊な条件が揃うと無効になることがある。
1.@mediaの記述だけを別ファイルにする
2.@media記述より前に@charset記述を書く
3.@mediaの記述以外の通常のCSSルールは書かない

上記全てが揃うと、100%無効になります。
普通のCSSの中にメディアクエリの記述を混ぜる場合には全く問題ないのですが、
管理しやすくしようとメディアクエリの記述のみを単独で別ファイルにした場合にハマる危険があります。

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録


色々試してみた結果、拙作テンプレの場合は、
外部ファイルである【スタイルシート編集】内の
『普通のCSSの中にメディアクエリの記述を混ぜる場合』でもダメだったため、
head内で 直接スタイル指定したところようやく動いた!

外部ファイルではなく、head要素内にstyle要素を配置して、その中にメディアクエリの設定内容を記述

<style type="text/css"><!--
/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

画面の横幅が768pxまでの場合のスタイル記入

}

/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){

画面の横幅が320pxまでの場合のスタイル記入

}
--></style>





まとめ


属性セレクタをつかっている(拙作テンプレの)場合 Respond.js ではなく css3-mediaqueries.js を装着する。
FC2ブログテンプレートの場合、メディアクエリの指定は、外部CSS(スタイルシート編集部分)ではなく、全て(HTML編集部分)head要素内にstyle要素を配置して記述する。


ドキュメント宣言をいつまでたっても理解できない管理人は、当初、参照サイト等で上のスクリプトと共に紹介されていた html5shiv もホイホイDLして装着していましたが、これもNGの一因でした…(^^ゞ


2013.09.24 (Tue)

IE8以下もレスポンシブWebデザインを適用させる方法 FC2ブログテンプレートの場合

2013.09.24.[Edit]
レスポンシブWEBデザイン導入顛末記別ブログから申請中の画像用テンプレートにレスポンシブWebデザインを導入してみました。画像テンプレにかかりっきりで、すっかり御無沙汰してしまったこちらのブログの保守(広告削除)兼、備忘録として、導入までのアレコレをこちらに記します。レスポンシブWEBデザインとは、CSS3のメディアクエリを使用して見た目を変更するWeb ページの構築手法です。それだけじゃわからな~いという方はレス...

»» 続きを読む

▲page top


雪の女王
SNEDRONNINGEN
七つのお話でできているおとぎ物語
ハンス・クリスティアン・アンデルセン Hans Christian Andersen
楠山正雄訳  出典: 青空文庫
底本:「新訳アンデルセン童話集 第二巻」同和春秋社
作品名: 銀河鉄道の夜
作品名読み: ぎんがてつどうのよる
著者名: 宮沢 賢治  出典: 青空文庫
底本: 新編 銀河鉄道の夜
出版社: 新潮文庫、新潮社
作品名: 坊っちゃん
作品名読み: ぼっちゃん
著者名: 夏目 漱石  出典: 青空文庫
底本: ちくま日本文学全集 夏目漱石
出版社: 筑摩書房
同じタイプのテンプレートのスタイルシートと差し替えれば、イラストリスト機能を追加した上で、配色・背景画像などデザインを変更(衣替え)することができます。 詳しくは コチラ
同じタイプの小説用テンプレのスタイルシートと差し替えれば、一般ブログスタイルのまま、配色・背景画像などデザインを変更(衣替え)することができます。詳しくは  テンプレートを一般ブログスタイルに変更する
夢小説テンプレートは設定をしてはじめて、名前変換フォームが表示され夢小説用テンプレートとして機能します。ご利用の前に必ず設定してください。 また、PFタイプ・PF2タイプ以外のスタイルシートに差し替えれば、夢小説名前変換機能はそのまま、デザインだけを変更できます。  詳しくは  夢小説用テンプレートの設定

公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-G-mono1を公開中。


s301-mono1個別記事通常ブログ画面

画像はEGPさまからお借りしました。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-mono1
»»  2009.04.28.
[Edit]

公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-J-mono2を公開中。
表紙ページ(別窓)

Novel List(別窓)個別記事ページ通常ブログ画面

硬質な歴史ファンタジーが似合いそうなテンプレート。
画像は、写真がEGP様、イラストはMako'sさまからお借りしました。
2009.4.25リニューアル(表紙画像がランダムに変わります)詳しくは こちら

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-mono2
»»  2009.04.29.
[Edit]

公開終了。
2011.7月現在、ブロックでリメイクした同デザインのリニューアルテンプレ
novel-G-china1を公開中。
表紙ページ(別窓)

Novel List(別窓)個別記事ページ通常ブログ画面

赤が鮮やかな、中華風テンプレート。個別記事ページと通常ブログ画面には、記事の右下部分に三種類の画像がランダムに表示されます。
画像は双子屋工房さまからお借りしました。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-china1 中華風テンプレート
»»  2009.05.07.
[Edit]

公開終了。
2011.7月現在、ブロックでリメイクしたリニューアルテンプレ
novel-G-china2を公開中。
表紙ページ(別窓)
Novel List(別窓)個別記事ページ通常ブログ画面

龍が表紙、黒が基調の色違いパージョン。双子屋工房さまの作品だけではなく、MiraclePageさまからも背景とテキストボタンをお借りしました。個別記事ページの追記の背景には透かし彫りの龍の姿が表れます。

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-china2 中華風テンプレート
»»  2009.05.07.
[Edit]

公開終了 ブロックでリメイクした
novel-G-black1 を公開中

目次ページ(別窓)Novel List(別窓)個別記事ページ通常ブログ画面

Mako'sさまのお宅の、見目麗しく艶かしいびせーねんにご登場いただいたテンプレート。おタンビなBL系作品が似合いそう♥…(*´艸`)きゃっ!表紙ページは髪の色が違う三枚の画像がランダムに表示されます。
novel-10-black1
»»  2009.05.07.
[Edit]

公開終了。ブロックでリメイクした
novel-G-black2を2011.秋公開予定

こちらは同じくMako'sさまのお宅の、妖艶な美女たちにご登場いただいております。表紙画像をクリックすると一番最初の記事に飛ぶのは[black1]と同じですが、[black2]は、表紙ページだけではなく、NovelListも目次ページも、個別記事ページも、画像がランダムに変ります。

目次ページ(別窓)Novel List(別窓)個別記事ページ

上の画像をクリックするとプレビューされます。Novelテンプレートはエリアごとにページデザインが違います。JavaScript有効であれば、開いたページサンプル内のリンクでページ移動できますので、他のページのデザインもご確認ください。
novel-10-black2
»»  2009.05.08.
[Edit]
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も多用しています。管理人は実感できないのですが、もしかしたら、そのせいで、表示が重くなっているかもしれません。もしも、フリーズしてしまったという場合は、衣替えはしない方が無難かもです。
float は甘くない!Firfox と IE では表示が違う!
»»  2010.02.25.
[Edit]
画像ボタン含むGタイプPタイプ衣替えのための変更箇所

表紙月別更新
.rireki{text-align:right;}

月別アーカイブページ・検索ページ下部
</div><br /></div>→</div></div>

通常ブログ・月別アーカイブページ・検索ページ下部

<div align="right"><a href="#pagetop" title="↑ページトップへ"><i><small>▲PageTop</small></i></a></div>
<br />

<p class="back-top" ><a href="#pagetop" title="↑ページトップへ">▲PageTop</a></p>

カテゴリ・タグ・全記事一覧・ページナビゲーションliにクラス名追加
<!--not_permanent_area--><!--not_edit_area-->
<!--not_page_area--><!--not_date_area--><!--not_search_area-->
<ul class="entry_navi">
<!--prevpage--><li class="back"><a href="<%prevpage_url>">Back</a></li><!--/prevpage-->
<!--nextpage--><li class="next"><a href="<%nextpage_url>">Next</a></li><!--/nextpage-->
</ul>
<!--/not_search_area--><!--/not_date_area--><!--/not_page_area-->
<!--not_titlelist_area--><!--not_category_area--><!--not_tag_area-->

個別記事ページコメント欄
<li class="entry_top"><a href="#h2_<%pno>" title="↑記事冒頭へ"> ▲EntryTop </a></li>

全記事一覧

<div align="right"class="co_num<%category_count>"><a href ="#pagetop" title="↑ページトップへ"><font style="font-size:80%"> <i>PageTop</i></font>▲</a></div>



<p class="back-top"class="co_num<%category_count>"><a href ="#pagetop" title="↑ページトップへ">PageTop▲</a></p>

#titlelist p.back-top {font-size:80%;text-align:right;}

スクリプト
if(list.length > 0) document.write('<ul class="co_num<%category_count>">');


スタイルシート IE6バグ対処
/*投稿フォーム:ラベル*/
dl.co_form dt label {
position : absolute;_position : absolute;_position: static; text-align : left;
width : 50px;font-size: 90%;
}


上を以下に変更↓

/*投稿フォーム:ラベル*/
dl.co_form dt label {
text-align : left;position : absolute;
width : 50px;
}
#permanent dl.co_form dt label{_position: static;
}



↓古書テンプレHTML対応用にnovel-Rタイプに以下を追加
.all{overflow: hidden;}

2011.6.23.
変更個所覚書
»»  2011.06.23.
[Edit]

background-attachmentをIE6に対応させる方法
* html #contents {
background-position: expression('10px '+this.parentNode.scrollTop + 'px');
}
CSS Lecture



display:block した a 要素(リンク)を IE6 でも安定させる方法

width プロパティで横幅を指定してあるセレクタにoverflow : hidden; を追加

はじめてのブログデザイン




リロード、スクロールで線・画像が消える。通称「いないいないばあバグ」

いないいないばあバグの対処法
1.問題の出る要素を囲っている div に line-height を指定する。
2.問題の出る要素に width または height を指定する。
3.問題の出る要素の中の要素に position:relative を指定する。



ネガティブマージンをIE6.0でも使う
ポイントになるのが「position: relative;」の部分です。
IE6.0対策になるのですが、IE6.0ではネガティブマージンを使っても、
「ー(マイナス)」部分のピクセルは表示されません。
「position: relative;」を併記することによって、
(なぜか)SafariやFirefoxのように、きちんと表示してくれます。
「ポルカの日記 | CSSベースのHTMLレイアウト入門講座」




IE6でposition:fixedの真似ごと
IE6のバグのまとめ.
WinIE6バグ回避法
IE6で、マージンが2倍になってしまうバグ
IE6でよく遭遇する6つのバグとその解決方法
IEのhasLayoutで起こる不具合
CSSハック一覧 – IE, Firefox, Safariなどなど


IE6以下をIE7と同じようにするライブラリ『IE7.js』
IE7.js/IE8.jsを使って、スタイルシートの標準化

2011.6.25.
IE6バグと対処法あれこれ
»»  2011.06.25.
[Edit]
J・Jfタイプのテンプレートでサイトナビの配置を top:0 left:0 で、画面上に移動して表示させた場合、ページ内リンクを使うと、サイトナビは検索バーの下に隠れて見えなくなってしまう。

対処法その1 検索バーを非表示に設定する。 
対処法その2 コンテナ上部にマージンを指定して、サイトナビの表示位置を下にずらす。
.container { margin-top : 20px ; }

PageTopへのリンク

アンカーの位置によっては、特定のテンプレートやプラグザでリンクが無効になってしまう。
フルスクリーンやクロスフェード表示のために画像タグが原因らしいが、
<class="all"> ~ </div>を用いたJ・Jfタイプのテンプレートにその傾向がある。


とりあえず、アンカーの位置を変更すれば直るので、個々のテンプレートごとに、行き当たりばったりで直している現状。

ブラウザごとにテンプレートを照合し、リンクが無効になる場合のアンカーの位置を確認する必用あり。

<body>
-----------(A1)-----------

<!--フルスクリーン表示のための追加ソース-->

-----------(A2)-----------

<div class="all">

-----------(B)-----------

<div class="main">

-----------(C1)-----------

<!--(表紙)クロスフェード表示のための追加ソース-->

-----------(C2)-----------


<div class="container">

-----------(D)-----------



<a name="pagetop" id="pagetop"></a>

novel-JF-HatuAkiの場合 
A1 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
A2 IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
B  IE6のみ 表紙もそれ以外のページも✕ IE6以外はOK
C1 IE8のみ 表紙のみ✕ IE8以外はOK
C2 IE8とIE9 表紙のみ✕ IE8.9以外はOK
D  IE8のみ 表紙のみ✕ IE8以外はOK


IE6で、ブロックmainより外側(A1(A2)(B))にアンカーを設置してもページ内リンクが無効になるのは、ダブルスクロールを防止するために、.all や body ・ html 等に指定した _over-flow:hidden が原因と思われる。

また、.main以下のブロック(C1)(C2)(D)に設置した場合、表紙ページで、IE8やIE9でページ内リンクが無効になる原因は、間違いなく、クロスフェードのソースにある。

しかし、クロスフェードソース(ブロック#gallery3 )直下のブロック(.container)にアンカーを設置した場合(D)に、.container{position:relative}と指定しているにも関わらず、なぜ、IE8でページ内リンクが無効になるのかその原因は不明。

考えられる対策その1 
IE6のページ内リンクをあきらめるか、ダブルスクロールを我慢して、mainより外側(A1(A2)にアンカーを設置する。

考えられる対策その2
main内(C1)にアンカーを設置した上で、スタイルシートで、IE8で #pagetop の配置指定を追加する。今のところ、この方法が一番有効。

#index #pagetop { position : absolute ; /position : static ; z-index:100 ; top: 0 ; left : 0;}


通常ブログ画面で記事下部へのアンカーが効かない場合
原因:半角スペースを削除したせいか、ブラウザ(IE8)によってはアンカーが無視されてしまう
対策:paddingを設定することで着地点の領域を確保し、認識させる
#page ul.entry_state + a {width:10px;padding:2px;}
ページ内リンクあれこれ
»»  2012.09.07.
[Edit]

左右カラム可変 リキッドレイアウトサンプル



幅 600px 右サイドメニュー



html { _overflow-x: scroll; }/*IE6 縮小画面の時の横スクロール用*/

.container {
margin : 0px auto ;
max-width : 600px;_width : 600px;
text-align : left ; }

.layout_main {
float : left;
width : 65%;_width : 400px; }

div.layout_side {
float : right;
width : 30%;_width : 180px; overflow: hidden;}


ポップアップ表示 基準は#wrapper スクロールと連動


#wrapperを基準にホップアップさせた場合、position:absoluteを指定しても親ブロック(.main)で_position: relative を指定しておかないと、IE6では表示位置が固定されてしまい、縮小画面にした時見えない部分が出来るので注意

#index .all .main { _position: relative ; }/*IE6ポップアップ固定防止のため*/

#index .all #wrapper { position: relative;_position:static ; }

.popupcard { width:67%;max-width:400px;_width:400px;
right: 30%; top:40px;_top:320px;_right:50%;
z-index:1; visibility:hidden; position:absolute;text-align:center;
}

.layout_side .popupcard { margin:0 ;background-image :none ;}

.popupin {
max-width:300px;_width:300px;
margin:40px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:5px 10px;text-align : center ;
border:line-height:200%;background-color:#ffffff;border:3px double #C2A858 ; }

#step2 .popupin { margin-top:20px;max-width:350px;_width:350px ; }

.popupin2 {
max-width:320px;_width:320px;max-height:200px;_height:200px;overflow: auto;
margin:20px auto 0 auto ;_margin : 20px -100px 0 auto;_position: relative;
padding:0 1em 0 1.5em;text-align : left ;
line-height: 150%;
background-color:#ffffff;border:3px double #C2A858;
}
.layout_side .popupin2{max-height:220px;padding:1em ;_position: relative ; }

.popupcard h3{
margin:0 auto ;_margin : 0px -100px 0 auto;_width:400px;
padding : 0px ;font-weight: bold;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;
}
#index .side_menu .popupcard h3{
max-width:400px;_width:400px;_position: relative;_margin : 20px -100px 0 auto;
border:none ;background-color :transparent ;background-image : none;
color:#633;text-align : center ;}

.pop_free {max-width:350px;_width:350px;margin-top:20px;max-height:350px;_height:auto;line-height:150%;overflow: auto;text-align : left ;
}

/*背景画像の表示領域を確保するための設定*/
#index .topindex { min-height:〇〇px;_〇〇px ; }
hr.bg_line { visibility:hidden; }/*トップ画像が一枚絵展示スタイル*/

hr.bg_line { dispaly:none; }/*一枚絵展示でなければ非表示設定でOK*/

GタイプJタイプ対応のための背景設定


/*#wrapperで背景指定する場合*/

#index .all div#wrapper {
min-height:〇〇px;_height:〇〇px;
background-image : url("画像ファイル");
background-repeat : no-repeat ;
background-position : left bottom;}


#index .all div#wrapper {overflow: hidden;}

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

/*\*/
* html #index .all div#wrapper {
height: 1em;_height:1em;
overflow: visible;
}
/**/
サンプルコード
»»  2012.09.09.
[Edit]

body 直下のボックスを中身がなくても、画面下まで背景を表示させる(PF/PF2タイプ以外)



(1)全てのエリアでmain背景を上から下まで表示させる

最大幅を指定していない場合
dt7_novel-template, novel-S-spring, novel-S-muguet, novel-S-blue, novel-S-laceなど


html { height:100%;_overflow: hidden;_overflow-x: scroll; }

/*全てのエリアでmain背景を上から下まで表示させる場合for JGfor JG*/
html.index,html.page,html.date,html.search,html.tag,html.category,html.edit,
html.permanent,html.titlelist
{ overflow: hidden;_overflow-x: scroll ; }


html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height:100% ; overflow : hidden ; } /*for JG*/

body > .all { height:100% ;}

.main { height:100%; min-height:100%; overflow:auto ; }

body > .main { height:auto ; }


#index .all .main{/overflow:hidden;_overflow:auto ;}


ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとなる
  • body と all を height:100% で固定しているので、JGタイプもJGタイプ以外も全て背景は main の指定によって下まで表示される。
  • しかし、最大領域を指定しているテンプレートの場合、上では指定した横幅の位置にスクロールが表示されてしまう為、その場合は(4)の方法で指定する


最後の#index .all .mainの指定は不要な場合もあるが、スタイルによってはJGタイプに変更時IE7で、縮小画面の内側にダブルスクロールが出る事があるのでそれを防ぐ為に一応記述
#index .all .main { /overflow : hidden ; _overflow : auto;}/*for IE7JG*/

JGタイプの場合、mainで指定した中央表示の背景は、(スクロールの幅だけ)若干右にずれて表示される。中央部が狭い背景画像は、そのずれが目立つので注意。

(2)個別記事エリアだけでmain背景を上から下まで表示させる場合


ほとんどのテンプレートがこれ。背景をフルスクリーン表示させている時も共通。
以下は個別記事エリアのmain背景だけを上から下まで表示させる場合。


html { height : 100%; _overflow: hidden ; _overflow-x: scroll; }

/*個別記事エリアfor JG*/
html.permanent { overflow : hidden ;_overflow-x : scroll ; }

html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

body { height : 100% ;}

.all { height : 100%; min-height:100%; overflow:auto;_overflow : hidden ;} /*for JG*/

body > .all{ height:auto; }

#permanent > .all { height : 100% ; }

.main { height:100%; min-height:100%; overflow:auto;}

body > .main{ height:auto; }


#index .all .main { /overflow : hidden ; _overflow : auto ;}



フルスクリーン表示の時はmain に position :relatvie を追加
.main{ height:100%; min-height:100%; overflow:auto;position: relative;}


(3)最大幅を指定していない個別記事以外のエリアでmain背景を左下もしくは中央下まで表示させる場合

novel-R-Papillon,novel-S-pumpkin1, novel-S-icyou, novel-S-rose, novel-S-berryなど

(2)の基本コードに 個別エリアと同じように記述して追加。以下は全記事一覧ページmain背景を左下もしくは中央表示させる例

/*背景を上から下まで表示させるエリアfor JG*/
html.permanent , html.titlelist { overflow : hidden ;_overflow-x : scroll ; }

#permanent > .all { height : 100% ; }
#titlelist > .all { height : 100% ; }



(4)最大幅を指定している個別記事以外のエリアのmain背景を上から下まで表示させる場合


novel-Rf-Jyugoyaシリーズなど右寄せのデザインなど最大横幅を指定してある場合、(3)の方法では幅広パソコンなどで閲覧した場合、最大横幅の位置に縦スクロールが表示されてしまう。
これを避けるために、最大横幅を指定してあるエリアは、(3)の方法ではなく、(2)の基本コードのまま、maine と all の指定で調整する。
main で背景を右下まで表示させており、なお且つ最大幅を指定しているエリアは main と all で重複指定し、その上で、.all .main つまり、JGタイプのの時の main 背景を非表示に指定する。

/*最大横幅を設定しているエリア用*/
#index ,#category,#tag,#page ,#date,#search ,#edit {max-width:1400px;}

#index .main,#index .all{
background-color : transparent;background-attachment: scroll;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6_700.jpg"); background-position: right top;background-repeat: repeat-y;}

#page .main,#page .all{
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane6b_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#search .main,#search .all,#date .main,#date .all
{background-color : transparent;
background-image : url("http://blog-imgs-30.fc2.com/n/o/v/noveltemplate/s_karahanakasane4_720w.jpg"); background-position: right top;background-repeat: repeat-y;background-attachment: scroll;
}

#index .all .main,#page .all .main,#searach .all .main,#date .all .main,
{background-image :none;background-color : transparent;}




(5)最大幅を指定している全記事一覧ページのmain背景を右下まで表示させる場合


(2)と(3)のコードに加え、以下を追加


#titlelist{overflow : hidden ;}
#titlelist .main{ height:100%; overflow:auto;}


#titlelist .sub_block {
margin:0; padding:0; width : 180px ; height:100%;
right : 620px ; top : 0;
position:absolute; z-index : 4 ;overflow:auto;text-align : center;
}


最大横幅を指定した上で、sub_block を コンテナのすぐ左に表示させるには、position:fixed ではなく
absolute で指定する必用がある。しかし、absolute で指定すると、sub_block が固定されず、画面に連動して上下してしまう。それを避けるために、ボディのスクロールを非表示にした上で、main と sub_block の高さを100%で固定し、それぞれ別個にスクロールさせる。但し、全記事一覧ページはサブボックスがあるため、最大幅の位置にどうしても縦スクロールが表示される。
ポイント
  • htmlにクラス名が追加してあるのも、ボックス all があるのもJGタイプだけなので、JGタイプ以外では main が body 直下のボックスとして背景は下まで表示される。
  • mainを左下もしくは中央下まで表示させる場合、個別記事や全記事一覧・目次ページなど、
    sub_blockがあるエリアでは、all での代替え指定はできないため、
    他のエリアとはコードが違ってくる。



補足



JGタイプの時IE6で、縮小画面がダブルスクロールになる場合は、以下を追加
html.index{_overflow-x:hidden;}/*for IE6JG*/
JGタイプの時IE7で、縮小画面に横スクロールが出る場合は、以下を追加
html.index {/overflow-x:hidden;_overflow-x: scroll;}/*for IE7JG*/

Jタイプの時IE6で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加
.all .main{_position: relative;}/*for IE6JGスクロール固定防止の為*/
Jタイプの時IE6 と IE7 で、(表紙や通常ブログ画面の)コンテナ部分がスクロールしない場合は以下を追加

.all .main{/position: relative;}/*for IE6&IE7JGスクロール固定防止の為*/
修正版ボックス背景全面表示とスクロールの覚書ver1210
»»  2012.09.21.
[Edit]
去年の秋から、手がけ始めたスマートフォンテンプレート。

九分どおり出来上がってはいたのですが、完成を目前に、暗礁に乗り上げてしまいました。
頭が煮詰まってしまったので、しばらく間を置こうと、無責任にも、そのままの状態にしておいたのですが、数か月を経て、トリ頭の管理人は、スマホ用テンプレの完成している部分の詳細までぼやけつつあります。

これはマズイ!
ということで、とりあえず備忘録のつもりで、スマホ用テンプレの現状、問題点など整理しておきます。

問題点その1
スマホ用テンプレは、表紙ページと通常ブログ画面の第1ページ目を区別できない。
双方とも、同じインデックスエリアとされてしまう。

問題点その2
スマホ用テンプレは、タグエリア・タイトルリストエリア・検索エリアを表示できない。

問題点その3
スマホ用テンプレの記事一覧ページの表示件数の上限は10件である。

問題点その4
スマホ用テンプレは、一部の旧サーバーブログでは、反映されない非公開変数がある。

問題点その5
旧サーバーブログで反映されない非公開変数は、新サーバーブログでも、IEでは反映されないため、プレビュー等で確認できない。(IE以外で確認すれば済むけれど厄介)


スマホ用テンプレートは単独では小説用として機能させるのは難しいため、一般用として共有公開する。
小説用とする場合は、パソコン用のテンプレートと併用して使用する。

スマホ用の小説テンプレート(spメイン)と、それと併用して用いるパソコン用テンプレート(spサブ)のHTMLはサイト内配布する。


問題点その1~その3の解決のため、スマホ用小説テンプレでは、通常ブログ画面の第1ページ目・タグエリア・タイトルリストエリア・検索エリアはパソコン用テンプレートのプレビューページで表示させる必用がある。

一般テンプレートとして公開する事を考えると、表紙と通常ブログ画面第1ページ目はID指定による表示の振り分けができなくなる。よって、表紙と通常ブログ画面第1ページ目ではクラス名を変える必用がある。同じクラス名は使えない。

一般用はサムネイル画像が表示されるスタイルで公開するが、小説用は表示させない。


問題点その4~その5について
反映されない非公開変数とは、スマホテンプレでのみ有効な、記事内に画像が有る場合にサムネイルを表示する変数<%topentry_image_72><%topentry_image_w300>のこと。

昨年秋、ちょうど管理人のスマホ用テンプレが出来上がりかけた頃に公開された以下の公式テンプレートは、本来であれば、サムネイル画像が表示される。
new_basic_red
basic_black_st
basic_black_bt
しかし、一部の旧サーバーブログではサムネイルが表示されない。
スマートフォンテンプレート難航中
»»  2013.01.20.
[Edit]

月別アーカイブページパン屑リスト


月別アーカイブページにおいて、変数<%subtitle>の表示内容の改訂によりパン屑リスト及びStileKeeperのスクリプトが無効になってしまった。(以前は記事の更新年月日の数字のみに変換されたが、現在は、年月日の漢字も表示)

例2014.1.1.に更新された記事
改訂以前 20140101  現在 20140101
色々試してみたが、難航中。自力では歯が立たない場合は作者様に相談。
 

一ヵ月更新がない場合の指定追加


HTML


<!--▽月別アーカイブページ・検索ページ下部-->
<!--not_index_area--><!--not_permanent_area--><!--not_category_area--><!--not_page_area--><!--not_tag_area--><!--not_edit_area-->
<!--not_titlelist_area-->
<!--topentry-->
<div class="entry-body kakusi<%topentry_category_no> ad<%topentry_no>">



ヘッド内CSS



li.ad,tr.ad,ul.nl li.ad,ul.entry_list li.ad{ display: none; }

Monthly_Rf_Jyugoya


外部ファイルCSS

<!--以下は月替わりスタイルシート設定-->
<!--permanent_area--><!--topentry-->
<link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%topentry_month>.css" type="text/css" rel="stylesheet" />
<!--/topentry--><!--/permanent_area-->
<!--not_permanent_area--><link href="http://blog-imgs-45.fc2.com/n/o/v/noveltemplate/Jugoya_<%now_month>.css" type="text/css" rel="stylesheet" /><!--/not_permanent_area-->
<!--月替わりスタイルシート設定ここまで-->






以前?の改訂の取りこぼし
コメントリストの見出し、HTML は h4 で、スタイルシートは h3 で指定している。
.comment-list h4

PFタイプ fieldsetフォントが変



#permanent .index-navi fieldset

PFタイプ2013.5.26.修正


アンカーの調節のためにネガティブマージン指定
全記事一覧ページの見出しミス修正と<h2>→<h3><h3>→<h4>


<!--category_nosub--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_nosub-->
<!--category_parent--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h3><%category_name></h3></div>
<!--/category_parent-->
<!--category_sub_hasnext--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_hasnext-->
<!--category_sub_end--><div id="all<%category_no>" class="co_num<%category_count>"style="margin-top:-50px;"> 
<h4><%category_name></h4></div>
<!--/category_sub_end-->


.entry_all ul {
margin : 0px 10px 20px 20px;
padding : 0px 0px 0px 20px;
list-style-type : square;;
}

ver1303


コメント・トラックバック共に受け付けない場合layout_side2ブロックとnavi_4を非表示
head内スタイルシートに以下を追加

#permanent .cm-tb-{display:none;}

layout_side2 と navi_4のクラス名を追加して以下に変更
<div class="layout_side2 cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry-->">

<div class="navi navi_4<!--permanent_area--> cm<!--topentry--><%topentry_comment_num>tb<%topentry_tb_num><!--/topentry--><!--/permanent_area-->">


通常ブログ画面のIE6バグ対処法

entry背景が領域を超えて表示される場合は、高さとアンカーのための下パディングを指定する。
この時、下パディング分の1pxがメインカラム背景色と相反して目立つ場合は、ul.entry_stateにネガティブマージンを指定して隠す。

#page .entry{margin : 0px;
_height:1px;_padding-bottom:1px;/*IE6バグ対策*/}

#page ul.entry_state{_margin-bottom:-1px;/*IE6バグ対策*/}

ver1302


サムネイル表示変数を追加
HTML
タグエリア

<div class="entry_text4">
<!--body_img--><%topentry_image><!--/body_img--><%topentry_discription>
<p align="right">

月別・検索ページ
<div class="entry_text">
<p align="right"><%topentry_year>.<%topentry_month>.<%topentry_day> (<%topentry_youbi>)</p>
<div class="entry"><!--body_img--><%topentry_image_72><!--/body_img--><%topentry_discription></div>

CSS
追加

.entry_text4{min-height:1px;}
.entry_text4 img {height: 150px;width:auto;float:left; overflow: hidden;margin:0;padding:0;border-right:5px solid #f0f8ff;}
#date .entry img,#search .entry img
{float:left;height: 90px;width:auto;margin:0;padding:0; border-right:5px solid #fff4dc;}


変更

#tag p.back-top ⇒.tag-frm1 p.back-top
#tag h2 ⇒.tag-frm1 h2

タグエリアが羊皮紙の場合
div.tag-frm2 { margin : 0 auto;text-align:left;max-width:580px;_width:580px; }

.entry_text4 {
max-width : 470px;_width : 470px;max-height : 150px;_height : 150px;
margin : 20px auto 10px auto ;
padding : 20px 4% 10px 4% ; line-height : 170%;
background-color : #f0f8ff;
font-size : 90%;
border : 1px dotted #C2A858 ;overflow:auto;
}


/*<<もくじ*/
.mokuji a{ color : #900000; font-weight : bold;}
.mokuji a:hover{ color : #ffffff; font-weight : bold; background-color:#006400;}

p.tag_btm{margin : 0 auto; max-width:580px;_width:580px;line-height:100%;}
.tag-frm1 a{background-color:#f3e5c0}

月別・検索が羊皮紙カードの場合

#date .entry,#search .entry {margin : 0px auto;padding:0;max-width:430px;_width:430px;
height:130px;overflow:auto;}

#search p.back-top,#date p.back-top{
font-size:1%!important;margin:20px 0 0px auto;width:70px; background-image : url("http://blog-imgs-62.fc2.com/n/o/v/noveltemplate/seal_dokuro75.gif"); background-position:right center;background-repeat:no-repeat;overflow : hidden; }

#date .entry-body h4,#search .entry-body h4{max-width:480px;margin:0 auto;text-align:right;}

ver1301

.sub_block関連エントリー と関連目次一覧 を折りたたみ

.sub_block {height:100%;overflow:auto;} 追加
#category div.sub_block {text-align : center;position: absolute;} 削除
#category .sub_block_in {padding-top:0em;} 削除



ボックス表示風にする場合は、関連目次一覧のための追加設定 を以下に差し替え

#category div.sub_block .side_menu{margin:0;}
#category div.sub_block .movecat {background-color : #fff;}
#category div.sub_block .movecat fieldset {margin:0;padding:0 0 0 1em;border:none;}
#category div.sub_block .movecat a{display:block;}
#category div.sub_block fieldset a:hover{color : #fff;background-color : #900;}
#category div.sub_block legend {width:170px;background-color : #fff;font-size:16px;}
span.ichiran-p {font-weight:bold;border-bottom:2px dotted #C2A858;font-size:110%;}
span.ichiran-p a:link,span.ichiran-p a:visited { color : #800080; text-decoration : none;}
span.ichiran-p a:active, span.ichiran-p a:hover{ color : #000000; text-decoration : none; background-color:#fff;}



横スクロールバーが出ている場合は以下を削除

#category div.sub_block {width:180px;}



全記事一覧ページ.sub_block top リンクのアンカー変更

Jタイプクロスフェード追加ソース2 挿入位置

novel-S,novel-Rタイプ以外に、navi_2,navi_4 改行追加

コメント編集時のテキストエリア 高さ指定(height:300px;)追加

#edit dl.co_form dd textarea#comment{
width:95%;max-width : 600px;_width : 600px;height:300px;}



ver1212

改訂テンプレート:novel-Iタイプ
改訂内容:表紙ページ noscript部分を分離し、#index .layout_mainで背景を指定する。
#wrapperの上に#index .layout_mainの画像・背景色を表示させることで、JS無効時にカード上の文字列を消す。

<div id="wrapper">
<!--index_area-->
<!-- ▼▼▼ 表紙メニューポップアップ表示コンテンツここから ▼▼▼ -->
<div id="top_pop" style="display:none;">
~ 中略 ~
</div><script> document.getElementById("top_pop").style.display = "block";</script>
<!--▲▲▲ 表紙メニューポップアップ表示コンテンツここまで ▲▲▲-->

<noscript>
<div class="layout_main">
~ 中略 ~
</div>
</noscript>
<!--/index_area-->

<!--not_index_area-->
<div class="layout_main">
~ 中略 ~
</div>
<!--/not_index_area-->


#index .layout_main{ width:100%;max-width : 800px;_width : 800px; float:left;
height:440px;overflow:hidden;margin:0px -250px 0 auto;/padding-top:70px;
background-image : url("http://blog-imgs-43.fc2.com/n/o/v/noveltemplate/f00240_800X500x.gif");
background-repeat : no-repeat ;
background-position :right top ;}

ver1211

2013.3.19.改訂
改訂テンプレート:全記事一覧ページが右寄せレイアウトのnovel-R/Rfタイプ
novel-Rf-Jugoyaシリーズ以外(Jugoyaシリーズは既に改訂済み)
改訂内容:全記事一覧ページを1400px以上は右寄せさせない。

#titlelist { max-width:1400px;}
#titlelist { overflow : hidden ;}
#titlelist> .all { height:100%;}
#titlelist .main { height:100%; overflow:auto;}

#titlelist .sub_block { position:absolute;right : 640px ;}
#titlelist .sub_block_in { padding-top:0em;}


おまけ:HTMLからentry_all 内の以下を削除
「カテゴリ別表示は、JavaScript を オン にしてください。」

#index ,#titlelistなどID指定したbodyにpadding:0;margin:0;指定をすると
IEでは、検索バー領域を無視してレイアウトされてしまう。
Firefoxでは指定しても検索バー領域は確保される。

結果、body以下のブロックにheight:100%;を指定した場合などブラウザによって表示が違ってきてしまう。
これを避けるために、ID指定したbodyにはpadding,margin指定はしない。

ver1301mp

2013.3.19.改訂
改訂テンプレート:全携帯テンプレ
改訂内容:コメント編集エリア追加・コメトラ一覧ページナビにテキスト(先頭・最後)追加

バージョンアップ改訂内容覚書
»»  2013.03.20.
[Edit]

レスポンシブWEBデザイン導入顛末記


別ブログから申請中の画像用テンプレートにレスポンシブWebデザインを導入してみました。
画像テンプレにかかりっきりで、すっかり御無沙汰してしまったこちらのブログの保守(広告削除)兼、備忘録として、導入までのアレコレをこちらに記します。

レスポンシブWEBデザインとは、CSS3のメディアクエリを使用して見た目を変更するWeb ページの構築手法です。

それだけじゃわからな~いという方は
レスポンシブWEBデザイン導入前 と 導入後 のテンプレートのサンプル をご覧あれ

レスポンシブWEBデザイン導入前  
サンプル
レスポンシブWEBデザイン導入後  サンプル

解析度(画面サイズ)1024px以上の場合は、どちらも同じように見えます。
しかし、画面横幅を1024px以下に狭めていくと、レスポンシブWebデザイン導入後のサンプルは、画面サイズによってサムネイル画像のグリッドサイズも変動し、レイアウトも変わっていきます。
s_RWD.jpg

このように、パソコンやタブレット、スマホなど、閲覧端末の画面サイズに合わせて、サイトデザインレイアウトが変わるのがレスポンシブWebデザインです。

ワンソース、マルチデバイス対応可能。つまりスタイルシートをパソコン用やタブレット用、スマホ用と端末別に作成しておけば、HTMLは同じものが使えるという、WEBサイトを構築する上では、かなりエコで便利な代物。

しかし、拙作テンプレの場合、元々リキッドレイアウトだし、投稿画像に関しても、閲覧サイズに合わせて可変するように指定してあるし、何より、FC2ブログの場合、パソコンからの閲覧はパソコン用テンプレート、スマホからの閲覧はスマホ用テンプレートに振り分けられて表示されるので、あまり関係ない…と思っていたのですが、そうも言っていられなくなりました。

現状では、閲覧端末を判別して、アクセス先が自動的に振り分けられるのは、アクセス先のアドレスに、?pc &pc ?sp &sp  ?m &m などのクエリのついていない場合に限られます。
しかし、検索エンジンの検索結果によっては、url末尾に &pc ?pc がついたパソコン用アドレスや?sp &sp がついたスマホ用アドレスでヒットすることがあります。
それらをクリックすると、閲覧端末に関係なく、パソコン用アドレスはパソコン版テンプレート、スマホ用アドレスはスマホ版テンプレートで表示されてしまうのです。

また、タブレットからアクセスした場合、アクセス先に端末別のクエリがついていなければ最初はパソコン版テンプレートで表示されますが、端末別のアドレスと一致していないと認識されるのか、画面上にスマホ版テンプレートへのリンクボタンがどーんと表示されます。
昨今のタブレットの普及率は著しく、私の周囲でも、インターネットはパソコンは止めて、タブレットにしたという人間が徐々に増えていますので、これもちょっと考えなきゃいけなそうです。

というわけで、ものは試しと、画像テンプレの方に、レスポンシブWebデザインを導入してみました。
これがうまくいったら、徐々に、小説用テンプレにも導入していく予定です。

では、ここからが本題です。

FC2ブログテンプレートにIE8以下でもレスポンシブWEBデザインを適用させる



単純にレスポンシブWEBデザインを適用させるだけなら、メディアクエリの指定を追加するだけですので、さほど難しくありません。
fc2ブログの場合スタイルシート編集部分に以下のようにメディアクエリの指定を記述すればOKです。

/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

画面の横幅が768pxまでの場合のスタイル記入

}

/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){

画面の横幅が320pxまでの場合のスタイル記入

}


IE9以上および、モダンブラウザはこれだけでOKです。
但し、IE8以下は、ダメです。
CSS3未対応のIE8以下に、どうやってレスポンシブWebデザインを実装させるか、管理人にとっては、これがとんでもない難問でした。


以下は、参照させていただいたサイト様の記事

IE用にcss3-mediaqueries.jsを実装させる
【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。
IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法
レスポンシブWebデザインをIEに対応させる方法
【CSS3】メディアクエリをIE7、IE8でも使えるようにする
レスポンシブwebデザインに関する自分用メモ
Media QueriesがIE8で効かない場合の対処法
css3-mediaqueries.jsが効かなくて困った時のまとめ

IE8以下にレスポンシブWebデザインを実装させるには、IE8以下にcss3(メディアクエリ)を適用させるためのスクリプトが不可欠なようで、以下の二つのうち、いずれかを装着する必用があるようです。

Respond.js
css3-mediaqueries.js

両方試したが、動かない。

調べてみると、Respond.js  は属性セレクタが無効になる事が判明。

■respond.js
Adobe Dreamweaver CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。
非常に軽量でサクサク動き、にわかに本命的な扱いをされてる気がするものですが、
2012年6月時点で「属性セレクタの記述をすると無効になる」という痛いバグがあります。

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録



となると、属性セレクタがあふれまくっている拙作では使えないため、css3-mediaqueries.js 一本に絞って再トライ。

以下をhead内に追加

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->
<![endif]-->



まだ、動かない。
css3-mediaqueries.js は、中々取扱が難しいスクリプトな様で、様々な条件化で無効になるらしい。

メディアクエリの指定方法は、通常のメディア属性の指定と同様に

 ・link要素のmedia属性で指定
 ・@import規則で指定
 ・@media規則で指定

のいずれでも指定可能なのですが、
css3-mediaqueries.jsを使う場合は@media規則で指定しないと効きません

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録



特殊な条件が揃うと無効になることがある。
1.@mediaの記述だけを別ファイルにする
2.@media記述より前に@charset記述を書く
3.@mediaの記述以外の通常のCSSルールは書かない

上記全てが揃うと、100%無効になります。
普通のCSSの中にメディアクエリの記述を混ぜる場合には全く問題ないのですが、
管理しやすくしようとメディアクエリの記述のみを単独で別ファイルにした場合にハマる危険があります。

css3-mediaqueries.jsが効かなくて困った時のまとめ_とあるコーダーの備忘録


色々試してみた結果、拙作テンプレの場合は、
外部ファイルである【スタイルシート編集】内の
『普通のCSSの中にメディアクエリの記述を混ぜる場合』でもダメだったため、
head内で 直接スタイル指定したところようやく動いた!

外部ファイルではなく、head要素内にstyle要素を配置して、その中にメディアクエリの設定内容を記述

<style type="text/css"><!--
/*===============================================
画面の横幅が768pxまで
===============================================*/
@media screen and (max-width: 768px){

画面の横幅が768pxまでの場合のスタイル記入

}

/*===============================================
画面の横幅が320pxまで
===============================================*/
@media screen and (max-width:320px){

画面の横幅が320pxまでの場合のスタイル記入

}
--></style>





まとめ


属性セレクタをつかっている(拙作テンプレの)場合 Respond.js ではなく css3-mediaqueries.js を装着する。
FC2ブログテンプレートの場合、メディアクエリの指定は、外部CSS(スタイルシート編集部分)ではなく、全て(HTML編集部分)head要素内にstyle要素を配置して記述する。


ドキュメント宣言をいつまでたっても理解できない管理人は、当初、参照サイト等で上のスクリプトと共に紹介されていた html5shiv もホイホイDLして装着していましたが、これもNGの一因でした…(^^ゞ


2013.09.24 (Tue)
IE8以下もレスポンシブWebデザインを適用させる方法 FC2ブログテンプレートの場合
»»  2013.09.24.
[Edit]

名前変換フォーム

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