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

スポンサー広告

スポンサーサイト

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


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

カスタマイズの備忘録

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

この作品は夢小説のサンプルですので、左上の名前変換フォームで設定すると、主人公の名前を変換してご覧になれます。
Novel テンプレートは五つの基本設定をして初めて、目次も前話ページ次話ページへのナビも表紙メニューも小説一覧ページ(NovelList)も自動作成されます。御利用の際には五つの基本設定をお忘れなく!
 ←全記事一覧ページ(総目次)を1ページで作成する →表示記事件数の上限が50件になったので設定を変更しましょう!
 

レスポンシブ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)
関連記事
スポンサーサイト


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

~ Comment ~

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

To:シークレットE様

コメントありがとうございます。

> 本当に何も知らないくて、どうやってテンプレートの配布を頼んだらいいのかわかりませんでした(汗)

テンプレートのDLの方法(novel-J-mono2をご利用になる場合)

共有テンプレートの追加画面を開き⇒
テンプレートの名称部分に「novel-J-mono2」と入れて【検索】をクリック⇒
【詳細】をクリック⇒
開いた画面の【ダウンロード】をクリック
テンプレート管理画面を開き
追加されたnovel-J-mono2を適用に設定。

詳しくは以下のコメント
http://noveltemplate.blog26.fc2.com/blog-entry-53.html#comment172

もしくは

FC2ブログ公式マニュアル「テンプレートの設定」
http://help.fc2.com/blog/manual/Home/template/kanri.html

をご参照ください

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます
カスタマイズに関するご質問は、他の方がその情報を共有・検索しやすくするため、最新記事や個々のテンプレートの説明記事ではなく、できるだけマニュアル内の関連記事にお願い致します。
初めて投稿なさる方は必ず  コメントの際の諸注意 をご確認ください。URL表記のないご質問、シークレットコメントのみのご質問等、諸注意を無視したコメントには返答致しません。
管理者のみ表示。 | 非公開コメント投稿可能です。
  ↑記事冒頭へ  
←全記事一覧ページ(総目次)を1ページで作成する    →表示記事件数の上限が50件になったので設定を変更しましょう!

名前変換フォーム

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