kdcsライブラリー

slickスライダーでは、「slick-initialized」がスライダーが初期化（読み込み完了）した時点で付与されるので、まず全非表示にしておき「slick-initialized」が付与された時点で表示するようにする。

#hogehoge-slider{
    display: none;
}
#hogehoge-slider.slick-initialized{
    display: block; /*slick-initializedが付与されたら表示*/
}

cssアニメーションで行う

#hogehoge-slider{
    opacity: 0;
    transition: opacity .3s linear;
}
#hogehoge-slider.slick-initialized{
    opacity: 1; /*slick-initializedが付与されたら表示*/
}

slickスライダーを使いつつ、タイトルやキャッチコピーなどのテキストを1文字ずつ表示させる方法。

slickスライダーを使う場合、フェードで切り替わるので「.slick-active」のクラスが付加されたときにcssでアニメーションさせなければならない。

例はキャッチコピーとメインタイトルを２行で表示し、文字サイズも変える
文字数は８文字まで対応（cssの記述で増減可能）

html

<div id="slickSlider">
<div class="slick-box">
<div id="slider-1" class="slider-item">
<img class="slickImage1" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img01.jpg" alt="画像２" title="" width="1600" height="665">
<div class="catchPosition inner">
<div class="catchText1">きゃっちこぴー１</div>
<div class="catchText2">めいんたいとる１</div>
</div><!--/.catchPosition-->
</div><!--/#slider-1-->
<div id="slider-2" class="slider-item">
<img class="slickImage2" src="<?php echo get_template_directory_uri(); ?>/images/slick/slick_img02.jpg" alt="画像２" title="" width="1600" height="665">
<div class="catchPosition inner">
<div class="catchText1">きゃっちこぴー２</div>
<div class="catchText2">めいんたいとる２</div></div><!--/.caption-->
</div><!--/#slider-2-->
</div><!--/.slick-box-->
<div class="slickslider-filters"></div>
</div><!--/#slickSlider-->

css

.slick-box .catchPosition {
    display: none;
}
.slick-box .slick-active .catchPosition {
    display: block;
}
.slick-box .catchPosition {
	width: 100%;
	margin: auto;
    color: #fff;
	text-align: center;
	position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}
.slick-box .catchText2 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 48px;
}
.slick-box .catchText1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 36px;
}

.slick-box .catchText1 span{ opacity: 0; }
.slick-box .catchText2 span{ opacity: 0; }

.slick-box .slick-active .catchText1 span{ opacity: 0; animation:text_anime_on 1s ease-out forwards; }
.slick-box .slick-active .catchText2 span{ opacity: 0; animation:text_anime_on 1s ease-out forwards; }

.slick-box .slick-active .catchText1 span:nth-child(1){animation-delay: 0.5s}
.slick-box .slick-active .catchText1 span:nth-child(2){animation-delay: 0.6s}
.slick-box .slick-active .catchText1 span:nth-child(3){animation-delay: 0.7s}
.slick-box .slick-active .catchText1 span:nth-child(4){animation-delay: 0.8s}
.slick-box .slick-active .catchText1 span:nth-child(5){animation-delay: 0.9s}
.slick-box .slick-active .catchText1 span:nth-child(6){animation-delay: 1.0s}
.slick-box .slick-active .catchText1 span:nth-child(7){animation-delay: 1.1s}
.slick-box .slick-active .catchText1 span:nth-child(8){animation-delay: 1.2s}

.slick-box .slick-active .catchText2 span:nth-child(1){animation-delay: 2.5s}
.slick-box .slick-active .catchText2 span:nth-child(2){animation-delay: 2.6s}
.slick-box .slick-active .catchText2 span:nth-child(3){animation-delay: 2.7s}
.slick-box .slick-active .catchText2 span:nth-child(4){animation-delay: 2.8s}
.slick-box .slick-active .catchText2 span:nth-child(5){animation-delay: 2.9s}
.slick-box .slick-active .catchText2 span:nth-child(6){animation-delay: 3.0s}
.slick-box .slick-active .catchText2 span:nth-child(7){animation-delay: 3.1s}
.slick-box .slick-active .catchText2 span:nth-child(8){animation-delay: 3.2s}

@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}

javascript
最後の２行でクラス指定

$.fn.letterSpan = function() {

$(this).each(function() {
    var text = $.trim(this.textContent),
        html = "";

    text.split("").forEach(function(v) {
        html += "<span>" + v + "</span>";
    });

    this.innerHTML = html;
    });
};

$(".catchText1").letterSpan();
$(".catchText2").letterSpan();

＜この内容は不採用＞

タイトルや見出しなどを１文字ずつフェードインさせる記述で改行にも対応。

例はトップページのスライダー内のタイトルのもの

htmlの記述

<div class="catchPosition inner">
<div class="catchText1">キャッチコピー１<br>メインタイトル１</div>
</div><!--/.catchPosition-->

cssの記述
※ポイントは疑似要素:first-lineで１行目のスタイルを変更しているところ

.slick-box .catchPosition {
    width: 100%;
    margin: auto;
    color: #fff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
}

.slick-box .catchText1 {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    font-size: 36px;
}
.slick-box .catchText1:first-line {
    font-size: 24px;
}
.catchText1,
.catchText1 span {
  opacity: 0;
}

javascript（jQery使用）
※ポイントはreplaceでbrタグをそのまま出力して改行に対応させているところ

$(window).on('load', function(){
    var text_wrap = '.catchText1'; //適用させる要素のクラス
    var delay_speed = 80; //文字が出るスピード(ミリ秒)
    var fade_speed = 500; //文字がフェードするスピード(ミリ秒)
    var str;
    $(text_wrap).css('opacity','1');
    var firsttxt = $(text_wrap).html();
    str = firsttxt.replace(/<br>/g,'\n');
    $(text_wrap).html('');
    for (var i = 0; i < str.length; i++) {
        $(text_wrap).append('<span class="text_span">'+str.substr(i, 1).replace(/\n/, "<br>")+'</span>');
        $(text_wrap).children('span:last-child').delay(delay_speed * i).animate({opacity:'1'}, fade_speed);
    }
    setTimeout(function(){$(text_wrap).html(firsttxt)},str.length*delay_speed+fade_speed);
});

Contact Form 7で入力例としてplaceholder属性を付ける場合のコード
例として氏名を必須にし、入力例を「田中　太郎」にする

[text* your-name autocomplete:name placeholder "田中　太郎"]

これで出力されるhtml

<div id="entryForm">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" placeholder="田中　太郎" value="" type="text" name="your-name" />
</div><!--/#entryForm-->

このinputタグ内のplaceholder属性にcssを適用する

#entryForm input::-webkit-input-placeholder {
    color: #aaa;
    font-size: 77%;
}
#entryForm input::-moz-placeholder {
    color: #aaa;
    font-size: 77%;
}
#entryForm input:-ms-input-placeholder {
    color: #aaa;
    font-size: 77%;
}

【注意】
このプレフィックスのついたcssをまとめて一括指定すると何故か適用されない

CSS の object-fit プロパティは、画像（imgタグ）や動画（videoタグ）などの中身をdiv要素のボックス内にどのようにはめ込むかを設定できるが、IEには非対応・・・
そこでjavascriptで対応させる方法。

※object-fitは要素のコンテンツボックス内で画像をコントロールしトリミング等の効果を簡単に表現できる

利用するJSファイルは「object-fit-images」
javascriptの読み込み

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

cssファイルのobject-fit-imagesを適用したいセレクターに以下を記述
通常のobject-fitの下に記述し、値を揃える。
例：cover

    object-fit: cover;
    /* IE対策 */
    font-family: 'object-fit: cover;';

※safariは未検証