CSSスプライトで、スムーズに画像を切り替える2014/06/202013/12/20WebデザインテクニックTweetPocketマウスオーバーした時などに、画像が上手く切り替わらない時、よくありませんか?ブラウザや、PCの性能によっても変わってくるんでしょうけど。要するに↓こんな感じです。これはこのサイトで使ってるページトップへ移動するためのアイコンなのですが、このアイコンにカーソルをのせる度に、これがすごく気になってたんですね。(正確にはブラウザでそのサイトを初めて読み込んだ後(キャッシュに画像が残ってない状態で)、カーソルを合わせる時です。この、CSSスプライトを使う事に。ちなみにCSSスプライトとは、マウスホーバーなどで画像を切り替える時に、onMouse,offMouseでそれぞれに画像を設定して2枚使うのではなく、必要となる複数(今回の場合は2枚)の画像を1枚にして、cssのposition設定で表示される部分を切り替えて、サイトの表示速度をあげることができるCSSのテクニックです。この場合だと、2枚の画像を2回に分けて読みこむのではなく、1枚を1回で読み込むので、その分早く表示できるようになるわけですね。要するに↓こんな感じになります。ちなみにalt属性が使えなかったり、更新時に手間がかかったり、背景画像のリピート表示ができなかったりと(これは当方はできたのですが、できない場合もあるようです。)、使えない状況も出てくるかと思いますので、このページトップへのアイコンや、メニューバーなど、Webサイトを構成するうえで必ずしもきちんと表示しなくても問題のない画像には、この方法を使った方がサイト表示の高速化につながるので、面倒でなければ使った方がよいテクニックかな?と思います。解決法で、今...記事を読む▷onMouseOver、onMouseOutで、簡単にテキストを切り替える!前回のonMouseOver,onMouseOutで簡単に画像を切り替える!の続き、応用編です。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。いう感じなのですが、もう最初の投稿から...記事を読む▷WordPress:特定カテゴリで投稿を古い順に表示させる方法Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。コメントをキャンセルメールアドレスが公開されることはありません。*次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。コメントデータの処理方法の詳細はこちらをご覧ください。