常連

注目の的

■問題点
既存ページのwordpress化をしているのだが、新着記事を取得して表示したらタイトルも内容もない記事が複数表示される。


```php
<?php if(have_posts()):while(have_posts()):the_post(); ?>
            <article class="tp-magazine__article">
              <a href="<?php the_permalink(); ?>" class="tp-magazine__article__link">
                <div class="tp-magazine__article__thumb">
                  <?php if(has_post_thumbnail()): ?>
                    <?php the_post_thumbnail(); ?>
                  <?php else: ?>
                    <p><img src="http://placehold.jp/24/cc9999/993333/350x150.png" alt=""></p>
                  <?php endif; ?>
                </div>
                <div class="tp-magazine__article__card">
                  <div class="tp-magazine__article__card__info">
                    <div class="tp-magazine__article__card__info__cat cat-health">
                      <?php the_category(); ?>
                    </div>
                    <time class="tp-magazine__article__card__info__data">
                      <?php the_time('Y.m.d'); ?>
                      <?php if(get_the_modified_date('Y.n.j') != get_the_time('Y.n.j')): ?>
                        更新日:<?php the_modified_date('Y.m.d') ?>
                      <?php endif; ?>
                    </time>
                  </div>
                  <h3 class="tp-magazine__article__card__ttl">
                    <?php the_title(); ?>
                  </h3>
                
                </div>
              </a>
            </article>
            <?php endwhile; else: ?>
              <p>記事がありません。</p>
            <?php endif; ?>
```
関係あるか分からないがwordpressのプラグインでエラーの確認をしてみたらphpのエラーと重複クエリがあった。
```sql
//重複クエリ
クエリー		
SELECT wp_posts.ID
FROM wp_posts
WHERE 1=1
AND wp_posts.post_type = 'post'
AND ((wp_posts.post_status = 'publish'))
ORDER BY wp_posts.post_date DESC
LIMIT 0, 3

数　2	
呼び出し元　WP_Query->get_posts()　2件のコール

コンポーネント　コア　2件のコール	

潜在的脅威　WP_Query->get_posts()2件のコール

```


■試したこと
投稿ページにタイトルなしの記事があるかもしれないと思い探したがなかった。

wordpressの新着記事一覧に謎の記事が複数表示される

###実現したいこと
CSSアニメーションが終わったのを見計らって、アニメーションのためのクラスを削除したいです。

###発生している問題

問題の概要としては、アニメーションする要素が一度隠れた後に現れると、アニメーションが再び実行されてしまう点です。

問題の再現過程は➀➁➂です。

➀まず「.flash」をクリックして「.box」をチカチカさせます。
➁次に「.unity」をクリックして「.box」を隠してください。
➂最後に「.split」をクリックしたときに、再び「.box」がチカチカしてしまうと思います。

この２回目のチカチカが不要です。

そこで、➀のチカチカが終わったタイミングで「.flash」を削除したいのですが、どうしたらできますでしょうか？

###該当のソースコード
[実際のサンプル](https://jsfiddle.net/zgbtkn2m/)

```html
<div class="wrapper">

  <div class="inner left">
    <div class="box animated">box</div>
    <button type="button" id="flash">flash</button>
  </div>

  <div class="inner right">
    <button type="button" id="unity">unity</button>
    <button type="button" id="split">split</button>
  </div>

</div>


```
```css
/* 基本のデザイン */
.wrapper {
  display: flex;
}
.wrapper.unity .left {
  display: none;
}
.wrapper.unity .right {
  width: 440px;
}
.inner {
  width: 200px;
  height: 200px;
  background: tan;
  margin: 10px;
  padding: 10px;
}
.box {
  background: gold;  
}

/* アニメーション */
.box.animated.flash {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;	
	-webkit-animation-name: box_flash;
	animation-name: box_flash;	
}
@-webkit-keyframes box_flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
@keyframes box_flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}
```

```jQuery
// フラッシュさせる
$('#flash').click(function(){
	$('.box').addClass('flash')
});

// 統一する
$('#unity').click(function(){
	$('.wrapper').addClass('unity');
});

// 分割する
$('#split').click(function(){
	$('.wrapper').removeClass('unity');
});
```
###補足
「.flash」を削除したいのは、➀のチカチカが終わったタイミングです。

CSSアニメーションが終わったときにクラスを削除する方法

イラストレーターの文字ツールについて、質問があります。
(すごく初歩的で申し訳ございません。。)

イラストレーターで黒塗りの文字を作成しました。
![イメージ説明](6eed4bc2e22bf2cfbfa98c8a6f379679.png)

そのデータをgif変換し、画像を、htmlファイルへ挿入して表示したところ、
背景色(cssで水色指定)との間に白いドットが表示され、困っております。

![イメージ説明](8f422e40b43f7dabb4d0c8884519219e.png)

イラストレーター上で枠線はつけておりませんが、
どのようにしたら、黒と水色だけで綺麗に表示されますでしょうか？

「イラストレーター　文字　縁無し」や「イラストレーター　文字　白いドット」等で
検索してみたのですが、なかなか回答にたどり着けませんでした。

お手数おかけいたしますが、
ヒントを頂けると幸いです。