31以上で同一カテゴリ内の新着エントリー順に表示します。別ブログから申請中の画像用テンプレートにレスポンシブWebデザインを導入してみました。画像テンプレにかかりっきりで、すっかり御無沙汰してしまったこちらのブログの保守(広告削除)兼、備忘録として、導入までのアレコレをこちらに記します。ページの構築手法です。サンプル解析度(画面サイズ)1024px以上の場合は、どちらも同じように見えます。画面横幅を1024px以下に狭めていくと、レスポンシブWebデザイン導入後のサンプルは、画面サイズによってサムネイル画像のグリッドサイズも変動し、レイアウトも変わっていきます。このように、パソコンやタブレット、スマホなど、閲覧端末の画面サイズに合わせて、サイトデザインレイアウトが変わるのがレスポンシブWebデザインです。ワンソース、マルチデバイス対応可能。スタイルシートをパソコン用やタブレット用、スマホ用と端末別に作成しておけば、HTMLは同じものが使えるという、WEBサイトを構築する上では、かなりエコで便利な代物。拙作テンプレの場合、元々リキッドレイアウトだし、投稿画像に関しても、閲覧サイズに合わせて可変するように指定してあるし、何より、FC2ブログの場合、パソコンからの閲覧はパソコン用テンプレート、スマホからの閲覧はスマホ用テンプレートに振り分けられて表示されるので、あまり関係ない...と思っていたのですが、そうも言っていられなくなりました。クエリのついていない場合に限られます。ついたスマホ用アドレスでヒットすることがあります。それらをクリックすると、閲覧端末に関係なく、パソコン用アドレスはパソコン版テンプレート、スマホ用アドレスはスマホ版テンプレートで表示されてしまうのです。タブレットからアクセスした場合、アクセス先に端末別のクエリがついていなければ最初はパソコン版テンプレートで表示されますが、端末別のアドレスと一致していないと認識されるのか、画面上にスマホ版テンプレートへのリンクボタンがどーんと表示されます。昨今のタブレットの普及率は著しく、私の周囲でも、インターネットはパソコンは止めて、タブレットにしたという人間が徐々に増えていますので、これもちょっと考えなきゃいけなそうです。いうわけで、ものは試しと、画像テンプレの方に、レスポンシブWebデザインを導入してみました。これがうまくいったら、徐々に、小説用テンプレにも導入していく予定です。FC2ブログテンプレートにIE8以下でもレスポンシブWEBデザインを適用させる単純にレスポンシブWEBデザインを適用させるだけなら、メディアクエリの指定を追加するだけですので、さほど難しくありません。fc2ブログの場合スタイルシート編集部分に以下のようにメディアクエリの指定を記述すればOKです。(max-width:320px){画面の横幅が320pxまでの場合のスタイル記入}IE9以上および、モダンブラウザはこれだけでOKです。IE8以下は、ダメです。CSS3未対応のIE8以下に、どうやってレスポンシブWebデザインを実装させるか、管理人にとっては、これがとんでもない難問でした。以下は、参照させていただいたサイト様の記事IE用にcss3-mediaqueries.jsを実装させる【レスポンシブOK】私はこれでhtml5とcss3をie8以下に対応させました。QueriesがIE8で効かない場合の対処法css3-mediaqueries.jsが効かなくて困った時のまとめIE8以下にレスポンシブWebデザインを実装させるには、IE8以下にcss3(メディアクエリ)を適用させるためのスクリプトが不可欠なようで、以下の二つのうち、いずれかを装着する必用があるようです。Respond.jscss3-mediaqueries.js両方試したが、動かない。属性セレクタが無効になる事が判明。CS6の目玉機能「可変グリッドレイアウト」でも利用されているスクリプト。非常に軽量でサクサク動き、にわかに本命的な扱いをされてる気がするものですが、2012年6月時点で「属性セレクタの記述をすると無効になる」という痛いバグがあります。一本に絞って再トライ。<![endif]--><![endif]-->まだ、動かない。取扱が難しいスクリプトな様で、様々な条件化で無効になるらしい。・@media規則で指定のいずれでも指定可能なのですが、css3-mediaqueries.jsを使う場合は@media規則で指定しないと効きません。特殊な条件が揃うと無効になることがある。1.@mediaの記述だけを別ファイルにする2.@media記述より前に@charset記述を書く3.@mediaの記述以外の通常のCSSルールは書かない上記全てが揃うと、100%無効になります。管理しやすくしようとメディアクエリの記述のみを単独で別ファイルにした場合にハマる危険があります。FC2ブログテンプレートの場合、メディアクエリの指定は、外部CSS(スタイルシート編集部分)ではなく、全て(HTML編集部分)head要素内にstyle要素を配置して記述する。▲To:シークレットE様コメントありがとうございます。開いた画面の【ダウンロード】をクリックテンプレート管理画面を開き追加されたnovel-J-mono2を適用に設定。*Editカスタマイズの難易度5今年五月の仕様変更により、全記事一覧ページ(総目次)の記事タイトルが、1ページあたり、100件しか表示されなくなりました。全記事一覧タイトルページの表示件数については、以前からFC2リクエストに要望が寄せられていたようなので、管理人も、一縷の望みをかけて、それに1票を投じ、皆さまにもご協力をお願いしてまいりました。様子を見ておりましたが、変化はなし。1ページ100件表示は確定してしまったようです...(T_T)普通に更新していけば、100件なんてあっという間ですから、今後は、出来たばかりか放置ブログを除くほとんどのブログで、全記事一覧ページが複数ページで表示されることになると思います。拙作テンプレの全記事一覧ページは、hatena様のスクリプトをお借りする事で、JavaScript有効時は、自働的に親子カテゴリに対応してカテゴリ別に分類表示されます。30話を超える長編作品の場合の総目次としての役目も担っておりましたが、今回の仕様変更によってそれも危うくなりました。1ページに100件しか表示されないとなると、例えカテゴリ別に表示させても、同じカテゴリ(作品)であっても、肝心の記事タイトルが複数ページに分割されて表示されてしまう事もあるからです。記事タイトルを親子カテゴリ別に一覧できる全記事一覧ページは長編作品にとっては必用不可欠です。現状では、自動表示は無理ですが、手作業なら可能です。以下はそのカスタマイズのご紹介です。カスタマイズの方法テンプレートのHTMLのタイトルリストエリア(全記事一覧ページ)内の現状のソースを一部削除し、直接カテゴリ別の目次のソースを記載していきます。一つ一つ手打ちで記載するのは大変ですし、かえって間違えやすいので、目次表示用のテンプレートを用意し、そこで表示された(目次)画面のソースをコピペしていきます。ただでさえ、遠大なHTMLを有する拙作テンプレの場合、追加するソース、つまり記事数が多くなると、テンプレートの更新に異常に時間がかかったり、時にフリーズしてしまうことがあります。記事数が多い場合はテンプレートの負荷を減らすため、別テンプレートで全記事一覧ページを表示させる事をおススメします。目次表示用のテンプレートを用意する最初に現在適用中のテンプレートのコピーをして目次表示用にカスタマイズします。クリック適用中のテンプレートがコピーされ、その編集画面が開きます。次にそのコピー(テンプレート)の名前を変更します。