スクロールするとふわっと現れる　ScrollReveal

よく見かけるコンテンツのパーツごとにふわっとフェードインさせるアニメーションです。 ScrollRevealの使い方 CDNよりスクリプトを読み込み、アニメーションを設定します。 <script src="https://unpkg.com/scrollreveal"></script> <script> window.sr = ScrollReveal({ reset: true ,mobile: true}); sr.reveal( '.left',…

2018-11-28

CSSアニメーション利用法

Animate.css CDNからanimate.cssを読み込む <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> </head> HTML記載例 <h1 class="animated infinite bounce delay-2s">Example</h1> css記載例 .yourElement { animation-duration: 3s; animation-delay: 2s; animation-ite…

2018-11-27

WordPress テーマカスタマイザーでテーマカラーを管理する方法

テーマカスタマイザーへオリジナルの項目を追加コードを functions.php に記述します。 // テーマカスタマイザーへオリジナルの項目を追加 function my_theme_customize_register( $wp_customize ) { $wp_customize->add_section( 'original_theme_colors',…

2018-11-19

bs4navwalker

<nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-fade"> <a class="navbar-brand" href="<?php echo esc_url( home_url( '/' ) ); ?>"> <img src="<?php echo get_template_directory_uri(); ?>/images/travelracing01.png" width="30" height="30" class="d-inline-block align-middle" alt=""> </a></nav>

2018-11-19

single.phpをカテゴリーによって使い分ける方法

post; if ( in_category('music') ) { include(TEMPLATEPATH.'/single/music.php'); elseif ( in_category( array('photo','movie') ) ) { include(TEMPLATEPATH.'/single/works.php'); } else { include(TEMPLATEPATH.'/single/blog.php'); }; ?>