スポンサーサイト

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

夏だ!海だ!テンプレ変更だ!!!

もうすっかり夏ですね

というわけで?テンプレートを涼しげ?な色(冬っぽい?気のせいです。)に変更しました(センスが無いのは仕様です!)

一見すると外見はそんなに変わっていないような気がしなくもないですが、中身は結構変わってるんです!

というわけでつらづらと



HTML5 + CSS3


HTML5
+
CSS3

今回のテンプレートはHTML5で書きました!

とはいっても、殆どHTML5的な要素はないので意味ないですが・・・

今回はバリデーターに一応通る正式な記述です(多分!)

YouTubeの埋め込みコードの加工忘れたり、知らず知らずのうちに記事で駄目なことしていたりして
たまに引っかかったりすることもあるかも知れませんが・・・



んでCSS、軽くするために極力画像を使わずにCSSで書くようにしました(前回に比べて)

一部はCSS3を使用しているので、使用ブラウザによっては正しく表示されません
(利用上はなんの問題もないですが。)

Google Chrome、Firefox、Safariの各最新版で完璧に表示できる事を確認しています

Operaはグラデーションを使えないので、単に塗りつぶされた形になります

古いバージョンを使用している場合はアップデートしておきましょう



上のHTML5 + CSS3の表記は画像ではなくCSSを使用しています

下のHTML5 + CSS3の表記はどちらも同じように表示されているでしょうか?
同じように表示されていればこのブログの閲覧は問題ありません

CSS
HTML5
+
CSS3


画像(正しい表示)

※フォントサイズや幅、色合いはブラウザにより若干異なります



今回、Internet Explorer(以下うんこ)6以下は完全に無視しています

理由なくうんこ6以下を使用している人はせめてうんこ8に更新しましょう

ただし、うんこの独自拡張(笑)は使用していないので、うんこ8だろうと正しく表示されません
(※デザイン以外は閲覧するにあたって特に問題ありません)

おまけに非常に処理が遅いです!他のブラウザに乗り換えることを強く推奨します

そろそろうんこの糞レンダリングに合わせる時代は終わってもいいと思うんだ、うん。
YouTubeもとっくにIE 6のサポート終了してるし



読み込み速度の改善


今回はとにかくこれを目指しました

前回のテンプレがやや重かった理由として

  • 画像のファイルサイズが大きい

  • 無駄に画像を使用

  • FC2のサーバーへの画像リクエスト回数が多い

等が挙げられます

なので今回は

  • 画像ファイルの容量を落とす

  • 極力CSSを使用

  • CSS Spriteの使用

等々を行ないました

TOP画像等々、時にはjpgを使用して容量を抑え、
画像を使用しなくても表現できる部分はcssに変更、
そしてCSS Sprite、こんな感じに画像を一つに纏めることでサーバーへのリクエスト数を抑え、
ファイルをバラした時よりも容量を抑えています



画像が使い回し?そんなことは気にしちゃ駄目です



閲覧推奨環境


ブラウザ

Google Chrome Firefox Safari 各最新版での閲覧推奨です

OperaはCSS3が一部(グラデーション)対応していません(※)
見る分には問題ありませんが、推奨からは外しました
他、私の環境では少しナビゲーションのパネル切替が少しもっさりします
※:一応、background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA・・・長いので略
 のような記述をすれば可能ですが、スマートでないので使用してません

IE系のブラウザはスクリプトの処理が物凄く遅いため、
表示に時間がかかる上にナビゲーションのパネル切替が物凄くもっさりします
時間の無駄なので、使用推奨しません
IE6以下に限っては透過pngが表示出来ないため、一部まともに表示されません

SleipnirやLunascapeを使っている場合は、せめてWebKitもしくはGeckoのレンダリングエンジンの使用を推奨します
※SleipnirのActiveGeckoBrowserは現時点で公開停止されていますが・・・


画面解像度

WXGA(1280×768)以上推奨です

それ以下でも問題ありませんが見にくいです

ディスプレイは比較的安価で購入できるので、少し見てみるのもいいかも知れません

Amazonで液晶ディスプレイを検索

私も家ではノートPCに1650×1050のモニタ繋いで使用してます




作成し終わって


今回も結構時間かかってます

HTML部分は製作2回目だけあって結構サクサクと出来ました

製作時間のほとんどはCSS、というかデザインですね、相変わらずセンスの無さが顕になってます


いつものことですが、うんこのバグには結構悩まされました

またお前か!と何度思ったことか・・・さっさと滅べばいいのに~


今回CSS3に触れてみましたが、非常に素晴らしいですね

HTML5共々早いとこ普及してもらいたいものです

コメント

うんこ8です
上下の画像に差異があります(笑)

とっても涼しいですね!(部屋クーラーガンガンだからもっと寒い・・・・

うんこに吹いてしまいましたwwwww

Alterさんは技術がすごいですね!(自分はうんこですが。

firefox問題なしっす。
体感的にも早くなってますね!
これはありがたい。

Hunter氏

IEは更新頻度が低いですからね、なかなか新しい技術に対応しないのはIEの宿命です
IE9なら一部書き換える必要がありますが(まだ確認してないのです。)多分完璧に表示されるようになるはずですよ


らに~氏

いやいや設定温度上げましょうね、エコは大事です、うん

全然胸を張れるようなレベルではないですけどね^^;
結構html弄りは好きなので、これからも関連することは学んでいきたいと思います


1katsu作者様

体感出来るほど早くなってましたか!
私の環境だと時間帯にもよりますが、大体4/5程度の読み込み時間でした

http://webwait.com/
http://alter7.blog40.fc2.com/?template=3&index
http://alter7.blog40.fc2.com/?template=4&index

Alterさん、お久しぶりです。
テンプレ変わってますね!
涼しげで完成度がとても高いので驚きました。
自分も何か目標を持たねば・・・

通常のHTMLとCSSしか使用できない自分は負け組・・・いやなんでもないです
その技術羨ましいです^^;

これのどこがセンスないんですか(
すばらしいデザインですよww

自分も勉強してみましょうかねw

うんこ死んでくれ・・・

おおー、かなり読み込みが早くなってますね。
涼しげで凄く良いデザインだと思います。

前のテンプレートの時より、本当に読み込みが早くなっていて驚きました。
メニューのボタンを押したときの説明の出方も変わっていて、格好良いですねw

こういうのを弄れる人は素直に尊敬します…
僕のブログでさえデザインが崩れるうんこには、そろそろ消えてなくなってもらいたいところです。

久しぶりに来て変わってたのでびっくりしました!
ちなみに、うんこ8なので、今からブラウザ変えます。

お久しぶりです、まさに夏って感じですね。

ちなみに自分もうんこ8ニコニコ動画ですw
ニコニコ生放送が軽いので今も現在進行形でうn(ry IE8ですねw

やはりGoogle Chromeが一番軽いんでしょうか?
評判はいいと聞きますが。

そんなにIEって糞なのかよ・・・
ってことでIE8とクロムで来てみましたがなんかすごく
違いますね、うんこうんこ
本来半透明なメニューが真っ白だったりブログタイトルの
影?が付いてなかったり。これはびっくりでござる

読み込みスピードが速いです。いやはや
テンプレ作成勉強しようかな・・・

kanikoti氏

お久しぶりですね
そう言って頂けると嬉しいです
目標はあるといいですね、是非なんか立ててみてください


ぎん氏

htmlが分かれば、xhtmlやhtml5はほんの少し約束事が違うだけなのですぐに覚えられますよ

色のセンスがもう絶望的ですねw ここらへんはよくわからんです

htmlのdivとcssのfloatの基本的な使い方や、IEのfloatのバグの対処を身につければテンプレは比較的簡単に出来ますよ


yodel@clear氏

ありがとうございます^^


donder2000氏

メニューのパネル切替はそこら辺から拾ってきてるだけなんですよね、JavaScriptはサッパリです
http://5am.jp/jquery/jquery_ui_tabs/
他はdivで囲んで適当に追加してるだけなので、そんな難しいことはしてません^^;


ぼう人間氏

無理に変える必要はないですよ、閲覧するだけなら問題があるわけではないので
ただIEは遅れているって事を実感して頂ければ幸いです


騒音氏

速度はやはりchromeですね、複数タブ処理時の動作の軽さは神です
速さを求めるならchromeを、機能充実を測るならfirefoxを、
ActiveX等の技術を使ったサイトを閲覧するならIEを、ちょっと変わったブラウザを使いたいならOperaを、
ここらへんは人それぞれですね


m@ster氏

一応IEは独自拡張(笑)としてそれらの機能も備えてるんですが、
奴らのために独自拡張(笑)の記述をする気にはならないので使用してません

テンプレ作成はなかなか面白いですよ、是非チャレンジしてみてください

とっても綺麗ですね。青(or水色)は落ち着きます。
自分は以前から火狐に変えました。今となってはなんであんなうんこがWindowsの標準なんだろうと思うほどです。

HTML・・・自分にはちんぷんかんぷんです。こういうの少し学ぼうかな・・・

確かに軽くなりましたね。

以前は読み込み中から動いてくれないことが日曜夕方とか良くあったのでなくなってほしいですな。

HTML書けるとか羨ましいです。

テンプレいいですね~
色が落ち着きます。

うんこ8ですが、
以前Chrome使ってみたら確かに軽かったですね。
でもヤフーブログ使ってるからうんこなんですね・・・

それにしてもテンプレいいですね~。
自分で宇宙空間から撮影したんですね!?
涼しげでいいものです。

お久しぶりです。
テンプレいいですね。暑いの(&熱いの)が嫌いな自分には歓迎ですね

自分のブラウザのうんこは7ですよ。8に更新メンドイです
メインにfirefoxで、どうしても軽さがいるときにはChromeを使ってます。
たまに動画とか音楽欲しいときはCraving使ったり(タブが使えないからそんなに出番ないですが

結論とすれば、8は知りませんが、やはりうんこは糞ということですね(ぁ

少しお久しぶりかな(笑) も少しでバイク免許取れそうです

下な単語が多いのは気のせいでしょうか・・うん、気のせいだ、うn(殴

テンプレの爽やか度に感涙。というか爽やか度って何だろう
暑さを吹っ飛ばす感じがしていいと思います

読み込みは自分の中では迅速な方なんでいいのですが何故か右寄りになってしまっているのは変わらず・・慣れたので問題ないですけど

ちなみに7です多分

朝に気付きましたが、とてもいい感じですね。

青はいいよ。青は。

HTML?何それ?おいしいの?

この機会に学んでみようかなと思います。

ミサイル氏

寒色系が好きなので、なんかこんな感じの色ばっか多用してしまいますね

htmlはそんなに難しくないので、結構手軽に始められると思いますよ


7shoku氏

たまにニコニコの動画用スクリプトの読み込み等で止まってしまうことがありますね
ほっといてもいいですが、再読込したほうが早く表示されることが多いです
こればっかりはどうしようもないですね


nobe2000氏

その気になればすぐに書けるようになりますよ!


ゴールデンローズ氏

ヤフーブログはなんかブラウザの制限があったりするんでしょうか、
IEでのみ閲覧可とかアホな事しないで欲しいものですね


しろうと氏

お久しぶりです

まぁ普段使わないなら更新する必要はないですよね
私はchrome一択です、ええ

そういうことです(笑)


Scarlet氏

バイクですか~・・・私も車の免許取らんとなぁ

まぁ気にしちゃ駄目です

右寄なのは画面サイズが小さいとそうなってしまいますね
(ブログの横サイズが1280pxに対し、1024pxしか画面に表示されないため、残り250px程が隠れた状態になっちゃいます)


ystr氏

おいしいですよ、結構色んな事出来ますし
面白いのでぜひぜひ学んでみてください

こんな感じにCSSとJavaScriptで色々出来るようになりたいものです
http://textage.cc/score/index.html

どこに書けばいいか分からなかったのでここに。。。

Alterさん、AutoPagerizeの対応ありがとうございました!

今までだと「月間アーカイブ」を押して…
それでも見切れないときは「次のページ」を押して…

数日PCに触れられなかった時に過去のページ見るのが超楽になります(´Д`)
ありがたや、ありがたや。

あらら、ごめんなさい、もっと速くに対応しておけばよかったですね

対応するにあたって、色々調べるうちに結構得るものがあったので楽しかったです
(結局対応方法自体は物凄く手抜きなものにしましたがw)

元いのらです。
諸事情があってHNを変更しました…って聞いてないですね。

青いデザインいいですね。
青好きなのでなぜかテンションが上がっていますw
上のボタンを押したときに出てくる説明がとってもいいです。
CSSってすごいですね^^;
自分にはさっぱり;;;

自分も最近Chromeに乗り換えました^^
速すぎてIEにもどれない…。

HN変更把握です~

私も青い色が好きなので、ついこんな感じの色に・・・
私も去年初めてテンプレ作るまでは「CSS?なにそれおいしいの?」って状態でした
テンプレののCSSを少しずつ弄ってたりしたら、いつの間にか覚えてました

ChromeからIEに戻るとか罰ゲームですかwwwって感じですね

私もhtmlやcssをやったりするんですが、うんこ(笑)はうんこですねw
コレは誰もが思うと思いますw

だからもうブラウザハックとか面倒くさいです。嫌です。
何で皆Firefoxとか使ってくれないんだろう・・・

個人的にChromeは突然クラッシュしたりするのであまり好きじゃないんですよね~

そうですよね
Microsoftがもっと大々的にアップデートするよう促してくれればいいんですが・・・
そもそもIE自体が更新遅すぎてあれですけどw

理由があってIE使っているならまぁしょうがないとは思いますが、
IEが他のブラウザより優れてる面なんて殆ど無いですし、是非食わず嫌いせずに他のブラウザを使って欲しいですよね

私がChromeを使用している限りでは、Chrome自体がクラッシュすることは最新の安定版においては皆無ですね
Adobeの糞Flashプラグインがクラッシュすることはありますが、これは他のブラウザでも同じですし・・・
Firefoxでバリバリアドオン使いまくってるなら物足りないですが、Chromeもエクステンションがそれなりに充実してますし、改めて試してみるのもいいかもしれません

うんこうん(ryって言うなよぉ
IEなんだぞぉ

それはさておき
僕はhtmlがよくわかりません
はい
だからこういうのって結構尊敬します
すごいですなぁ

このテンプレ、なかなかいいですね
夏の暑さを消してくれそうな
涼しさを持ってる感じがします

コメントの投稿


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