とりあえずfunctions.phpに書いとくと便利かもしれないシリーズ【WordPress】

今年の雪は急にやってきたりいなくなったり、忙しい天気ですね。
WordPressのカスタマイズをしていて、なんだか毎回functions.phpに同じこと書いてることが増えたので備忘録代わりに。
定番のものから小ネタまで。

ソースコード周り

remove_action('wp_head', 'wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_shortlink_wp_head');
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');

ど定番ですがまぁ。定番ってことは便利ってことです。

固定ページ名をbodyのクラス名として追加

function pagename_class($classes = '') {
if(is_page()) {
    $page = get_post(get_the_ID());
    $classes[] = $page->post_name .' page_' .$page->post_name;
}
return $classes;
}
add_filter('body_class','pagename_class');

ページ名のクラスがあったほうがCSS書く時便利ですからね。

CSS、Javascriptの読み込み

function theme_enqueue_styles() {
    // 親テーマのstyle.css
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    // 子テーマのstyle.css
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

これは子テーマでテーマを作っていく場合になりますが。

親テーマの不要なCSSを削除

function my_dequeue_styles() {
    wp_dequeue_style( $handle );
}
add_action( 'wp_enqueue_scripts', 'my_dequeue_styles', 9999 );

逆に親テーマのCSSで不要なCSSを読み込みたくない時に。
$handle探すのに手間取ったりもしますが。。

ダッシュボード関連

自動で入力されるPタグを入れない。

if(is_page()){
    remove_filter('the_content', 'wpautop');
    remove_filter('the_excerpt', 'wpautop');
}

記事(POST)はお客さんが使うことも考慮して固定ページにしました。

ウィジェットエリアを追加

function my_widgets(){
    register_sidebar(array(
        'name' => 'ウィジット名', 
        'description' => 'テキストテキストテキストテキストテキスト',
        'id' => 'widgetID',
        'class' => 'className',
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'my_widgets');

追加したら利用したい場所に

<?php
    dynamic_sidebar( $number );
    // $numberはサイドバーの名前または ID。
?>

投稿の画像相対パスを絶対パスに書き換え

function replaceImagePath($arg) {
    $content = str_replace('"images/', '"' . get_stylesheet_directory_uri() . '/images/', $arg);
        return $content;
}
add_action('the_content', 'replaceImagePath');

ソースをペタッとWordPressに貼り付けて、あれれ、相対パスが切れた。をなくすよう。
自分のテーマディレクトリの直下にimagesフォルダがある場合です。
パスは適宜変更してください。
小ネタですが以外と便利です。

サイト名のショートコード

function shortcode_siteurl() {
    return home_url() .'/';
}
add_shortcode('siteurl', 'shortcode_siteurl');

これも上と似たようなもんですが、WordPressのテキストエディターでリンク貼ったりする時に。
自分ではあんまりショートコードは使わないんですけど。
いろいろな人が使う場合はあると重宝することがあります。

小ネタ

Advanced Custom Fieldsで画像のパスを取得(ID利用)

function get_afc_imgurl($slug){
    if(get_field($slug)){
        //画像(返り値は「画像ID」)
        $img = get_field($slug);
        $imgurl = wp_get_attachment_image_src($img['id'], 'full'); //サイズは自由に変更   

        return $imgurl[0]; 
    }
}

基本はthe_field()だけで出力できちゃうお手軽さもAdvance Custom Fieldプラグインの魅力の一つ。
画像の時(IDを利用している場合)にパスの出力忘れることが多かったので関数にしてみました。

感想

簡単なものばかりですけど。
最近はset_query_var()で変数をget_template_part()に渡してget_query_var()で受けてごにょごにょっていうのがちょっとお気に入りです。
固定ページの内容なんかもファイル切り分けてページモジュールみたいにしちゃうと結構楽で。

やり方は人それぞれだと思います、何か使えそうなものがあったらどうぞご利用ください。


背景画像を下に落とす。昔のサイトをレスポンシブに対応させる時

blog170112

今更ですが新年明けましておめでとうございます。
本年もAGNチームブログをよろしくお願いいたします。

さて、今年1発目は軽い小ネタから。いきなり重いと胃もたれしちゃいますからね。
昔固定幅で作ったWebサイトをHTMLや画像はそのままにレスポンシブ化したいという案件で使った小技です。

【DEMO】

固定幅の頃

昔(おそらくスマートフォンの出たてかそれくらい)固定幅で作られたそのサイトは画像多めのサイトで、フロートを駆使してなおかつちょっとでもレンダリング速度を上げたいのでいける画像は背景にして利用していました。
ボックス全体がサイト幅で、そのうちコンテンツが50%、残り50%は画像に見えるけど実は背景、みたいなことをフロートを駆使しつつ作っていたわけです。
※だからフロートでつまづく人は大概背景が表示途中で切れちゃうことに大きな悩みを持っていたのです。Clearfixの歴史を振り返ればみんながフロートとどのように戦ってきたかわかるかもしれません。

そのサイトは単純な角版の画像がほとんどなくて、複数の画像を斜めに組み合わせてみたり、ちょっと凝った画像が多かったのです。
それでも制作された当時と違って、background-positionがより使いやすくなったり(オフセット記法が可能になった)、bacground-sizeが使えるようになったりしているので、その辺を使ってなんとかレイアウトしていこう、という感じでした。
※全面に背景を引きたくてbacground-size : cover;が使えなかった頃はJavaScriptで実装したりしてたんですよ。そう、角丸を画像で組み立てていた頃に近いですね…

実際にやってみる

考え方はよくあるレスポンシブWebデザインの考え方でいきます。
メディアクエリで振り分けて、左側 (右側)にある背景画像をある幅以下の時はコンテンツの下(上)にレイアウトしましょう、というやり方です。よくあるやつですね。

方法1:背景画像じゃなくて擬似要素で配置する。

background-imageでしていたものを擬似要素(::before、::after)のcontentで配置しようというわけです。
それで擬似要素をdisplay: block;にでもしておけば勝手に下に落とせますからね。
ただこのやり方だとうまくいかない場合があるのです。

contentプロパティで配置された画像はサイズの調整が難しいのです。
というのも、contentプロパティで配置された画像はサイズの指定ができないのです。
擬似要素にサイズ(width、height)を指定してもだめ。どんな時に困るかというと、もともとの画像が画面幅より大きかった時。
これ、画像が見切れます。
さて、困った。

この問題そのものに対する解はネット上でもよく見かけますが、contentプロパティで配置するのではなくて、擬似要素のサイズを指定してその背景が画像として使う、ということかもしれません。

方法2:背景画像でいく

今日触れたいのはこちら。
背景画像として使うけど、コンテンツと重なるのは嫌だ、というお客様のために。
方法としてはpaddingで領域を確保してそこに背景画像を100%で表示させます。

この方法のメリットはデバイス幅が変わっても比率を維持できる点です。

領域を確保する

領域を動的にpaddingを使って確保するためにpaddingを%で指定します。
この方法でわかっておかなくてはいけないのは画像の縦横の比率(サイズではなくて)です。
画像の縦横の比率のパーセンテージ分だけpadding-bottom(padding-top)を指定してあげます。

どういうことかと言いますと、
例えば画像サイズが800 × 600だったとします。
これをコンテンツの下に背景用の領域を確保するためにはpadding-bottomに
(600/800)*100%を指定してあげるのです。

これでなんでうまいこと領域が計算できているかというと、これはpaddingの特性を利用しているのです。

The percentage is calculated with respect to the width of the generated box’s containing block, even for ‘padding-top’ and ‘padding-bottom’. If the containing block’s width depends on this element, then the resulting layout is undefined in CSS 2.1.
Unlike margin properties, values for padding values cannot be negative. Like margin properties, percentage values for padding properties refer to the width of the generated box’s containing block.

パーセンテージは、 ‘padding-top’と ‘padding-bottom’の場合でも、生成されたボックスの包含ブロックの幅に対して計算されます。包含ブロックの幅がこの要素に依存する場合、結果のレイアウトはCSS 2.1で定義されていません。
マージンプロパティとは異なり、パディング値の値は負であってはなりません。マージンプロパティと同様に、パディングプロパティのパーセンテージ値は、生成されたボックスの包含ブロックの幅を参照します。

https://www.w3.org/TR/CSS2/box.html#propdef-paddingより引用

大事なところは、
生成されたボックスの包含ブロックの幅に対して計算されます。
ここです。
計算は包含ブロック(ざっくりと親の要素)の高さから計算しているわけではないのです。
包含ブロックの幅を元に計算するので上の式でいけるんですね。
画像がもし親要素に対し幅100%だったとした時に、幅に対する高さの割合を求め、その分だけ親要素に余白(padding)を持たせることで、背景画像の領域が確保されたわけです。
これはマップや動画を100%で埋め込みたい、という時と同じ考え方ですね。

そんなに多様するわけではないけれど、まぁちょっとCSSのお勉強の小ネタ、ということで。

【DEMO】

蛇足ですが…

ちょっとハマったのが、iOSでbackground-size: cover;がうまくいかなかったことです。
これはbackground-attachment: fixed;と一緒に使っているとダメみたいです。
背景固定して全面画像みたいなことができないじゃないか…

ちなみにこれはbackground-sizeを100vhにすることでやりたかったことに近くなったので今回はOKにしました。
background-attachment: fixed;で背景固定して、background-size: auto 100vh;で。


CSSだけでレスポンシブなタイムラインを作る

teamblog_title161214

先日制作した案件で、タイムライン(過去→未来)があったんですね。
こういうのです。

timeline161214

デザインがイラレで来ていて、さてどうしましょうか、と。
もちろん画像でもOKなんですが、横長をタイムラインをスマホで見たら小さくて見えない。
かといって縦長の画像は作りたくない。※それなりに数があったので。
それじゃCSSだけで実装しましょ、とういうことになりました。

【DEMO】

やってみよう

条件

  • 広い画面では横型、狭くなったら縦型にする
  • 項目数は変動する
  • ポイントごとに目印をつける

もちろん、まず一直線を引いて、その上に絶対配置でポイントを打つのもアリだと思います。
今回は基本形を元にちょっといろいろしてみました。
けどあんまりうまくいかなかった。。。
ついでにCSSがいろいろ汚染しまくって悪い見本みたいになってます。
お目汚しですが、よかったらどうぞ。。。

基本形

HTML

<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>

SASS

.timeline{
    padding: 3rem 5rem;
    background-color: #f0f0f0;
    &-item{
        position: relative;
        border-left: 1px solid #000;
        padding: 0 0 30px 30px;
        &:before{
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
            background-color: #000;
            transform: translateX(-50%) translateY(-50%);
        }
        &:last-of-type{
            padding-bottom: 0;
            &:before{
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10px 5px 0 5px;
                border-color: #000000 transparent transparent transparent;
                border-radius: 0;
                background-color: transparent;
                top: auto;
                bottom: 0;
                transform: translateX(-50%) translateY(0);
            }
        }
    }
    @media(min-width : 768px){
        display: table;
        table-layout: fixed;
        width: 100%;
        &-item{
            display: table-cell;
            vertical-align: top;
            padding: 0;
            border:{
                top: 1px solid #000;
                bottom: 0;
                left: 0;
            }
            &:last-of-type{
                padding-bottom: 0;
                text-align: right;
                &:before{
                    border-width: 5px 0 5px 10px;
                    border-color: transparent transparent transparent #000000;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                    transform: translateX(0) translateY(-50%);
                }

                p{
                    text-align: left;
                }
            }
        }
        &-label,
        &-content{
            transform: translateX(-50%);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &-label{
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%) translateY(-120%);
        }
        &-content{
            margin-top: 10px;
        }
        &-item:last-of-type &-label,
        &-item:last-of-type &-content{
            transform: translateX(50%);
            text-align: left;
            display: inline-block;
            max-width: 70%;
        }
        &-item:last-of-type &-label{
            left: auto;
            right: 0;
            transform: translateX(50%) translateY(-120%);
        }
    }
}
/* 現在地 */
.timeline-item.now:before{
    background-color: #f00;
}

やってること

そんなに難しいことはしてません。
displayを切り替えて、ボーダー引く場所を変えているだけです。
狭い画面では縦型なのでdisplay: block;でいいですね。ボーダーは左に引きました。
横型の場合は、親要素をtableに、子要素をtable-cellにしてみました。(※flexでもうまくいくかもしれません。)
それから親要素にtablelayout: fixed;を指定して均等に割ります。
文字や時間の長さに長短がある場合は子要素のwidthをパーセントで指定してあげればOKです。

目印は子要素の擬似要素で。
基本的には左上に絶対配置して、自分の大きさ分だけ移動(transform: translateX(-50%) translateY(-50%);)します。
最後の子要素だけは矢印っぽくしたいので、三角にしました。これは縦横で向きを変えてあげてくださいね。
現在地は専用のクラスを振って文字色を変えました。

【DEMO】にのっけた他のやつのコードも一応載せときますね。
本当は背景を矢印っぽくするところまで行きたかったんですけど、パッと思いつかなかったので、とりあえず今回はここまで。
年末進行でお忙しいと思いますが、みなさんお体に気をつけて頑張っていきましょう!

HTML

<h2>基本形</h2>
<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>

<h2>数が減っても大丈夫</h2>
<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">30年後</p>
        <p class="timeline-content">煙になりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>

<h2>数が増えても大丈夫</h2>
<div class="timeline">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">30年後</p>
        <p class="timeline-content">煙になりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>


<h2>ボーダー有り</h2>
<div class="timeline border-dashed">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>


<h2>ストライプ背景</h2>
<div class="timeline bg-stripe">
    <div class="timeline-item">
        <p class="timeline-label">10年前</p>
        <p class="timeline-content">じつはまだ学生でした。</p>
    </div>
    <div class="timeline-item now">
        <p class="timeline-label">現在</p>
        <p class="timeline-content">結構いい年です。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">10年後</p>
        <p class="timeline-content">Webはまだ大丈夫。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">20年後</p>
        <p class="timeline-content">スナフキンになりたい。</p>
    </div>
    <div class="timeline-item">
        <p class="timeline-label">その後</p>
        <p class="timeline-content">仙人。</p>
    </div>
</div>


<h2>ストライプ背景</h2>
<div class="timeline-wrapper">
    <div class="timeline bg-arrow">
        <div class="timeline-item">
            <p class="timeline-label">10年前</p>
            <p class="timeline-content">じつはまだ学生でした。</p>
        </div>
        <div class="timeline-item now">
            <p class="timeline-label">現在</p>
            <p class="timeline-content">結構いい年です。</p>
        </div>
        <div class="timeline-item">
            <p class="timeline-label">10年後</p>
            <p class="timeline-content">Webはまだ大丈夫。</p>
        </div>
        <div class="timeline-item">
            <p class="timeline-label">20年後</p>
            <p class="timeline-content">スナフキンになりたい。</p>
        </div>
        <div class="timeline-item">
            <p class="timeline-label">その後</p>
            <p class="timeline-content">仙人。</p>
        </div>
    </div>
</div>

SASS

.timeline{
    padding: 3rem 5rem;
    background-color: #f0f0f0;
    &-item{
        position: relative;
        border-left: 1px solid #000;
        padding: 0 0 30px 30px;
        &:before{
            content: '';
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 0;
            top: 0;
            border-radius: 100%;
            background-color: #000;
            transform: translateX(-50%) translateY(-50%);
        }
        &:last-of-type{
            padding-bottom: 0;
            &:before{
                width: 0;
                height: 0;
                border-style: solid;
                border-width: 10px 5px 0 5px;
                border-color: #000000 transparent transparent transparent;
                border-radius: 0;
                background-color: transparent;
                top: auto;
                bottom: 0;
                transform: translateX(-50%) translateY(0);
            }
        }
    }
    @media(min-width : 768px){
        display: table;
        table-layout: fixed;
        width: 100%;
        &-item{
            display: table-cell;
            vertical-align: top;
            padding: 0;
            border:{
                top: 1px solid #000;
                bottom: 0;
                left: 0;
            }
            &:last-of-type{
                padding-bottom: 0;
                text-align: right;
                &:before{
                    border-width: 5px 0 5px 10px;
                    border-color: transparent transparent transparent #000000;
                    top: 0;
                    right: 0;
                    bottom: auto;
                    left: auto;
                    transform: translateX(0) translateY(-50%);
                }

                p{
                    text-align: left;
                }
            }
        }
        &-label,
        &-content{
            transform: translateX(-50%);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &-label{
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transform: translateX(-50%) translateY(-120%);
        }
        &-content{
            margin-top: 10px;
        }
        &-item:last-of-type &-label,
        &-item:last-of-type &-content{
            transform: translateX(50%);
            text-align: left;
            display: inline-block;
            max-width: 70%;
        }
        &-item:last-of-type &-label{
            left: auto;
            right: 0;
            transform: translateX(50%) translateY(-120%);
        }
    }




    /* ボーダー有り */
    &.border-dashed &-item{
        border-top: 1px dashed #ccc;
        padding: 10px;
        &:last-of-type{
            border: {
                top: none;
                bottom: 1px dashed #ccc;
            }
        }


        @media(min-width : 768px){
            padding: 0;
            border:{
                top: 1px solid #000;
                left: 1px dashed #ccc;
            }
            &:last-of-type{
                border: {
                    top: 1px solid #000;
                    right: 1px dashed #ccc;
                    bottom: 0;
                }
            }
        }
    }

    /* ストライプ背景 */
    &.bg-stripe &-item{
        &:nth-of-type(odd){
            background-color: #e8e8e8;
        }
        &:nth-of-type(even){
            background-color: #fff;
        }
    }
    @media(min-width : 768px){
        &.bg-stripe &-label,
        &.bg-stripe &-content{
            transform: translateX(0);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &.bg-stripe &-label{
            transform: translateX(0) translateY(-120%);
        }
        &.bg-stripe &-content{
            display: inline-block;
        }
    }

    /* PCの時は矢印っぽく */
    &-wrapper{
        padding: 3rem 5rem;
        background-color: #f0f0f0;
    }
    &.bg-arrow{
        padding: 0;
    }
    &.bg-arrow &-item{
        position: relative;
        border: {
            top: none;   
        }

       
    }
    @media(min-width : 768px){        
        &.bg-arrow{
            padding: 20px 0 0;
            overflow: hidden;
        }
        &.bg-arrow &-item{
            &:before{
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                border:{
                    color: transparent;
                    radius: 0;
                }
                box-shadow: 1px -1px 2px rgba(125, 125, 125, 0.8);
                transform: skew(-45deg);
                transform-origin:0 0;
                background: -moz-linear-gradient(45deg,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); /* FF3.6-15 */
                background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* Chrome10-25,Safari5.1-6 */
                background: linear-gradient(45deg,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            }        
        }
        
        &.bg-arrow &-label,
        &.bg-arrow &-content{
            transform: translateX(0);
            text-align: left;
            display: block;
            max-width: 70%;
        }
        &.bg-arrow &-label{
            transform: translateX(0) translateY(-120%);
        }
        &.bg-arrow &-content{
            display: inline-block;
        }
        &.bg-arrow &-item:last-of-type{
            padding-bottom: 0;
            text-align: right;
            &:before{
                border: none;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                transform: translateX(0) translateY(0) skew(-45deg);
            }
            p{
                text-align: left;
                display: block;
            }
        }
    }
}

/* 現在地 */
.timeline-item.now:before{
    background-color: #f00;
}

jQuery3.1.1でbxSliderが動かないこととGoogle Fonts + 日本語早期アクセスを試してみたこと

blog161110

あれ?bxSlider動かない・・・

いつも通りに設置したのになぁ。
なんか書き間違えたかな?。。。
161105sample_bxslider01

コンソールを見るとなんかエラーしてますね。

jquery-3.1.1.min.js:4 Uncaught TypeError: Cannot read property ‘indexOf’ of undefined(…)

jQuery3.xになってload()がなくなった

調べてみたら、bxslider.jsの中でload()が使われているのが原因みたいです。

うーん、load()on('load',function(){})で書き換えればいいらしいですけど、プラグインファイル直接修正するのはちょっとなぁ。
slick.jsと並んでスライダー系では使いやすくて大好きなプラグインなんですけど。。。
bxSliderを使うときはjQueryは3.xになる前のバージョンなら動くので、そっちですかね。
ちょっと残念。

load()以外にも、いろいろなくなったり変わったりしているので参考サイトなどで見ておくといいかもです。

でも動くときもあるよ?

そうなんです。別な時にすっかり忘れててjQuery3.1.1使ってbxSlider入れたら普通に動くんです。
あれれ、jQuery3.xだと動かないんじゃないの?
動いてしまったのはこんなソースです。

<div class="bxslider">
        <div class="slider-item">
            <h2>title01</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
        </div>
        <div class="slider-item">
            <h2>title02</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
            <p><img src="images/dummy.jpg" /></p>
        </div>
        <div class="slider-item">
            <h2>title03</h2>
            <p>てきすとてきすとてきすとてきすとてきすとてきすと</p>
        </div>
        <div class="slider-item">
            <img src="images/dummy.jpg" />
        </div>
</div>

それではちゃんとbxslider.jsのエラー箇所をみてみます。

bxslider.jsの該当箇所

var loadElements = function(selector, callback) {
  var total = selector.find('img:not([src=""]), iframe').length,
  count = 0;
  if (total === 0) {
    callback();
    return;
  }
  selector.find('img:not([src=""]), iframe').each(function() {
    $(this).one('load error', function() {
      if (++count === total) { callback(); }
    }).each(function() {
      if (this.complete) { $(this).load(); }
    });
  });
};

functionの第一引数selectorにはver preloadSelector = slider.children.eq(slider.settings.startSlide); が入ってくるようですので、きっと一番はじめに表示されるアイテムのことですね。

image . complete
画像が完全にダウンロードされた、または、画像が指定されなかったなら、true を返します。そうでなければ、false を返します。
<http://www.html5.jp/tag/elements/img.html>

ということなので、<・・・前略・・・>そのスライダーアイテムにsrc属性が指定されたimgもしくはiframeがあったら、<・・・中略・・・>、(※ここから)もし画像がダウンロードされてたらその画像をロードしてね、ここでload()って何よっていうエラーなんですね。
だから、最初のアイテムに画像が含まれていなければ、普通に動くということみたいです。
しかしiframeだと普通に動くな。。なんで??

Google Fontsで「はんなり明朝」とか使える!!

そんなことより(いや上のも大切なことですよ?)、これはすごい大ニュースなのでは??

Google Fonts は、デザイナー ウェブフォントを直感的にご利用いただける、安定したオープンソース ディレクトリです。Google Fonts 早期アクセスでは、現時点で完全にはサポートしていないフォントを試験的に提供しています。

膨大な数の文字のデザインに要する時間や、大容量のフォント ファイルをウェブフォントとして提供する際に必要な技術的インフラストラクチャなど、日本語の書体デザインやフォント開発にはさまざまな課題が立ちふさがります。そこで、規格や技術の開発を進めると同時に、Google Fonts 早期アクセスを通じてデザイナーやデベロッパーの皆様に日本語のウェブフォントをお試しいただけるようにしました。
Google Fonts + 日本語早期アクセスより引用

ということですから、完全にサポートされているわけではありません。
日本語の無料で使えるWebフォントが少ないっていうのは常々の悩みでしたし。
いろんなデバイスを考えた時に明朝体がうまいものがなくて、泣く泣く画像にしたりしてましたから。
「はんなり明朝」とか好きなフォントですし、嬉しいですね!

ただフォントによっては漢字のないものや、ひらがなもないものもあるのでその辺は要注意です。
漢字のない明朝系のフォントは、漢字部分はデフォルトフォントで表示されるみたいです。
なので、フォントファミリーに他の明朝体も入れておくといい感じになるかもしれませんね。

使えるフォント

  • M+ 1p
  • Rounded M+ 1c
  • はんなり明朝
  • こころ明朝
  • さわらび明朝
  • さわらびゴシック
  • ニクキュウ
  • ニコモジ
  • Noto Sans Japanese

漢字なし

  • はんなり明朝
  • こころ明朝
  • ニクキュウ
  • ニコモジ

ひらがななし

  • ニクキュウ

せっかくなのでbxSliderと新しい日本語WebフォントでDEMOを作ってみました。
よかったら見てみてくださいね。
jQueryのバージョンはjQuery3.1.1です!
ちなみに今回はスマホ意識してないのでPCでご覧くださいね(汗)

【DEMO】

参考サイト