スマートフォン用の表示で見るにーとのかがみ。沖縄に住んでるニートのようなフリーランスがレビューしたり食べ物やお酒のことを書いたりしてます。カスタマイズ記事などもアップしてたり。Wordpressのテーマ紹介もやってます。【DIY】簡単で使い勝手も良し!予算5,000円でスタンディングデスクを自作してみた。ITどうも皆さんこんにちは、ケンヂです。先日Amazonアソシエイトのレポートをみていたらオナホが購入されていました。誰ですかうちのリンクからオナホを買った素敵な紳士は、怒らないから使い心地を説明しなさい。おっと話がそれました。最近ふと気づいたんですが、はてなブログを使ってる人たちってあまりスライダーを使っている感じないですよね。今回設置するスライダーの仕様として、PCでは3枠、スマートフォンでの表示は1枠となるように設定しています。どちらの枠数も増減させることが可能ですが、スマートフォンでの表示数は変更しないことをオススメします。(見栄えが悪くなるので)今回使用しているスライダーはbxSliderというもので、細かい設定は必要とせずにレスポンシブ対応のスライダーが設置できるという優れもの。下記で紹介しているコードを各セクションにコピペするだけで見本のようなスライダーが導入できるのでオススメです。今回はヘッダーの直下に挿入する方法について紹介していますが、貼り付ける場所さえ変更すれば基本何処にでも設置できます。スポンサーリンク各セクションに貼り付けるコード※スライダーを設置する前にCSSなどのデータをバックアップしておくことをオススメします。※今回紹介しているコードではcloudflareのライブラリからファイルを読み込んでいますが、wordpressを活用している人は配布サイトからファイルをダウンロードして活用したほうが良いかも。//スライダーのスタイル設定。//スライダーの大きさを設定。お好みで調整してください。フォントサイズ等は適宜調整していただいて構いません。!important;}bxSlider導入の際に注意しておきたいこと動作の確認は必ず行う何かしらのカスタマイズをしたあとには必ず動作確認は行ったほうが良いですね。本当であれば複数のデバイスで確認するべきなのでしょうが、いくつもデバイスを持っているという人はなかなかいないはず。いうことでとりあえず下記のデバイスでチェックするようにして下さい。当たり前のことですが、スライダーに設置する画像の数が多くなるほど読み込み速度が遅くなります。その為、少しでも読み込み速度を向上させるために画像データの【リサイズ】と【圧縮】は必須です。ある画像を一気にリサイズしたいという人は、とりあえず縮小専用。いうソフトを使えば簡単に圧縮・リサイズが出来るのでオススメ。画像データの圧縮だけを行いたいという人はTinyPNGを使うと幸せになれるかもしれない。