スクロールするとふわっと現れる ScrollReveal
よく見かけるコンテンツのパーツごとにふわっとフェードインさせるアニメーションです。
ScrollRevealの使い方
CDNよりスクリプトを読み込み、アニメーションを設定します。
<script src="https://unpkg.com/scrollreveal"></script> <script> window.sr = ScrollReveal({ reset: true ,mobile: true}); sr.reveal( '.left', { origin: 'left' , distance: '100%', duration: 1500 , scale: 0, delay :500 ,opacity: 0,}); sr.reveal( '.right', { origin: 'right' , distance: '100%', duration: 1500 , scale: 1.0, delay :500 ,opacity: 0.5,}); </script> </body>
オプション一覧
origin: どの方向から表れるかを設定する項目:値は’bottom’, ‘left’, ‘top’, ‘right’
distance: どれぐらいの距離からアニメーションを開始するか:値は50%など数値で単位は%,em,px,vwなど
duration: アニメーションが完了するまでの速度:値は100など数値。単位はミリ秒
delay: アニメーション開始までの待機時間:値は100など数値。単位はミリ秒
scale: 何倍のサイズから表れるか設定する項目:値は0〜、基準値は1で等倍
opacity: アニメーション開始時の透明度:値は0.5など。0で透明、1で不透明になる。
mobile: モバイル時でもアニメーションを適用するか
reset: 要素が見えるたびにアニメーション表示させるか
useDelay: delayで設定したアニメーションを適用するタイミング
viewFactor: 要素自身の高さの何%がビューポートに入ったらアニメーションを開始するか:値は1の場合100%を意味する。
オプション使用例
<script> window.sr = ScrollReveal(); sr.reveal('.parallax', { easing: 'ease', //イージング('ease' 'ease-in' 'ease-out' 'ease-in-out'など) origin: 'bottom', //アニメーションの基点 duration: 500, //アニメーションの時間 distance: '50px', //アニメーションの距離 delay: 0, //アニメーションの遅延 useDelay: 'always', //遅延の条件('always' 'once' 'onload') opacity: 0, //アニメーション開始時の透明度 scale: 0.8, //アニメーション開始時のスケール container: '.fooContainer', //アニメーションを実装するコンテナ rotate: { x: 0, y: 0, z: 0 }, //アニメーション開始時の傾き mobile: true, //falseにするとモバイルでのアニメーション停止 reset: false, //trueにすると表示の度にアニメーション再生 viewFactor: 0.2, //アニメーションを開始するために必要な要素の表示割合 viewOffset: { top: 0, right: 0, bottom: 0, left: 0 } //要素のオフセット。固定ヘッダーなどがある場合に指定 }); </script>
html内の各タグにclassを設定する
<div class="left"> ふわっ動かしたいコンテンツ </div>
CSSアニメーション利用法
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-iteration-count: infinite; }
クラスの一覧
動作確認
WordPress テーマカスタマイザーでテーマカラーを管理する方法
テーマカスタマイザーへオリジナルの項目を追加
コードを functions.php に記述します。
// テーマカスタマイザーへオリジナルの項目を追加 function my_theme_customize_register( $wp_customize ) { $wp_customize->add_section( 'original_theme_colors', array( 'title' => 'テーマカラー', // 項目名 'priority' => 200, // 優先順位 )); $wp_customize->add_setting( 'primery_theme_color_options', array( 'default' => '#443412', )); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primery_theme_color_options', array( 'label' => 'プライマリーテーマカラー', 'section' => 'original_theme_colors', 'settings' => 'primery_theme_color_options', 'priority' => 20, ))); } add_action( 'customize_register', 'my_theme_customize_register' ); function prime_theme_color() { $prime_theme_color = get_theme_mod( 'primery_theme_color_options', '#443412'); ?> <style type="text/css"> .navbar { background-color: <?php echo $prime_theme_color; ?>; } </style> <?php } add_action( 'wp_head', 'prime_theme_color');
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=""> <?php bloginfo('name'); ?> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon navbar-light"></span> </button> <?php wp_nav_menu([ 'menu' => 'メインメニュー', 'theme_location' => 'main-menu', 'container' => 'div', 'container_id' => 'bs4navbar', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 2, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> <span class="collapse navbar-collapse" id="bs4navbar"> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="検索"> <button class="btn btn-outline-secondary my-2 my-sm-0" type="submit">検索</button> </form> </span> </nav>
single.phpをカテゴリーによって使い分ける方法
<?php get_header(); ?> <?php $post = $wp_query->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'); }; ?> <?php get_footer(); ?>
WordPressのカテゴリー、タグアーカイブページにカスタム投稿タイプの投稿を含めるには
WordPressのカテゴリー、タグ一覧にカスタム投稿タイプの投稿を含める
WordPressでは通常、カテゴリー一覧やタグのアーカイブページではカスタム投稿タイプの記事が含まれません。
functions.php に以下の記述を追記しましょう。「カスタム投稿タイプ名」はご自分の投稿タイプスラッグに置き換えてください。
function add_customtype_archive( $wp_query ) { if ( is_admin() || ! $wp_query->is_main_query() ) return; if ( $wp_query->is_category() || $wp_query->is_tag() ) { $wp_query->set( 'post_type', array( 'post', '「カスタム投稿タイプ名」' )); return; } } add_action( 'pre_get_posts', 'add_customtype_archive' );
投稿にカスタム投稿を含める場合
/* 【出力カスタマイズ】メインクエリーをカスタマイズ */ add_action( 'pre_get_posts', 'foo_modify_main_queries' ); function foo_modify_main_queries ( $query ) { if ( ! is_admin() && $query->is_main_query() ) { // 管理画面以外かつメインクエリーを対象とする if ( $query->is_home() ) { $query->set( 'post_type', array('post','blog')); // 投稿とカスタム投稿(blog)を含める } } }