スポンサードリンク

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
拍手する

スマートフォン用のテンプレートでの不具合を修正

 2014年の10月下旬にHTML5が正式に勧告(http://www.w3.org/2014/10/html5-rec.html.ja)されたそうですね。ブログを書いている人にも多少の関係はありますが、いくらテンプレートだけ対応しても今まで書いてきた記事の書き方次第では、どうにもなんないんですけどね。


まぁ、過去に書いた記事なんか知ったことかという人がほとんどなので関係ないんでしょうし、自分も今までに書いた記事の件数が1500を超えているので過去記事をHTML5に合わせて修正するとかは正気の沙汰では無いので、できるだけやらないつもりです。hrタグとか、いわゆる水平線すら使い方が変わっちゃいますからね。


修正するのが一番面倒くさそうなのは、テーブルタグを利用した表になりますが、FC2ブログでは表を作る場合に一番簡単なのはWYSIWYGテキストエディターを使うことなのですが、このエディタ自体が古いのでHTML5に全く対応していない書き方でしか作れません。なので、このエディタを使い続ける限りは記事を対応させるのは無理なんです。後から手書きで直すことは可能ですが、そんな二度手間やりたい人もいないでしょうしね。


スマートフォン用の共有テンプレート「sp_custom」は個別記事での装飾が無効

HTML5に直ぐに対応できるわけでもないのですが、記事内に書くテーブルタグを使った表の書き方をCSS(スタイルシート)に記載するようにして対応したのですが、PC用テンプレートでの表示は思った通りの表示に出来ましたが、スマートフォン用のテンプレートでのプレビュー表示をさせても正常には表示されていませんでした。


自分は、スマートフォンを持っていないので、いつもは適当に表示のチェックをしていたのですが、いままでにスマートフォン用のテンプレートのCSS(スタイルシート)に追加してきたものは、引用枠、youtubeのプレイヤーサイズを記事の幅で自動変更、画像などの配置を左右に寄せる、等ですが正常に表示できたものは一つもありませんでした。なので、スマートフォンだとそういうものなのかなと思っていましたが、それはやっぱりおかしいということにようやっと気がつきました。


また、作者の方のブログの記事に表示されている枠線がスマートフォン用のテンプレートでも表示されていたので、FC2ブログ側の問題ではなくて、テンプレート個有の不具合か、自分のカスタマイズのミスである可能性が高くなったのがわかりました。なので、新規に「sp_custom」をダウンロードして確かめたところテンプレート固有の不具合であるところまではわかりました。


上記のテンプレートは、同じ作者による別のテンプレートとして2種類あります。何故か不具合が起きるのは「sp_custom」だけなので、他のテンプレートとHTMLとCSSを比較したり、表示させるブラウザーを変えてみたりしたところInternet Explorer 11での表示では、ドキュメントモードがIE7互換モードになって、その場合には正常に表示されることがわかりました。スマートフォン用のテンプレートで表示するのにIE使うのはあまり想定しないので、metaタグでの設定はしないからですね。


いろいろと調べてみてわかったことは、「sp_custom」を個別記事で表示させた時に年月日の表示から下はCSSでの指定が無効になっているということです。これの原因はCSS(スタイルシート)にゴミが残っていたからでした。

/*========================================
Entry
========================================*/

#entry_box {
padding: 10px;
border-bottom: 1px solid #ccc;
border-right: 1px solid #fff; /* バグ対策 */
border-left: 1px solid #fff; /* バグ対策 */
line-height: 1.7;
}
#entry_box h2,
#entry_box h3,
#entry_box h4 {
display: block;
clear: both;
float: none;
font-weight: bold;[
line-height: 1.3;
}

たった一箇所に残っていた「[」これのせいで、個別記事にCSSで指定していた装飾が全て無効になっていました。なので、これを削除した結果スマートフォン用のテンプレートで表示しても引用枠<blockquote>もちゃんと表示されるようになりました。


今回の件で、いかにInternet Explorerの古いバージョンが恐ろしいものであるのかがよくわかりました。やはり、表示チェックはInternet Explorerを使っては、少なくともFC2ブログではダメだということになりそうです。


前の記事:FC2ブログ:スマフォ用テンプレート
関連記事:IEによる閲覧時の不具合とか

○追記◯

(追記:2015/1/5) 2015年1月5日にて共有テンプレートの「sp_custom」は更新されていますので、それ以降にダウンロードした場合には上記の不具合は発生しません。


スポンサーサイト

タグ : FC2ブログ_カスタマイズ 

拍手する

スポンサードリンク

【関連する記事(zenback)】

コメント

コメントの投稿

非公開コメント

【広告看板】 
UUカウンター
+6500以上?
現在の閲覧者数:
PVカウンター
次のキリ番は90万です
Twitter
Twitterの過去の
まとめはtwilogバナー
記事のランキング

ブログパーツ

リンク集:ブログ
リンク
アクセスのランキング

アクセスランキング

CG使用許可番号
CG使用許可番号0166
プロフィール
記事に関連しないコメント等は
ゲストブックにお願い致します

ロギラキ

Author:ロギラキ
level:52/150
プロフへのリンク
 ブクログ

【商品リンク】

VF-19 ADVANCE
超時空要塞マクロス
VF-1J アーマードバルキリー
超時空世紀オーガス
オーガス
鋼鉄ジーグ
宇宙円盤大戦争
UFOロボグレンダイザー
銀河旋風 ブライガー
電人ザボーガー
ストロングザボーガー お売りください。駿河屋です。
FC2拍手数(ロギラキ遷紀)
公開したのは【1529】記事
拍手が貰えたのは【1338】記事
応援バナー
応援しています♪
萌えゲーアワード2015 バナー ユニゾンシフト:ブロッサム新作応援中
ブログランキング
FC2ブログランキングへ 人気ブログランキングへ ブログランキング・にほんブログ村へ blogram投票ボタン このBlogのはてなブックマーク数
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。