読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

スマホのfont-sizeフォントサイズ指定を安定

body {
  -webkit-text-size-adjust: 100%;
}

【jQuery】infinite scrollの使い方

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」。

とりあえず今回はワードプレスプラグインのものを使用。


wordpressのarchiveで使った。

①まず、1記事ずつスクロールしたら表示させたかったので、

querypostを設定していつも通り記事ループ。

<div class="container">
<?php query_posts('posts_per_page=1&' . $query_string); ?>	
<?php if(have_posts()): while(have_posts()): the_post(); ?>


<article class="article_works">
  <h2><?php the_title(); ?></h2>
</article><!--article_works-->
  
<?php endwhile; // end of the loop. ?>
<?php else: ?>
<p>投稿されたものがありません。</p>
<?php endif; ?>
<?php get_template_part('pagenation'); ?>
</div><!-- container -->

②管理画面でinfinite scroll セレクタ設定

f:id:miukro:20170303234318p:plain


③ローディングのcssは以下のセレクタ

#infscr-loading{
    text-align: center;  
    margin: auto;
}

④infinite scrollで表示した中のスクリプトは無効されているので必ずコールバックで呼び出すこと。

lightboxとか。。。



【参考URL】
http://www.webdesignleaves.com/wp/wordpress/452/

fontplus フォントプラスの使い方

①まず以下にアクセスしてログイン。
https://webfont.fontplus.jp/users/login

②グローバルナビの「スマート」の「サイト登録・PV数レポート」をクリックしてURLを登録

③グローバルナビ「フォント一覧」をクリックして使いたいフォントを探す。そしてコードをコピーボタンを押してコピーしてcssに張り付けばOK

jquery callback コールバック queue 使いかた

下記コードは、
#bg_fvがフェードイン後に#logo_indexがフェードイン。そのあとに.home #g_naviがfadeInされる。

最後にdequeueを。

$('#bg_fv').fadeIn(1000).queue(function () {
        $('#logo_index').fadeIn(500).queue(function () {
            $('.home #g_navi').fadeIn(500).dequeue();
        });
});

【参考URL】

http://tsmd.hateblo.jp/entry/2013/01/17/214018

背景画像を読み込んだら処理 imagesloaded

まずプラグインimagesloaded読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>

そして以下。

$(function(){
  $('#bg_fv').imagesLoaded( { background: true }, function() {
	$('#bg_fv').fadeIn(1000);
  });
});


【背景画像】
https://www.imd-net.com/blog/2016/03/01-233812/

【jQuery】lazyload使い方

head内にlazyloadのプラグインjs読み込ませる。

以下はオプションでカスタムのイベントloadImgをつくってる。
kikaku1をクリックすると、lazyloadが始まる。(img.lazyの画像読み込みが始まる)

data-originalに本命のimgを。srcにloading中の画像を

<img src="dummy.png" class="lazy" data-original="honmei.jpg" alt="*" />
$(function(){
  $('img.lazy').lazyload({
    effect: 'fadeIn',
    event: 'loadImg'
  });


  $( '.kikaku1' ).on( 'click', function(){
    $("img.lazy").trigger("loadImg");
  });

});


【参考URL】
http://www.webdesignleaves.com/wp/jquery/1335/

http://cly7796.net/wp/javascript/plugin-jquery-lazyload/