bx-sliderを画面いっぱいに表示する＆それをレスポンシブに。。。

レスポンシブ、いやや。。。
といも言ってられないらしい。

さてさて。
レスポンシブでメインビジュアルをスライダーにするなんてよくあること。
スライダーでメイン以外のものを見えるようにするってのもよくあること。
それをレスポンシブ対応で。。ってのもよくあること。

ってことで覚書。

まず、PCの時はこちらのデモ画面のようにしたい。
http://gallery-lounge.com/demo/bxslider/

そして、SPでの表示時は真ん中の、メインの物だけ表示させたい。

PCについてはこちらのサイトを参考にさせていただきました。

bxsliderで2枚目以降の画像もブラウザ幅いっぱいに表示してみる。（らうんじ）

『.bx-viewportのoverflowを"visible"にする』
ってのがポイントですな。

これをSPに対応させようとすると
ちょこっとだけいじる必要があります。
jsの設定で

slideWidth: 810, // 画像のサイズ

を指定していますが、このままだとSPの時、
画面より画像がはみ出てしまいます。
SPでは横幅いっぱいにしたいので
この記述は削除します。

その代りに
PC用のスタイルシートに

.bx-wrapper{
width: 1000px;
}

を追記します。

.bx-wrapperが真ん中にくるように、JSでマージンが自動で付与されています。
.bx-wrapperはdivなのでwidthを指定しないとwidthが100%になってしまい、結果、左よりのスライダーになってしまいます。
PCで表示させるだけなら参考にしたサイトのようにjsでslideWidthを設定すればOKなのですがSPでも。。となるとwidthの指定はPCだけに行わないといけないのでスタイルシートに直接記述する。。というわけです。

その他、スライダー部分の高さを画像に合わせる、、等、ちょこまかありますが
基本的にはそのくらいかと思います。

なんとかなりました～

webフォントの使い方

お久しぶりの更新ですね。

webフォントをサーバにインストールして使う場合、
いくつかの手順をふまないといけないみたい。

ってことで、覚書。

●Noto Sans CJK JP を使用する場合

１.フォントをダウンロード

googleのサイトからダウンロード。
日本語を選択するのでJPのついてるやつね。

http://www.google.com/get/noto/


２．解凍したファイルをサブセット化する

そのまま使用もできますが、
１ファイルが16MBにもなっていて、大きすぎて
ブラウザによっては読み込まれない場合もあるみたい。
「第一水準漢字＋ひらがな＋記号」程度で通常のwebサイトは賄えるみたいなので
そのくらいの文字でサブセット化し、軽量化します。

サブセットフォントメーカー を使用すれば簡単にサブセットが作れます。

３．作成したサブセットをコンバートする

２でサブセット化したフォントファイルはotf(またはttf）となってます。
webで使用する場合、woffというファイルにコンバート（変換）する必要があります。

webフォントに使用されるファイル形式は、
　ttf (TrueType)
　otf (Open Type Font)
　woff (Web Open Font Format)
　eot (Embedded Open Type)
　svg (Scalable Vector Graphics Font)
の5形式があります。
（ttfまたはotf、woff、そしてeotを用意すれば事足りるでしょう。）

woffにコンバートする際は
WOFFコンバータ を使用するのが簡単で良いと思います。woffを作る際に一緒にeotも作れるので楽ちん。

４．cssに記述する

せっかく作ったフォントファイルも指定しなければ意味がない。
--------------------------------------------------------------
@font-face{
font-family: 'myWebFont'; /* お好きな名前にしましょう */
src: url('font/NotoSansCJKjp-Regular.eot'); /* IE9以上用 */
src: url('font/NotoSansCJKjp-Regular.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
url('font/NotoSansCJKjp-Regular.woff') format('woff'), /* モダンブラウザ用 */
url('font/NotoSansCJKjp-Regular.ttf') format('truetype'); /* iOS, Android用 */
font-weight: normal; /* 念の為指定しておきます */
font-style: normal;
}

.myWebFontClass {
font-family: 'myWebFont';
}
--------------------------------------------------------------

font-faceでフォント名とファイルを指定すればOK。
cssでfont名を指定して使えば反映されます。


手間はかかるけど
そんなに難しくない感じです。


ちなみに、NNotoSansCJKjpはダウンロードされるファイルがotfで
ttfを用意する場合はwoffコンバートで作成できます。

変換前にwoffファイルを指定するればOKだけど、そのまま変換するとotfしか生成されないです。
「変換後のファイル」の欄に上の欄のファイルバスをコピペして最後の拡張子をttfにすれば
ttfファイルが生成されます。（←ここがわからなかった）

擬似２こＯＫだったなんて！

:hover:before
この２つ、一気にいけるとは！！！

:hover→擬似クラス
:before→擬似要素

だからなんだろうな。
初めてしりました。。。

忘れないように覚書。

※逆はうごかないよ～