このブログでは、WordPressプラグイン「Ajax Load More」を使っているのですが、うちのブログはさくらインターネットのサーバで稼働しており、大変遅く、ロードがもたつきます。
タグアーカイブページでは記事を無限スクロールで読み込むので、完了するまでの間（1秒にも満たない時間ですが）なにも記事が表示されません。
ローディングのアイコンをCSS3でアニメーションにして表示していたのですが、見た目に「読み込んでますよー」というのが伝わりにくかったので、いっそのことアニメーションを取っ払って、記事のダミーのグレーを入れることにしました。
幸いにも、読込中は、alm-loadingというClassが付与されるようなので、それを表示のスイッチにすることにしました。
テンプレート
<div class="postWrap posts alm-loading">
<?php echo do_shortcode('[ajax_load_more container_type="div" post_type="post"]'); ?>
<div class="loading_dummy">
<div class="post">ここにダミー用HTML</div>
</div>
</div>【ここにダミー用HTML】の部分には、記事のヘッダー要素（タイトルとかタグとか）の空要素を入れておきます。
CSS
.loading_dummy{
display:none;
}
.alm-loading+.loading_dummy{
display:block;
}あとは中身のスタイリングを、beforeとかafterなどの疑似要素とcontentを使って、さきほどの空要素にダミーを入れ込みます。HTMLに「ダミー」とか文字列を入れるのはSEO上好ましくないので、CSSで追加しましょう。
できあがり
おわり🏆
※ロードが遅いことの根本的な解決にはなっていない
